With all of the trend changes and advancements that CSS goes through, we shouldn’t be surprised at the large volume of free resources and tools that have been released recently. These time-saving CSS libraries and tools have been built to make our lives that little bit easier and also offer a clear learning window into CSS properties that we may not have adopted yet or fully understand.
In this article we have collected 30 of our favorite CSS libraries, frameworks, and tools that been released so far this year.
All of the tools and libraries have been categorized into the following categories: Flexbox Tools & Libraries, CSS Grid Tools, CSS Components, CSS Animation Tools, CSS References, Guides & Checklists, CSS Web Frameworks, Lightweight CSS Frameworks, and finally, a bunch of Miscellanous CSS Tools.
You might also like to take a look at the Top 50 CSS Tools we published back in January.
CSS Flexbox Tools & Libraries
Waffle Grid – An easy to use flexbox grid system.
RAGrid – A flexbox grid that uses recognizable attributes instead of classes.
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.
Foundation Building Blocks
Foundation Building Blocks – Collection of over 100 components to jump start your projects.
Bttn.css – Awesome buttons for awesome projects!
Buttons – A collection of CSS buttons.
Social Share Kit
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.
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
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.
CSS Web Frameworks
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.
Petal – A modern, light CSS UI framework developed at Shakr. 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
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 tools: 50 Tiny, Time-Saving, and Free Tools for Web Designers.