You Design. We HTML.

50 CSS Tools, Frameworks & Libraries from 2015

December 6, 2015 - Uncategorized


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 that helps you animate CSS properties and SVG attributes

Rocket

Rocket – Simple tool for creating web animations.

Rocket

Tuesday

Tuesday – Quirky CSS animation library.

Tuesday CSS animation library

Shift.css

Shift.css – Simple 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 and buttons using SVG and 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

CSS Stats

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

CSS Stats, a tool that will visualize useful stats about your CSS

cssfmt

cssfmt – Tool that automatically formats CSS source code.

cssfmt

PurifyCSS

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

PurifyCSS

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 in 5 minutes, an interactive tour of all the major features of the CSS property: flexbox

Flexbugs

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

Flexbugs

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

cssPlus

Sketch Flex Layout

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

Sketch Flex Layout

CSS Toolkits

CSSGram

CSSGram – Tiny library for recreating Instagram filters with CSS.

Flickity

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

Flickity, a CSS library that makes galleries & sliders feel lively and effortless

Marx

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

Marx, the stylish CSS reset with no Javacript or Classes. Just raw CSS

Pushy

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

Pushy, a 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

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

ai2html

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

ai2html, an open-source script for Adobe Illustrator that converts Illustrator documents into HTML and CSS

Crayon.css

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

Crayon.css

Responsive Web Frameworks & UI Kits

Juiced

Juiced – Flexbox CSS framework.

Primer

Primer – The CSS toolkit and guidelines that power GitHub.

Primer, the CSS toolkit and guidelines that power GitHub

Neutron

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

Basscss

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

Basscss, a lightweight collection of base element styles and immutable utilities

flexible.gs

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

flexible.gs responsive and flexible grid system CSS framework

Rin

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

Rin, a lean, gulp-based HTML and SASS boilerplate for better front-end coding

Wee

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

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

Scooter

Scooter – SCSS framework & UI library from Dropbox.

spaceBase

spaceBase – Sass-based responsive CSS framework.

spaceBase, a Sass-based responsive CSS framework

Decorator

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

Decorator, a new HTML, CSS, and JavaScript front-end framework

Rebar

Rebar – A Sass/Stylus grid framework.

Rebar,  a 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, a SCSS or 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, a HTML5 UI framework based on Material Design

LumX

LumX – Framework based on AngularJS & Material Design specs.

LumX, the first responsive front-end framework based on AngularJS & Material Design specs

MUI

MUI – Lightweight Material Design web framework.

MUI, a 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, a web-based tool for generating animated gradients

CIRCULUS.SVG

CIRCULUS.SVG – SVG circular menu generator.

CIRCULUS.SV, an SVG circular menu generator

CSS Ruler

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

CSS Ruler, a handy web-based tool for exploring CSS lengths

SVGOMG

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

SVGOMG, a web-based app for optimizing and configuring SVGO

Blend

Blend – Tool for generating simple and 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.

.resizr

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

resizr, a simple app for testing your CSS media queries

css2sass

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

css2sass a web-based app for converting CSS snippets to 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.


The post 50 CSS Tools, Frameworks & Libraries from 2015 appeared first on Speckyboy Design Magazine.


Source: Specky Boy