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 – An easy to use flexbox grid system.
RAGrid – A flexbox grid that uses recognizable attributes instead of classes.
Taffy – An open source, lightweight, modern CSS framework built with Flexbox.
Griddd – A dead simple, customisable, flexbox-based grid.
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 – An online tool for learning the CSS Grid.
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 – Awesome buttons for awesome projects!
Hover Buttons Library
Hover Buttons Library – A collection of animated CSS/SCSS buttons.
Buttons – A collection of CSS buttons.
Social Share Kit
Foundation Building Blocks
Foundation Building Blocks – Collection of over 100 components to jump start your projects.
Balloon.css – Simple tooltips made of pure CSS.
Fontisto – The iconic font and CSS toolkit.
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.
SCSS Only Slider
SCSS Only Slider – This tutorial will teach you how to create a SCSS only responsive slider.
CSS Loader – Simple loaders for your web applications using only one div and pure CSS.
CSS Animation Tools & Libraries
Animatelo – Just-add-water Web Animations.
Vivify – A free CSS animation library.
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 – 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
50 Cheatsheets, References and Guides for CSS – A huge collection of CSS-related cheatsheets and guides that span a variety of subjects.
CSS Database – A comprehensive list of CSS features and their positions in the process of becoming implemented web standards.
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 – An extensive Sass reference guide.
Boilrplate – A curated directory of boilerplates to help you start your projects.
Atomic CSS Frameworks
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 – A flexible atomic-focused CSS framework.
CSS Web Frameworks
Tailwind CSS – A utility-first CSS framework for rapid UI development.
PaperCSS – The less formal CSS framework.
Shoelace.css – A back to the basics CSS starter kit, for when you don’t need the whole boot.
Turret CSS – A styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.
Trowel – A Sass toolkit that allows you to create and use CSS frameworks.
Unnamed – A colorful CSS framework made by a human not an Ai.
awsm.css – A CSS library for beautify semantic HTML markup without classes, attributes, etc.
Brutalist Framework – An open source framework for the brutalist web design trend.
BBC Grandstand – A collection of common CSS abstractions and utility helper classes.
iotaCSS – A smart open source SASS based OOCSS framework built for scale.
Semantic UI – A development framework that helps create beautiful, responsive layouts using human-friendly HTML.
Luxbar – Featherweight, responsive, CSS only navigation bar.
mini.css – Aims to provide as much functionality as possible in about 5KB gzipped.
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.
Petal – A modern, light CSS UI framework. Based on LESS.
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 – 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 – 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 – An online tool for creating all sorts of gradients that can be exported as CSS or to Sketch.
CSSRooster – A bot that writes CSS classes for HTML with deep learning.
WebGradients – A free collection of 180 linear gradients that you can use as content backdrops in any part of your website.
Angled Edges – A Sass mixin for creating angled edges on sections by dynamically encoding SVGs.
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.
- 20 Free Bootstrap Admin & Dashboard Templates
- 50 Free Bootstrap Web Templates & Themes in 2021
- 25 Free CSS Animation Tools & Frameworks
- 20 Responsive & Lightweight CSS Frameworks Worth Considering
- CSS Flexbox Toolbox – Learning Guides, Tools & Frameworks
- 10 Popular Web Typography Frameworks & Libraries
- 10 Free Material Design Web Frameworks Worth Considering
- Top 50 CSS Libraries, Frameworks and Tools for 2016