With all of the changes and rapid advancements CSS has gone through the last few years, we should not be surprised at the huge volume of free resources and tools that are currently being released. These time-saving CSS libraries, frameworks, and tools have been built to make our lives that little bit easier and also offer a clear learning window into those CSS properties we may not fully understand.
We have collected 40 of our favorite CSS libraries, frameworks, and tools that been released this year, 2016. You may also like to take a look at the CSS Tools, Libraries and Frameworks for 2015.
All of the tools and libraries have been categorized into the following categories: CSS Libraries,CSS Tools, Styleguide Tools, Styleguide Tools, Responsive Newsletter Frameworks, Flexbox Tools & Frameworks, and CSS Web Layout Frameworks
Imagehover.css – A scaleable and lighweight image hover CSS library.
Diffee Checker – Instant visual diffing with CSS blend modes.
CSS Image Filters – A collection of tutorials, libraries and tools.
StarWarsIntro.css – A CSS Library for Recreating the Star Wars Intro Crawl.
EQCSS – A CSS extension for element queries and more.
Tootik – A pure CSS Tooltip library.
Hamburgers – A collection of tasty CSS-animated hamburger icons By Jonathan Suh.
Balloon.css – Simple tooltips made of pure CSS By Claudio Holanda.
CSSGram – A tiny library for recreating Instagram filters with CSS filters & blend modes.
CSSCO – Photographic filters made with CSS, inspired by VSCO and CSSgram.
PostCSS.parts – A searchable catalog of PostCSS plugins.
voxel.css – A new, lightweight 3D CSS voxel library.
stylelint – A mighty modern CSS linter that helps you enforce consistent conventions and avoid errors.
CSS Purge – Saving the web 1kb at a time.
<img data-cke-saved-src="https://speckycdn-sdm.netdna-ssl.com/wp-content/uploads/2016/05/weekly-d..." src="https://speckycdn-sdm.netdna-ssl.com/wp-content/uploads/2016/05/weekly-d..." alt=">CSS Purge Saving the web 1kb at a time” height=”300″ width=”750″/>
WAIT! Animate – An easy way to calculate CSS animation keyframe percentages.
MaintainableCSS – An approach to writing modular, scalable and maintainable CSS.
Responsive Image Breakpoints Generator By Cloudinary.
Brand-Colors – A Collection of 400+ Brand Colors (SCSS, Less, Sass, Stylus & CSS).
A Practical CSS Cheat Sheet By Toptal Developers.
Styleguide Tools & Resources
Styleguide – A resource that makes creating living styleguides much easier.
Atomic Docs – A front-end style guide generator and SASS component manager.
Styleguide Toolbox – A collection of templates, UI kits, tools & generators.
Responsive Email & Newsletter Frameworks
MJML – The only framework that makes responsive-email easy.
Flexbox Tools & Frameworks
Flex Layout Attribute (FLA) – A CSS Flexbox layout helper.
Grd – A lightweight (only 512 bytes) CSS grid framework using Flexbox.
Flexbox Grid – A Grid System Based on the flex Display Property.
Bulma – A modern CSS framework based on Flexbox.
Flexbox Playground – A handy tool for learning and building Flexbox layouts.
Flexbox Patterns – Build awesome user interfaces with CSS flexbox.
Flexbox Editor – A web-based editor for generating flexbox layouts.
CSS Web Layout Frameworks
Driveway – A pure CSS masonry layout aid.
Bricklayer – A lightweight & independent Pinterest-like cascading grid layout library.
Simple Grid – A responsive, light and simple CSS grid for your website.
BlazeCSS – An Open source, modular CSS framework for building websites quickly.
Vital CSS Framework – A minimally invasive CSS framework for modern web apps.
Aleut.css – A powerful web framework designed with scalability and performance.
Picnic CSS – A beautiful CSS library to kickstart your projects.
Wing – A new, Minimal CSS Framework.
RichCSS Framework – Beautiful, DRY, Clean and Reusable CSS.
Materialize – A CSS Framework based on Material Design.