40 CSS Libraries, Frameworks and Tools from 2016

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 ToolsStyleguide ToolsStyleguide ToolsResponsive Newsletter FrameworksFlexbox Tools & Frameworks, and CSS Web Layout Frameworks

CSS Libraries

Imagehover.css – A scaleable and lighweight image hover CSS library.
Imagehover.css scaleable lighweight image hover CSS library

Diffee Checker – Instant visual diffing with CSS blend modes.
Diffee Checker Instant visual diffing with CSS blend modes

CSS Image Filters – A collection of tutorials, libraries and tools.
CSS Image Filters - A collection of tutorials, libraries and tools

StarWarsIntro.css – A CSS Library for Recreating the Star Wars Intro Crawl.
StarWarsIntro.css CSS Library Recreating tar Wars Intro Crawl

EQCSS – A CSS extension for element queries and more.

Tootik – A pure CSS Tooltip library.
Tootik pure CSS Tooltip library

Hamburgers – A collection of tasty CSS-animated hamburger icons By Jonathan Suh.
Hamburgers A collection of tasty CSS-animated hamburger icons

Balloon.css – Simple tooltips made of pure CSS By Claudio Holanda.
Balloon.css Simple tooltips made of pure CSS

CSSGram – A tiny library for recreating Instagram filters with CSS filters & blend modes.
CSSGram library recreating Instagram filters CSS filters blend modes

CSSCO – Photographic filters made with CSS, inspired by VSCO and CSSgram.
CSSCO Photographic filters made with CSS

PostCSS.parts – A searchable catalog of PostCSS plugins.
PostCSS.parts searchable catalog of PostCSS plugins

voxel.css – A new, lightweight 3D CSS voxel library.
voxel lightweight 3D CSS voxel library

CSS Tools

stylelint – A mighty modern CSS linter that helps you enforce consistent conventions and avoid errors.
stylelint mighty modern CSS linter enforce consistent conventions 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″/>

cssnano – A modular minifier based on the PostCSS ecosystem.

WAIT! Animate – An easy way to calculate CSS animation keyframe percentages.
WAIT Animate calculate CSS animation keyframe percentages

MaintainableCSS – An approach to writing modular, scalable and maintainable CSS.
MaintainableCSS approach writing modular scalable maintainable CSS

Responsive Image Breakpoints Generator By Cloudinary.
Responsive Image Breakpoints Generator

Brand-Colors – A Collection of 400+ Brand Colors (SCSS, Less, Sass, Stylus & CSS).

A Practical CSS Cheat Sheet By Toptal Developers.
Practical CSS Cheat Sheet

Styleguide Tools & Resources

Styleguide – A resource that makes creating living styleguides much easier.
Styleguide resource that makes creating living styleguides much easier

Atomic Docs – A front-end style guide generator and SASS component manager.
Atomic Docs front-end style guide generator SASS component manager

Styleguide Toolbox – A collection of templates, UI kits, tools & generators.
Styleguide Toolbox A collection of templates UI kits tools generators

Responsive Email & Newsletter Frameworks

Foundation for Emails 2.
Foundation for Emails 2 was released last week

MJML – The only framework that makes responsive-email easy.
MJML framework that makes responsive-email easy

Flexbox Tools & Frameworks

Flex Layout Attribute (FLA) – A CSS Flexbox layout helper.
Flex Layout Attribute FLA CSS Flexbox layout helper

Grd – A lightweight (only 512 bytes) CSS grid framework using Flexbox.
Grd lightweight 512 bytes CSS grid framework using Flexbox

Flexbox Grid – A Grid System Based on the flex Display Property.
Flexbox Grid Grid System Based flex Display Property

Bulma – A modern CSS framework based on Flexbox.
Bulma modern CSS framework Flexbox

Flexbox Playground – A handy tool for learning and building Flexbox layouts.

Flexbox Patterns – Build awesome user interfaces with CSS flexbox.
Flexbox Patterns Build awesome user interfaces with CSS

Flexbox Editor – A web-based editor for generating flexbox layouts.
Flexbox Editor web-based generating layouts

CSS Web Layout Frameworks

Driveway – A pure CSS masonry layout aid.
Driveway pure CSS masonry layout aid

Bricklayer – A lightweight & independent Pinterest-like cascading grid layout library.
Bricklayer lightweight independent Pinterest-like cascading grid layout library

Simple Grid – A responsive, light and simple CSS grid for your website.
Simple Grid responsive light imple CSS grid website

BlazeCSS – An Open source, modular CSS framework for building websites quickly.
BlazeCSS Open source modular CSS framework building websites quickly

Vital CSS Framework – A minimally invasive CSS framework for modern web apps.
Vital CSS Framework minimally invasive CSS framework for modern web apps

Aleut.css – A powerful web framework designed with scalability and performance.
Aleut css 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.
RichCSS Framework Beautiful DRY Clean Reusable CSS

Materialize – A CSS Framework based on Material Design.
Materialize CSS Framework Material Design

Follow: speckyboy.com