In the article below we have put together a useful collection of our favorite CSS resources, frameworks, UI kits and handy tools, all from this past year, 2013. The main idea of this is to not only illustrate and highlight what a fantastic year it has been for CSS, but to also to offer you a range of production-ready resources that will allow you to rapidly kick-start your next web project.

All of the resources have been split into the following categories: Responsive CSS Frameworks, CSS UI Kits, Web Based CSS Tools, Tools to Format & Tidy CSS, CSS Animation Tools, some indispensible CSS Reference Resources, and finally a mixed bag of resources that can’t be categorized.

For the most part all of the resources are CSS-only, but there are a few (some frameworks and UI kits) that do require a little Javascript for added functionality. Here we go…

LESS Hat 2.0

After a year, there is a new, completely rewritten 2.0 version that brings 86 great mixins, robust workflow for editing, testing and creating new mixins.

LESS Hat 2.0 →

Preboot

Preboot is a comprehensive and flexible collection of LESS utilities.

Preboot →

Pure CSS Modal

CSS Modal is built out of pure CSS and they work on all screen sizes from a small mobile phone up to high resolution screens.

CSS Modal →

Markdown.css

Markdown.css is a web based tool for making regular HTML look like plain-text Markdown.

Markdown.css →

Pure CSS Gallery

CSS Gallery →

Tools to Format, Organize and Tidy CSS Code

RECESS

Developed by the guys at Twitter, RECESS is a simple, attractive code quality tool for CSS built on top of LESS.

RECESS →

Helium CSS

Helium is a tool for finding unused CSS across many pages on a web site. Helium takes a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list and checks if the selectors found in the stylesheets are used on the pages. It will then generate a report with details of each stylesheet and the selectors that were not found to be used on any of the given pages.

Helium CSS →

Diagnosticss

Diagnostic CSS stylesheet that helps visually detect any potentially invalid, inaccessible or erroneous HTML markup.

Diagnosticss →

CSSO

As well as being a CSS minimizer, CSSO also can perform structural optimization of CSS files, resulting in a much smaller file size compared to other minifiers. It will merge blocks with identical selectors and properties, remove overridden properties, remove duplicate selectors, partially merge blocks, remove empty rulesets and will also minimize margin and padding properties

CSSO →

CSS Trashman

CSS Trashman will automatically refactor your CSS and generate a new stylesheet for your site. It works by examining your site's live DOM in the browser and reverse engineering a new, more elegant definition that captures styles down to the pixel.

CSS Trashman →

CSS Animation Tools & Resources

Animate.css

Animate.css is a collection of cross-browser CSS animations that you can use in your sliders, home pages, and other web projects.

Animate.css →

animo.js

animo.js is a powerful tool for managing CSS animations.

animo.js →

Anima

The lightweight (only 5k when gzipped) Anima lets you animate multiple objects at the same time, and each item can have it’s mass and viscosity to emulate real-life objects. It uses CSS transforms and 3d-transforms together with Javascript to create the animation.

Anima →

Effeckt.css

Effeckt.css →

Responsive CSS Frameworks

Siiiimple

Siiiimple is a ‘A super, super, super, super, simple css grid.’

Siiiimple →

Girder

Built with Sass, Girder is a minimalistic grid toolkit that builds flexible layouts divided into logical sections.

Girder →

Emerald

Emerald is a responsive grid system written in LESS.

Emerald →

Ratchet

Ratchet lets you prototype mobile apps using simple HTML, CSS and JavaScript components.

Ratchet →

Clank

Clank is an open source prototyping framework that helps you work with mobile apps.

Clank →

Ink

Ink is new framework from the guys at ZURB that allows you to quickly create responsive HTML emails that work on any device and client.

Ink →

Responsable Framework

Responsable is a clean responsive grid system with a typographic baseline powered by LESS/SCSS and based on Semantic.gs.

Responsable Framework →

Mueller Grid System

MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass.

Mueller Grid System →

PocketGrid

PocketGrid is a lightweight pure CSS resposnive grid system allowing for an unlimited number of columns and breakpoints.

PocketGrid →

Kraken

