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

Rocket – Simple tool for creating web animations.

Rocket web animations

Tuesday

Tuesday – Quirky CSS animation library.

Tuesday CSS animation library

Shift.css

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

Shift css framework

MOTION UI

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

MOTION UI Sass library flexible CSS transitions

Transformicons

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

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

cssfmt – Tool that automatically formats CSS source code.

cssfmt format css code

PurifyCSS

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

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

CSSGram – Tiny library for recreating Instagram filters with CSS.

cssgram Tiny library recreating Instagram filters CSS

Flickity

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

Flickity CSS library galleries sliders feel lively effortless

Marx

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

Marx stylish CSS reset no Javacript Classes raw

Pushy

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

Pushy responsive off-canvas navigation menu using CSS transforms transitions

Rucksack

Rucksack – A little bag of CSS superpowers.

Rucksack CSS superpowers

Drop

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

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

Gradify Module producing CSS gradients placeholders images

Stretchy

Stretchy – Form element autosizing.

Stretchy form element autosizing

CSSketch

CSSketch – An open source CSS plugin for Sketch.

open source CSS plugin for Sketch CSSketch

SassyFlags

SassyFlags – Simple library for adding flags to your websites.

sassyflags Simple library adding flags websites

ai2html

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

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

Juiced – Flexbox CSS framework.

juiced Flexbox CSS framework

Primer

Primer – The CSS toolkit and guidelines that power GitHub.

Primer CSS toolkit guidelines power GitHub

Neutron

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

Sass framework creating flexible semantic web layouts Neutron

Basscss

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

Basscss lightweight collection base element styles immutable utilities

flexible.gs

flexible.gs – Responsive and flexible grid system CSS framework (CSS, Sass, LESS and Stylus).

flexible.gs responsive flexible grid system CSS framework

Rin

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

Rin lean gulp HTML SASS boilerplate front-end coding

Wee

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

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

Scooter

Scooter – SCSS framework & UI library from Dropbox.

SCSS framework UI library Dropbox Scooter

spaceBase

spaceBase – Sass-based responsive CSS framework.

spaceBase Sass-based responsive CSS framework

Decorator

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

Decorator HTML CSS JavaScript front-end framework

Rebar

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

Workbench – Frontend boilerplate build for faster development.

Workbench frontend boilerplate build faster development

Lost

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

Lost SCSS Stylus fractional grid system built with calc

minigrid()

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

minimal 2kb zero dependency cascading grid layout

Material Design Frameworks

Material

Material – HTML5 UI framework based on Material Design.

Material HTML5 UI framework based Material Design

LumX

LumX – Framework based on AngularJS & Material Design specs.

LumX responsive front-end framework AngularJS Material Design specs

MUI

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

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

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

SVGOMG web-based app optimizing configuring SVGO

Blend

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

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

resizr simple app testing CSS media queries

css2sass

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.

(608 Posts)

Paul Andrew

Paul is the founder and editor of Speckyboy Design Magazine. He has many years experience within the web design industry and a passion for the latest web technologies and design trends. He lives in the small town of Inverness in the north of Scotland. Follow him on Twitter, Facebook or Google+.

Comments