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

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.

RAGrid

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

Taffy Framework

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

Griddd

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

Flexbox Cheatsheet

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

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

CSS Grid Tools & Libraries

Griddy

Griddy – An online tool for learning the CSS Grid.

Graaf

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

CSS Grid Cheat Sheet

CSS Grid Cheat Sheet – A CSS grid visual guide.

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

CSS Button Libraries

Bttn.css

Bttn.css – Awesome buttons for awesome projects!

Hover Buttons Library

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

Buttons

Buttons – A collection of CSS 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.

CSS Components

Foundation Building Blocks

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

Balloon.css

Balloon.css – Simple tooltips made of pure CSS.

Fontisto

Fontisto – The iconic font and CSS toolkit.

Pretty Checkbox

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

CSS Checkbox Library

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

explodal

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

SCSS Only Slider

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

CSS Loader

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

CSS Animation Tools & Libraries

Animatelo

Animatelo – Just-add-water Web Animations.

Vivify Library

Vivify – A free CSS animation library.

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.

Obnoxious.CSS

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

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.

CSS Database

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

CSS Triggers

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

Flawless Typography Checklist

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

Sassmagic

Sassmagic – An extensive Sass reference guide.

Boilrplate

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

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.

Biomatic UI

Biomatic UI – A flexible atomic-focused CSS framework.

CSS Web Frameworks

Tailwind CSS

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

PaperCSS

PaperCSS – The less formal CSS framework.

Shoelace.css

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

Turret CSS

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

Trowel

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

Unnamed

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

awsm.css

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

Brutalist Framework

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

BBC Grandstand

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

iotaCSS

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

Semantic UI

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

CSS Frameworks

Luxbar

Luxbar – Featherweight, responsive, CSS only navigation bar.

mini.css

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

Wireframe CSS

Wireframe CSS – A minimal CSS framework for wireframing.

Less Grid Boilerplate

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

kernel.css

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

Petal

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

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.

Spectre.css

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

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.

Critical Path CSS Generator

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

Grabient

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

CSSRooster

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

WebGradients

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

Angled Edges

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

Plumber

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

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.