Top 50 CSS Tools, Frameworks & Libraries from 2015


Over this past year, we’ve seen a huge rise in popularity of Flexbox layouts, subtle CSS animations, SVG usage, Structure Styleguides, Instagram-style effects, deeper CSS integration with mainstream applications, like Photoshop and Sketch, and CSS preprocessors, like Sass and Less, are continuing to gain wide-spread acceptance.

Not only is CSS maturing beautifully, with the help of the many open-source resources released this year, using it and building something robust with it has never been easier.

All 50 of the tools in this collection are time-saving additions to your already existing web design toolbox. So, always pick the right tool for the right project.

All of the tools, libraries and frameworks have been organized into the following categories: CSS Animation Tools & Libraries, CSS Utilities & Tools, Flexbox Tools, CSS Toolkits, Responsive Web Frameworks, Material Design Frameworks and a small collection Web-Based Apps.

You may also like to take a look at the CSS collections from 2013 or 2014.

CSS Animation Tools & Libraries

Animate Plus

Animate Plus – JavaScript library that helps you animate CSS properties and SVG attributes.

Animate Plus JavaScript library helps animate CSS properties SVG attributes


Rocket – Simple tool for creating web animations.

Rocket web animations


Tuesday – Quirky CSS animation library.

Tuesday CSS animation library


Shift.css – Simple responsive framework to build timed, contained CSS animations.

Shift css framework


MOTION UI – Sass library for creating flexible CSS transitions & animations.

MOTION UI Sass library flexible CSS transitions


Transformicons – Animated icons, symbols and buttons using SVG and CSS.

Transformicons Animated icons symbols buttons using SVG CSS

For more CSS animation tool, you should take a look at this post: CSS Animation Tools, Frameworks & Tutorials.

CSS Utilities & Tools


sanitize.css – Makes browsers render elements consistently and allows you to style with today’s best practices out-of-the-box.

sanitizecss framework css library

CSS Stats

CSS Stats – Tool that will visualize useful stats about your CSS.

CSS Stats tool visualize useful stats about CSS


cssfmt – Tool that automatically formats CSS source code.

cssfmt format css code


PurifyCSS – Handy utility that detects which CSS selectors your app is using and creates a file without the unused CSS.

PurifyCSS utility CSS selectors unused app

If you’re looking for more CSS utilities, you might like to have a look at this post: Tools for Formatting, Organizing and Tidying CSS Code.

Flexbox Tools

flexbox in 5 Minutes

flexbox in 5 minutes – An interactive tour of all the major features of the CSS property: flexbox.

flexbox 5 minutes interactive tour major features CSS property


Flexbugs – Community-curated list of flexbox issues and cross-browser workarounds

Flexbugs flebox issues cross-browser

cssPlus – Robust, fast and cross browser layout scaffolding based on Flexbox.

cssPlus cross browser layout scaffolding based Flexbox

Sketch Flex Layout

Sketch Flex Layout – Plugin for Sketch that allow for CSS Flexbox layouts.

Sketch Flex Layout

If you’re looking for more CSS Flexbox tools, you might like to have a look at this post: CSS Flexbox Toolbox – Learning Guides, Tools & Frameworks.

CSS Toolkits


CSSGram – Tiny library for recreating Instagram filters with CSS.

cssgram Tiny library recreating Instagram filters CSS


Flickity – CSS library that makes galleries & sliders feel lively and effortless.

Flickity CSS library galleries sliders feel lively effortless


Marx – Stylish CSS reset with no Javacript or Classes, just raw CSS.

Marx stylish CSS reset no Javacript Classes raw


Pushy – Responsive off-canvas navigation menu using CSS transforms & transitions.

Pushy responsive off-canvas navigation menu using CSS transforms transitions


Rucksack – A little bag of CSS superpowers.

Rucksack CSS superpowers


Drop – Library for creating dropdowns and other floating elements.

Drop library creating dropdowns floating elements

Tufte CSS

Tufte CSS – Tools to style web articles using the ideas demonstrated by Edward Tufte's books.

Tufte CSS


Gradify – Module for producing CSS gradients as placeholders for images.

Gradify Module producing CSS gradients placeholders images


Stretchy – Form element autosizing.

Stretchy form element autosizing


CSSketch – An open source CSS plugin for Sketch.

open source CSS plugin for Sketch CSSketch


SassyFlags – Simple library for adding flags to your websites.

sassyflags Simple library adding flags websites


ai2html – Open-source script for Adobe Illustrator that converts Illustrator documents into HTML and CSS.

ai2html open-source script Adobe Illustrator converts Illustrator documents HTML CSS


Crayon.css – A list of css variables linking color names to hexadecimal values.

Crayon.css css variables hexadecimal values color names

Responsive Web Frameworks & UI Kits


Juiced – Flexbox CSS framework.

juiced Flexbox CSS framework


Primer – The CSS toolkit and guidelines that power GitHub.

Primer CSS toolkit guidelines power GitHub


Neutron – Sass framework for creating flexible, clear, and semantic web layouts.

Sass framework creating flexible semantic web layouts Neutron


Basscss – Lightweight collection of base element styles and immutable utilities.

Basscss lightweight collection base element styles immutable utilities – Responsive and flexible grid system CSS framework (CSS, Sass, LESS and Stylus). responsive flexible grid system CSS framework


Rin – Lean, gulp-based HTML and SASS boilerplate for better front-end coding.

Rin lean gulp HTML SASS boilerplate front-end coding


Wee – Lightweight front-end framework for logically building complex, responsive web projects.

Wee lightweight front-end framework logically building complex responsive web projects


Scooter – SCSS framework & UI library from Dropbox.

SCSS framework UI library Dropbox Scooter


spaceBase – Sass-based responsive CSS framework.

spaceBase Sass-based responsive CSS framework


Decorator – HTML, CSS, and JavaScript front-end framework.

Decorator HTML CSS JavaScript front-end framework


Rebar – A Sass/Stylus grid framework.

Rebar new Sass Stylus grid framework

Concise CSS

Concise CSS – Framework written in SASS that’s lightwheight and easy-to-use.

Concise CSS framework SASS lightwheight


Workbench – Frontend boilerplate build for faster development.

Workbench frontend boilerplate build faster development


Lost – SCSS or Stylus fractional grid system built with calc().

Lost SCSS Stylus fractional grid system built with calc


minigrid() – Minimal 2kb zero dependency cascading grid layout

minimal 2kb zero dependency cascading grid layout

Material Design Frameworks


Material – HTML5 UI framework based on Material Design.

Material HTML5 UI framework based Material Design


LumX – Framework based on AngularJS & Material Design specs.

LumX responsive front-end framework AngularJS Material Design specs


MUI – Lightweight Material Design web framework.

MUI lightweight Material Design web framework

For more Material Design frameworks and UI kits, you should take a look at this post: 10 Material Design Web Frameworks Worth Considering.

Web-Based CSS Tools & Apps

CSS Gradient Animator

CSS Gradient Animator – Web-based tool for generating animated gradients.

CSS Gradient Animator web-based tool generating animated gradients


CIRCULUS.SVG – SVG circular menu generator.

CIRCULUS.SV SVG circular menu generator

CSS Ruler

CSS Ruler – Handy web-based tool for exploring CSS lengths.

CSS Ruler handy web-based tool exploring CSS lengths


SVGOMG – Web-based app for optimizing and configuring SVGO.

SVGOMG web-based app optimizing configuring SVGO


Blend – Tool for generating simple and beautiful CSS3 gradients.

blend Tool generating simple beautiful CSS3 gradients

Filter Blend

Filter Blend – CSS blend modes and filters playground & generator.

Filter Blend CSS blend modes filters playground

SVG Path Builder App

SVG Path Builder App – Build an SVG path quickly using a GUI.

Build SVG path quickly app GUI


.resizr – Simple app for testing your CSS media queries.

resizr simple app testing CSS media queries


css2sass – Web-based app for converting CSS snippets to Syntactically Awesome StyleSheets code.

css2sass web-based app converting CSS snippets Syntactically Awesome StyleSheets code

If you’re looking for more web-based CSS tools, you might like to have a look at this post: 40 Tiny Web-Based Tools & Apps for Working With CSS.

Related Topics

This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.