50 CSS Libraries, Frameworks and Tools from 2014

With all of the changes and advancements that CSS has gone threw these 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 CSS properties we may not fully understand.

In this post we have collected 50 of our favorite CSS libraries, frameworks and tools that been released this year.

All of the tools and libraries have been categorized into the following categories: Animation Libraries, Spinner & Indicator, CSS Typography Libraries & Tools, CSS Frameworks & UI Kits, Icon Creation Tools, Color Tools, Reference Resources, and an extensive selection of miscellaneous CSS tools. In total there are just over 50 resources, so, there is something for everybody.

CSS Libraries for Animation

CSS Shake – A collection of CSS classes that will vibrates & shake the 'DOM'.
CSS Shake A collection of CSS classes that will vibrates & shake the 'DOM'

Magic Animations – A small library of CSS3 special effect animations.
Magic Animations A small library of CSS3 special effect animations CSS Libraries

Hover.css – A selection of CSS3 animated hover effects for buttons.
Hover.css A selection of CSS3 animated hover effects for buttons

Saffron – A Sass mixin library of simple CSS3 animations and transitions.
Saffron A Sass mixin library of simple CSS3 animations and transitions CSS Libraries

CSS Libraries for Spinners & Indicators

Single Element CSS Spinners – A library of single <div> CSS animated loading spinners.
Single Element CSS Spinners A library of single <div> CSS animated loading spinners

SpinKit – A collection of smooth and easy to customize CSS3 animated loading indicators.
SpinKit A collection of smooth and easy to customize CSS3 animated loading indicators

CSS Typography Libraries & Tools

typebase.css – A minimal and customizable LESS & SASS typography stylesheet.
typebase.css A minimal and customizable LESS & SASS typography stylesheet

Typesettings – A Sass toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratios.
Typesettings A Sass toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratios CSS Libraries

Type Rendering Mix – apply CSS based on your browser's text rendering engine.
Type Rendering Mix apply CSS based on your browser's text rendering engine

Sassline – A Sass mixins for setting text to a baseline grid with ease.
Sassline A Sass mixins for setting text to a baseline grid with ease CSS Libraries

CSS Frameworks & UI Kits

Kindling – A responsive grid system with minimal styling and markup.
Kindling A responsive grid system with minimal styling and markup

Webplate – A fully featured frontend framework.
Webplate A fully featured frontend framework CSS Libraries

Flexbox Grid – A grid system based on the flex display property.
Flexbox Grid A grid system based on the flex display property

Fluidity – A vey, very lightweight responsive system.
Fluidity A vey, very lightweight responsive system

Cute Grids – A feature-rich responsive grid system.
Cute Grids A feature-rich responsive grid system

IceCream – A simple and responsive grid framework.
IceCream A simple and responsive grid framework

Zen Grids – A responsive grid system built with the power of Sass.
Zen Grids A responsive grid system built with the power of Sass CSS Libraries

ApplePie – A modular and responsive CSS toolkit.
ApplePie A modular and responsive CSS toolkit CSS Libraries

Pure CSS Components – A set of common UI components.
Pure CSS Components A set of common UI components

BASSCSS – A lightweight and responsive toolkit based on OOCSS principles.
BASSCSS A lightweight and responsive toolkit based on OOCSS principles

Responsee II – A lightweight responsive CSS framework.
Responsee II A lightweight responsive CSS framework

CSS Icon Creation Tools

Glyphter – A handy tool for creating icon fonts from SVGs.
Glyphter A handy tool for creating icon fonts from SVGs

Perfect Icons – A web based social icon creator.
Perfect Icons A web based social icon creator

iconizr – A tool for converting SVG images to a set of CSS icons.
iconizr A tool for converting SVG images to a set of CSS icons

CSS Color Tools

Colors – SASS/LESS/Stylus/CSS variables and CSS classes of a better color paletter for the web.
Colors SASS/LESS/Stylus/CSS variables and CSS classes of a better color paletter for the web

CSS Colours – A list of CSS colour names.
CSS Colours A list of CSS colour names

Pantone Sass – A list of Pantone colors as Sass variables.
Pantone Sass A list of Pantone colors as Sass variables

CSS Reference and Reading

CSS Vocabulary – A small web app to help understand CSS terminology.
CSS Vocabulary A small web app to help understand CSS terminology

CSS Animations, A Pocket Guide – A free ebook that covers the basics of CSS animation.
CSS Animations, A Pocket Guide A free ebook that covers the basics of CSS animation

A Complete Guide to Flexbox.
A Complete Guide to Flexbox

Shadow DOM CSS Cheat Sheet.
Shadow DOM CSS Cheat Sheet

Magic of CSS – A free CSS course for web developers who want to be 'magicians'.
Magic of CSS A free CSS course for web developers who want to be 'magicians'

Cerberus – A few simple patterns for responsive HTML emails.
Cerberus A few simple patterns for responsive HTML emails

Web Based CSS Tools & Apps

StyleStats – A small app for collecting statistics on any CSS file.
StyleStats A small app for collecting statistics on any CSS file

extractCSS – A tool which can extract ids & classes from HTML documents and output a CSS stylesheet.
extractCSS A tool which can extract ids & classes from HTML documents and output a CSS stylesheet

CSSynth – A small app for running animations in order.
CSSynth A small app for running animations in order

EnjoyCSS – A useful tool that allows you to adjust rich graphical styles quickly without coding.
EnjoyCSS A useful tool that allows you to adjust rich graphical styles quickly without coding

Miscellaneous CSS Tools, Apps & Libraries

Sache – A directory of Sass & Compass extensions.
Sache A directory of Sass & Compass extensions

Imacss – A library that transforms image files to data URIs.
Imacss A library that transforms image files to data URIs

Hologram – A Ruby gem that parses comments in your CSS and turns them into a style guide.
Hologram A Ruby gem that parses comments in your CSS and turns them into a style guide

CSS Element Queries – A proof-of-concept event-based CSS element dimension query with valid CSS selector syntax.
CSS Element Queries A proof-of-concept event-based CSS element dimension query with valid CSS selector syntax

SUIT CSS – CSS for building self-contained, composable, configurable UI components.
SUIT CSS CSS for building self-contained, composable, configurable UI components

DoCSSa – Sass based CSS architecture and methodology.
DoCSSa – Sass based CSS architecture and methodology

Orso – A LESS & SCSS Nested Rules Generator.
Orso A LESS & SCSS Nested Rules Generator

Pesticide – A CSS layout debugging tool.
Pesticide A CSS layout debugging tool

Beautons – A CSS toolkit for creating consistent, robust and solid buttons.
Beautons A CSS toolkit for creating consistent, robust and solid buttons

WTF, Forms? – CSS to make your form controls friendlier.
WTF, Forms? CSS to make your form controls friendlier

ResponsiveComments – A purely client-side solution to conditional loading.
ResponsiveComments A purely client-side solution to conditional loading

Kite – A flexible layout helper CSS library
Kite A flexible layout helper CSS library

Social Buttons v2 – A collection of east to use and elegant sharing buttons.
Social Buttons v2 A collection of east to use and elegant sharing buttons

Author: (608 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments