Top 50 CSS Tools, Frameworks & Libraries from 2015


By

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.

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.

Related Topics


Top
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.