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'.
Magic Animations – A small library of CSS3 special effect animations.
Hover.css – A selection of CSS3 animated hover effects for buttons.
Saffron – A Sass mixin library of simple CSS3 animations and transitions.
CSS Libraries for Spinners & Indicators
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.
CSS Typography Libraries & Tools
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.
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.
CSS Frameworks & UI Kits
Kindling – A responsive grid system with minimal styling and markup.
Webplate – A fully featured frontend framework.
Flexbox Grid – A grid system based on the flex display property.
Fluidity – A vey, very lightweight responsive system.
Cute Grids – A feature-rich responsive grid system.
IceCream – A simple and responsive grid framework.
Zen Grids – A responsive grid system built with the power of Sass.
ApplePie – A modular and responsive CSS toolkit.
Pure CSS Components – A set of common UI components.
BASSCSS – A lightweight and responsive toolkit based on OOCSS principles.
Responsee II – A lightweight responsive CSS framework.
CSS Icon Creation Tools
Glyphter – A handy tool for creating icon fonts from SVGs.
Perfect Icons – A web based social icon creator.
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.
CSS Colours – A list of CSS colour names.
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 Animations, A Pocket Guide – A free ebook that covers the basics of CSS animation.
Magic of CSS – A free CSS course for web developers who want to be 'magicians'.
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.
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.
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.
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.
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.
DoCSSa – Sass based CSS architecture and methodology.
– A LESS & SCSS Nested Rules Generator.
Pesticide – A CSS layout debugging tool.
Beautons – A CSS toolkit for creating consistent, robust and solid buttons.
WTF, Forms? – CSS to make your form controls friendlier.
ResponsiveComments – A purely client-side solution to conditional loading.
Kite – A flexible layout helper CSS library
Social Buttons v2 – A collection of east to use and elegant sharing buttons.