This article was published 7 years ago, therefore the contents of this post may be out of date.

With all the changes and rapid advancements that CSS has gone through the past few years, we shouldn’t be so surprised at the large volume of free CSS resources and tools that been released so far in 2017.

These time saving CSS resources and tools have made our lives a bit easier, that also offer a clear learning window into CSS properties that we may haven’t adopted yet or fully understand.

In this round-up set you will see that I’ve collect over 30 CSS resources and tools that been released so far this year.


Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use.


A quirky CSS Animation Library.

Obnoxious CSS

Animations for the strong of heart, and weak of mind.


Awesome buttons for awesome projects!


A nice collection of different buttons made purely out of CSS and HTML, without any additional markup.


The Most Explosive Modal on the Web with 97.32% CSS and one tiny line of JS*

CSS Grid

CSS Grid simplifies existing layout patterns and adds new possibilities for graphic design. It’s a layout framework — without the framework.


A minimal, responsive, style-agnostic CSS framework.

CSS Grid Cheat Sheet

Your ultimate CSS grid visual guide.


A no-frills responsive grid layout to help you get started on your next project.


Smart CSS viewer tailored for designers, inspect styles in a simple, well-organised & beautiful way with their Chrome extension.


awsm.css is a simple CSS library for semantic HTML, which doesn’t require classes, ids, attributes, etc.


The lightweight, responsive and modern CSS framework

CSS Doodle

A web component for drawing patterns with css.


Kernel.css framework is a unintrusive, lightweight and semantic CSS and JavaScript framework inspired by the material design spec. It uses prefixes for all it’s classes. It’s meant to be a foundation to your projects, and not a complete product.

Brutalist Framework

An open source framework for the brutalist web design trend.

BBC Grandstand

BBC Grandstand is a collection of common CSS abstractions and utility helper classes.


A Bot that Writes CSS Classes for HTML with Deep Learning


Smart open source SASS based OOCSS framework built for scale.

Angled Edges

A Sass mixin for creating angled edges on sections by dynamically encoding SVGs.


Create better looking documents and speed up CSS development by adding vertical rhythm to your page.

Waffle Grid System

An easy to use flexbox grid system.


A dead simple, customisable, flexbox-based griddd

Flexbox Cheatsheet

Flexbox Cheat Sheet


Learn the CSS Grid!

Tent CSS

Tent CSS uses autoprefixer to make most modern features compatible with many older browser versions.

CSS Loeader

Simple loaders for your web applications using only one div and pure CSS


A collection of pure CSS grids for designing your new projects

Flawless Typography Checklist

An exhaustive typography master course that doubles as an interactive tool that will help you achieve flawless type on every design projec.


SassMagic is a collection of Sass mixins and functions to ease and improve our implementations of common style-code patterns


Some of the Best CSS Resources of 2017 So Far.