Kraken is a lightweight, mobile-first boilerplate that includes just the essentials: A CSS reset to ensure cross-browser compatibility; A responsive, mobile-first grid; A well-designed, fluid typographic scale; CSS3 buttons; Basic form styling; Optional add-ons for more functionality.

Kraken →

GroundworkCSS

GroundworkCSS is a fully responsive HTML5, CSS and Javascript toolkit to rapidly prototype and build accessible web apps that work on virtually any device.

GroundworkCSS →

Typeplate

Typeplate is a typographic starter kit that doesn't make aesthetic design choices, but defines proper markup with extensible styling for common typographic patterns.

Typeplate →

Cardinal

Cardinal is a small mobile first CSS framework with its focus primarily on responsive web applications. The purpose of Cardinal is to 'make it easier to rapidly prototype, build, scale, and maintain CSS' for responsive web apps. It does omits many aesthetic design decisions that will often drag down larger, more complicated CSS frameworks, leaving the design to you.

Cardinal →

Gridism

Gridism is a simple CSS grid that comes with in-built patterns for responsive design.

Gridism →

Furatto

The flat styled Furatto is a front-end framework for rapid web development based on other frameworks, such as Twitter Bootstrap, Foundation…, as a start point.

Furatto →

Cascade

Cascade Framework operates by splitting your CSS into seperate files based on features rather than selectors and by implementing a modifier design pattern inspired by SMACCS and OOCSS.

Cascade →

Foundation 5.0 (Update)

Foundation 5.0 →

Bootstrap 3.0 (Update)

Bootstrap 3.0 →

CSS UI Kits

PixelKit Bootstrap UI Kit

A free flat UI kit built on Bootstrap for any developer that wants to build a cool looking and functional website.

PixelKit Bootstrap UI Kit →

Pure

Pure, from Yahoo!, is a collection of small and responsive CSS modules that you can make use of in your projects. The entire set of modules is only 4.4KB (minified and gzipped).

Pure →

Almost Flat UI

Almost Flat UI is a UI kit based on the Foundation Framework. It features various elements that you can employ in your next “flat” design project.

Almost Flat UI →

UIkit

UIkit is a light-weight and modular frontend framework that lets you develop fast and powerful web interfaces. It includes over 30 modular and extendible components.

UIkit →

Brick

Brought to you by Mozilla, Brick is a collection of re-usable UI web components for quickly and flexibly building mobile HTML5 apps.

Brick →

Bootflat

Bootflat is an open source flat UI kit based on Twitter Bootstrap that lets you create web apps rapidly and easily.

Bootflat →

Web Based CSS Tools

Animatron

Animatron is a simple and powerful online tool that allows you to create stunning HTML5 animations and interactive content.

Animatron →

Create CSS3 – Easy CSS3 Generator

Create CSS3 →

Tridiv

Tridiv is a web-based editor that lets you create 3D shapes in CSS. It is cross-browser compatible, and you can also browse several online examples before you actually start using the editor.

Tridiv →

Daturi – Convert Images to Base64

Daturi →

CuttySSark

CuttySSark is lightweight polyfill adding support for JS event triggering and matching in stylesheets using standard CSS2 selectors.

CuttySSark →

piCSSel-art

piCSSel-art is a drawing app to draw pixel art and get it in CSS.

piCSSel-art →

Prepros

Prepros is a web based app that will compile Less, Sass, Scss, Compass, Coffeescript, Stylus, Jade, Slim, Markdown and Haml files with live browser refresh.

Prepros →

CSS Reference Resources

Browserhacks

Browserhacks is an extensive list of browser specific CSS and JavaScript hacks.

Browserhacks →

Solved By Flexbox

Solved By Flexbox →

CSS3 Animation Cheat Sheet

The CSS3 Animation Cheat Sheet is a set of pre-made CSS3 animations that you can use in your web projects by adding the stylesheet to your site and applying the pre-made CSS3 classes to the necessary elements.

CSS3 Animation Cheat Sheet →

Screen Sizes

Screen Sizes helps you quickly find the screen specifications of the most popular devices and monitors currently on the market.

Screen Sizes →