50 of Our Favorite CSS Libraries, Frameworks and Tools from 2017

With all of the trend changes and advancements that CSS goes through, we shouldn’t be surprised at the volume of free resources and tools that have been released recently. These time-saving CSS libraries and tools have been built to make your lives that little bit easier and also offer a clear learning window into CSS properties that you may not have adopted yet, or fully understand quite yet.

In this collection we have collected 50 of our favorite CSS libraries, frameworks, and tools that have all been released this year.

All of the tools and libraries have been categorized into the following categories: Flexbox Tools & Libraries, CSS Grid Tools, CSS Button Libraries, CSS Components, CSS Animation Tools, CSS References, Guides & Checklists, Atomic CSS Frameworks,CSS Web Frameworks, Lightweight CSS Frameworks, and finally, a bunch of Miscellanous CSS Tools.

CSS Flexbox Tools & Libraries

Waffle Grid

Waffle Grid – An easy to use flexbox grid system.

Waffle Grid

RAGrid

RAGrid – A flexbox grid that uses recognizable attributes instead of classes.

RAGrid

Taffy Framework

Taffy – An open source, lightweight, modern CSS framework built with Flexbox.

Taffy

Griddd

Griddd – A dead simple, customisable, flexbox-based grid.

Griddd

Flexbox Cheatsheet

Flexbox Cheatsheet – An interactive guide for CSS Flexbox properties, with plenty of examples.

Flexbox Cheatsheet

For more Flexbox resources, take a look at this post.

CSS Grid Tools & Libraries

Griddy

Griddy – An online tool for learning the CSS Grid.

Griddy

Graaf

Graaf – A collection of pure CSS grid overlays for designing.

Graaf

CSS Grid Cheat Sheet

CSS Grid Cheat Sheet – A CSS grid visual guide.

CSS Grid Cheat Sheet

For an introduction to CSS Grid, take a look at this post.

CSS Button Libraries

Bttn.css

Bttn.css – Awesome buttons for awesome projects!

Bttn.css

Hover Buttons Library

Hover Buttons Library – A collection of animated CSS/SCSS buttons.

Hover Buttons

Buttons

Buttons – A collection of CSS buttons.

Buttons

Social Share Kit

Social Share Kit – A library of decent and good looking CSS/JavaScript social sharing tools like social network icons, share buttons, share count, floating/sticky button bar and popups.

Social Share Kit

CSS Components

Foundation Building Blocks

Foundation Building Blocks – Collection of over 100 components to jump start your projects.

Foundation Building Blocks

Balloon.css

Balloon.css – Simple tooltips made of pure CSS.
Balloon.css

Fontisto

Fontisto – The iconic font and CSS toolkit.

Fontisto

Pretty Checkbox

Pretty Checkbox – A pure CSS library to beautify checkbox and radio buttons.

Pretty Checkbox

CSS Checkbox Library

CSS Checkbox Library – A huge library of CSS Checkboxes for every taste.

CSS Checkbox Library

explodal

explodal – An “explosive” modal window that consists of over 97% CSS, 1 line of JavaScript and a small GIF.

explodal

SCSS Only Slider

SCSS Only Slider – This tutorial will teach you how to create a SCSS only responsive slider.

SCSS Only Slider

CSS Loader

CSS Loader – Simple loaders for your web applications using only one div and pure CSS.

CSS Loader

CSS Animation Tools & Libraries

Animatelo

Animatelo – Just-add-water Web Animations.

Animatelo

Vivify Library

Vivify – A free CSS animation library.

Vivify

Animista

Animista – A place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use.

Animista

Obnoxious.CSS

Obnoxious.CSS – Animations for the strong of heart, and weak of mind.

OBNOXIOUS.CSS

For even more CSS animation tools and resources, take a look at this round-up.

CSS References, Guides & Checklists

CSS Cheatsheets

50 Cheatsheets, References and Guides for CSS – A huge collection of CSS-related cheatsheets and guides that span a variety of subjects.

50 Cheatsheets, References and Guides for CSS

CSS Database

CSS Database – A comprehensive list of CSS features and their positions in the process of becoming implemented web standards.

