Top 50 CSS Libraries, Frameworks and Tools for 2016


By
CSS

We have collected 50 of our favorite CSS libraries, frameworks, and tools that been released last year (2016) to help give you a running start in 2017. You may also like to take a look at our previuos CSS collections: 2015, 2014 or 2013.

CSS Tools and Libraries Quick Jump: CSS Libraries, CSS Spinners, CSS Image Effects, CSS Utilities, Styleguide Tools, Responsive Newsletter Frameworks, Flexbox Tools & Frameworks, CSS Web Layout Frameworks and Material Design Frameworks.

CSS Libraries

Hamburgers.css

Hamburgers is a collection of tasty CSS-animated hamburger icons created by Jonathan Suh.

Hamburgers A collection of tasty CSS-animated hamburger icons

Balloon.css

Balloon.css is a simple tooltip library made of pure CSS created by Claudio Holanda.

Balloon.css Simple tooltips made of pure CSS

StarWarsIntro.css

StarWarsIntro.css is a CSS Library for Recreating the Star Wars Intro Crawl.

StarWarsIntro.css CSS Library Recreating star Wars Intro Crawl

EQCSS

EQCSS is a CSS extension for element queries and more.

EQCSS CSS extension element queries

Basscss

Basscss is a lightweight collection of CSS utilities designed for speed, clarity, performance, and scalability.

Basscss lightweight collection CSS utilities

Tootik Library

Tootik is a pure CSS Tooltip library.

Tootik pure CSS Tooltip library

PostCSS.parts

PostCSS.parts is a searchable catalog of PostCSS plugins.

PostCSS.parts searchable catalog of PostCSS plugins

voxel.css

voxel.css is a new, lightweight 3D CSS voxel library.

voxel lightweight 3D CSS voxel library

wysiwyg.css

wysiwyg.css allows you to style your TinyMCE or Markdown generated content with a single CSS class.

wysiwyg css Style TinyMCE Markdown generated content single class

Tipograf

Tipograf is a lightweight pure CSS typography base for your next project.

Tipograf Lightweight Pure CSS Typography Base

Spinners & Loading Animation Libraries

Spinners

Spinners is a collection of HTML and CSS “loading icon” animations.

Spinners HTML and CSS loading icon animations

Loading Indicators

Pure text, CSS only, font independent, inline loading indicators.

inline loading indicators

CSS Loader

CSS Loader is a simple loader/spinner library for web applications using only one DIV and pure CSS.

CSS Loader

CSS Image Effects

Imagehover.css

Imagehover.css is a scaleable and lighweight image hover CSS library.

Imagehover.css scaleable lighweight image hover CSS library

HUE.css

HUE.css is a collection of 49 photorealistic CSS gradients for content & image backdrops.

css 49 photorealistic CSS gradients

Diffee Checker

Diffee Checker for instant visual diffing with CSS blend modes.

Diffee Checker Instant visual diffing with CSS blend modes

CSS Image Filters

CSS Image Filters is a collection of tutorials, libraries and tools.

CSS Image Filters is a collection of tutorials, libraries and tools

CSSGram

CSSGram is a tiny library for recreating Instagram filters with CSS filters & blend modes.

CSSGram library recreating Instagram filters CSS filters blend modes

CSSCO

CSSCO is a collection of photographic filters made with CSS, inspired by VSCO and CSSgram.

CSSCO Photographic filters made with CSS

CSS Utilities

Stylelint

stylelint is a mighty modern CSS linter that helps you enforce consistent conventions and avoid errors.

stylelint mighty modern CSS linter enforce consistent conventions avoid errors

CSS Purge

CSS Purge a handy tool that attempts to save the web 1kb at a time.

CSS Purge Saving the web 1kb at a time

cssnano

cssnano is a modular minifier based on the PostCSS ecosystem.

cssnano modular minifier based on the PostCSS ecosystem

WAIT! Animate

WAIT! Animate is an easy way to calculate CSS animation keyframe percentages.

WAIT Animate calculate CSS animation keyframe percentages

MaintainableCSS

MaintainableCSS is an approach to writing modular, scalable and maintainable CSS.

MaintainableCSS approach writing modular scalable maintainable CSS

Brand Colors

Brand-Colors is a Collection of 400+ Brand Colors (SCSS, Less, Sass, Stylus & CSS).

Brand-Colors

Styleguide Tools & Resources

Living Styleguide

Styleguide is a resource that makes creating living styleguides much easier.

Styleguide resource that makes creating living styleguides much easier

Atomic Docs

Atomic Docs is a front-end style guide generator and SASS component manager.

Atomic Docs front-end style guide generator SASS component manager

Styleguide Toolbox

Styleguide Toolbox is a collection of templates, UI kits, tools & generators.

Styleguide Toolbox A collection of templates UI kits tools generators

Responsive Email & Newsletter Frameworks

Foundation for Email

Foundation for Emails 2.

Foundation for Emails 2 was released last week

MJML

MJML is a new framework for making responsive email design much easier.

MJML framework that makes responsive-email easy

Flexbox Tools & Frameworks

FLA

Flex Layout Attribute (FLA) is a CSS Flexbox layout helper.

Flex Layout Attribute FLA CSS Flexbox layout helper

Grd

Grd is a lightweight (only 512 bytes) CSS grid framework using Flexbox.

Grd lightweight 512 bytes CSS grid framework using Flexbox

Flexbox Grid

Flexbox Grid is a Grid System Based on the flex Display Property.

Flexbox Grid Grid System Based flex Display Property

Bulma

Bulma is a modern CSS framework based on Flexbox.

Bulma modern CSS framework Flexbox

Flexbox Playground

Flexbox Playground is a handy tool for learning and building Flexbox layouts.

Flexbox Playground

Flexbox Patterns

Flexbox Patterns is a collection of resources for building awesome user interfaces with CSS flexbox.

Flexbox Patterns Build awesome user interfaces with CSS

CSS Web Layout Frameworks

Driveway

Driveway is a pure CSS masonry layout aid.

Driveway pure CSS masonry layout aid

Bricklayer

Bricklayer is a lightweight & independent Pinterest-like cascading grid layout library.

Bricklayer lightweight independent Pinterest-like cascading grid layout library

Simple Grid

Simple Grid is a responsive, light and simple CSS grid for your website.

Simple Grid responsive light imple CSS grid website

BlazeCSS

BlazeCSS is an Open source, modular CSS framework for building websites quickly.

BlazeCSS Open source modular CSS framework building websites quickly

Vital CSS Framework is a minimally invasive CSS framework for modern web apps.

Vital CSS Framework minimally invasive CSS framework for modern web apps

Aleut.css

Aleut.css is a powerful web framework designed with scalability and performance.

Aleut css powerful web framework designed with scalability and performance

Gutenberg.css

Gutenberg.css is a Modern Framework for Printing Correctly.

Modern Framework for Printing Correctly Gutenberg css

mini.css

mini.css is a minimal Sass-y responsive mobile-first style-agnostic CSS framework.

minimal Sass responsive mobile-first

Picnic CSS

Picnic CSS is a beautiful CSS library to kickstart your projects.

Picnic CSS library kickstart your projects

Wing

Wing is a new, Minimal CSS Framework.

Wing Minimal CSS Framework

RichCSS Framework

RichCSS Framework for beautiful, DRY, clean and reusable CSS.

RichCSS Framework Beautiful DRY Clean Reusable CSS

Material Design Web Frameworks

Vue Material

Vue Material is a lightweight Material Design framework for Vue.js.

Vue Material

Materialize

Materialize is a CSS Framework based on Material Design.

Materialize CSS Framework Material Design

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.