With all of the changes and rapid advancements CSS has gone through the last few years, we should not be surprised at the huge volume of open-source resources and tools that are currently being released.
These time-saving CSS libraries, frameworks, and tools have been built to make our lives that little bit easier and also offer a learning window into those CSS areas we may not fully understand.
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.
Hamburgers is a collection of tasty CSS-animated hamburger icons created by Jonathan Suh.
Balloon.css is a simple tooltip library made of pure CSS created by Claudio Holanda.
StarWarsIntro.css is a CSS Library for Recreating the Star Wars Intro Crawl.
EQCSS is a CSS extension for element queries and more.
Basscss is a lightweight collection of CSS utilities designed for speed, clarity, performance, and scalability.
Tootik is a pure CSS Tooltip library.
PostCSS.parts is a searchable catalog of PostCSS plugins.
voxel.css is a new, lightweight 3D CSS voxel library.
wysiwyg.css allows you to style your TinyMCE or Markdown generated content with a single CSS class.
Tipograf is a lightweight pure CSS typography base for your next project.
Spinners & Loading Animation Libraries
Spinners is a collection of HTML and CSS “loading icon” animations.
Pure text, CSS only, font independent, inline loading indicators.
CSS Loader is a simple loader/spinner library for web applications using only one DIV and pure CSS.
CSS Image Effects
Imagehover.css is a scaleable and lighweight image hover CSS library.
HUE.css is a collection of 49 photorealistic CSS gradients for content & image backdrops.
Diffee Checker for instant visual diffing with CSS blend modes.
CSS Image Filters
CSS Image Filters is a collection of tutorials, libraries and tools.
CSSGram is a tiny library for recreating Instagram filters with CSS filters & blend modes.
CSSCO is a collection of photographic filters made with CSS, inspired by VSCO and CSSgram.
stylelint is a mighty modern CSS linter that helps you enforce consistent conventions and avoid errors.
CSS Purge a handy tool that attempts to save the web 1kb at a time.
cssnano is a modular minifier based on the PostCSS ecosystem.
WAIT! Animate is an easy way to calculate CSS animation keyframe percentages.
MaintainableCSS is an approach to writing modular, scalable and maintainable CSS.
Brand-Colors is a Collection of 400+ Brand Colors (SCSS, Less, Sass, Stylus & CSS).
Styleguide Tools & Resources
Styleguide is a resource that makes creating living styleguides much easier.
Atomic Docs is a front-end style guide generator and SASS component manager.
Styleguide Toolbox is a collection of templates, UI kits, tools & generators.
Responsive Email & Newsletter Frameworks
Foundation for Email
MJML is a new framework for making responsive email design much easier.
Flexbox Tools & Frameworks
Flex Layout Attribute (FLA) is a CSS Flexbox layout helper.
Grd is a lightweight (only 512 bytes) CSS grid framework using Flexbox.
Flexbox Grid is a Grid System Based on the flex Display Property.
Bulma is a modern CSS framework based on Flexbox.
Flexbox Playground is a handy tool for learning and building Flexbox layouts.
Flexbox Patterns is a collection of resources for building awesome user interfaces with CSS flexbox.
CSS Web Layout Frameworks
Driveway is a pure CSS masonry layout aid.
Bricklayer is a lightweight & independent Pinterest-like cascading grid layout library.
Simple Grid is a responsive, light and simple CSS grid for your website.
BlazeCSS is an Open source, modular CSS framework for building websites quickly.
Vital CSS Framework is a minimally invasive CSS framework for modern web apps.
Aleut.css is a powerful web framework designed with scalability and performance.
Gutenberg.css is a Modern Framework for Printing Correctly.
mini.css is a minimal Sass-y responsive mobile-first style-agnostic CSS framework.
Picnic CSS is a beautiful CSS library to kickstart your projects.
Wing is a new, Minimal CSS Framework.
RichCSS Framework for beautiful, DRY, clean and reusable CSS.
Material Design Web Frameworks
Vue Material is a lightweight Material Design framework for Vue.js.
Materialize is a CSS Framework based on Material Design.