CSS Database

CSS Triggers

CSS Triggers – An interactive resource that lets you see how CSS properties utilize browser resources.

CSS Triggers

Flawless Typography Checklist

Flawless Typography Checklist – A complete typography master course in the form of an interactive visual checklist.

Flawless Typography Checklist

Sassmagic

Sassmagic – An extensive Sass reference guide.

Sassmagic

Boilrplate

Boilrplate – A curated directory of boilerplates to help you start your projects.

Boilrplate

Atomic CSS Frameworks

Fractures

Fractures– A Baseline atomic CSS toolkit that helps you bootstrap design-systems and prototypes by providing a set of non-blocking, atomic, utility classes.

fractures

Biomatic UI

Biomatic UI – A flexible atomic-focused CSS framework.

Biomatic UI

CSS Web Frameworks

Tailwind CSS

Tailwind CSS – A utility-first CSS framework for rapid UI development.

Tailwind CSS

PaperCSS

PaperCSS – The less formal CSS framework.

PaperCSS

Shoelace.css

Shoelace.css – A back to the basics CSS starter kit, for when you don’t need the whole boot.

Shoelace.css

Turret CSS

Turret CSS – A styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.

turretcss

Trowel

Trowel – A Sass toolkit that allows you to create and use CSS frameworks.

Trowel

Unnamed

Unnamed – A colorful CSS framework made by a human not an Ai.

Unnamed

awsm.css

awsm.css – A CSS library for beautify semantic HTML markup without classes, attributes, etc.

awsm.css

Brutalist Framework

Brutalist Framework – An open source framework for the brutalist web design trend.

Brutalist Framework

BBC Grandstand

BBC Grandstand – A collection of common CSS abstractions and utility helper classes.

BBC Grandstand

iotaCSS

iotaCSS – A smart open source SASS based OOCSS framework built for scale.

iotaCSS

Semantic UI

Semantic UI – A development framework that helps create beautiful, responsive layouts using human-friendly HTML.

Semantic UI

CSS Frameworks

Luxbar

Luxbar – Featherweight, responsive, CSS only navigation bar.

Luxbar

mini.css

mini.css – Aims to provide as much functionality as possible in about 5KB gzipped.

mini.css

Wireframe CSS

Wireframe CSS – A minimal CSS framework for wireframing.

wireframe

Less Grid Boilerplate

Less Grid Boilerplate – A lightweight 12-column CSS grid system built with CSS Grid and LESS.

Less Grid Boilerplate

kernel.css

kernel.css – An unintrusive, lightweight and semantic CSS and JavaScript framework inspired by the Material Design spec.

kernel.css

Petal

Petal – A modern, light CSS UI framework. Based on LESS.

Petal

Tent CSS

Tent CSS – Pulling inspiration from outdoor survival, Tent CSS is unglamorously simple and robust. The framework is designed to be used as a foundation for building websites.

Tent CSS

Spectre.css

Spectre.css – A lightweight, responsive and modern CSS framework for faster and extensible development.

Spectre.css

We recently published a collection of new, lightweight CSS frameworks.

Miscellanous CSS Tools

Gradientify

Gradientify – A collection of top gradients with copy and paste CSS code.

Gradientify

Critical Path CSS Generator

Critical Path CSS Generator – Speed up your page render time in no time.

Critical Path CSS Generator

Grabient

Grabient – An online tool for creating all sorts of gradients that can be exported as CSS or to Sketch.

Grabient

CSSRooster

CSSRooster – A bot that writes CSS classes for HTML with deep learning.

CSSRooster

WebGradients

WebGradients – A free collection of 180 linear gradients that you can use as content backdrops in any part of your website.

WebGradients

Angled Edges

Angled Edges – A Sass mixin for creating angled edges on sections by dynamically encoding SVGs.

Angled Edges

Plumber

Plumber – Create better looking documents and speed up CSS development by adding vertical rhythm to your page.

Plumber

For more web designer tools: 50 Tiny, Time-Saving, and Free Tools for Web Designers.

You might also like to take a look at the Top 50 CSS Tools from earlier in the year.

Comments