50 CSS Tools & Resources from 2013

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

LESS Hat 2.0 - A Kick-Ass LESS Mixin Library top 50 css tools resources 2013

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 top 50 css tools resources 2013

Preboot is a comprehensive and flexible collection of LESS utilities.

Preboot →

Pure CSS Modal

CSS Modal top 50 css tools resources 2013

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 top 50 css tools resources 2013

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

Markdown.css →

Pure CSS Gallery

CSS Gallery top 50 css tools resources 2013

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

Diagnosticss top 50 css tools resources 2013

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 top 50 css tools resources 2013

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 CSS CSS3 animation transition resources tools top 50 css tools resources 2013

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

Anima CSS CSS3 animation transition resources tools top 50 css tools resources 2013

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

animo.js →

Anima

Anima CSS CSS3 animation transition resources tools top 50 css tools resources 2013

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 - Performant CSS Transitions & Animations top 50 css tools resources 2013

Effeckt.css →

Responsive CSS Frameworks

Siiiimple

Siiiimple top 50 css tools resources 2013

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

Siiiimple →

Girder

Girder CSS framework grid responsive UI kit top 50 css tools resources 2013

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

Girder →

Emerald

Emerald - A Responsive Grid System Written in LESS top 50 css tools resources 2013

Emerald is a responsive grid system written in LESS.

Emerald →

Ratchet

Ratchet CSS framework grid responsive UI kit top 50 css tools resources 2013

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

Ratchet →

Clank

Clank CSS framework grid responsive UI kit top 50 css tools resources 2013

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

Clank →

Ink

Ink - A Responsive Email Framework top 50 css tools resources 2013

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 Framework top 50 css tools resources 2013

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 Grid System top 50 css tools resources 2013

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

Mueller Grid System →

PocketGrid

PocketGrid top 50 css tools resources 2013

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

PocketGrid →

Kraken

Kraken top 50 css tools resources 2013

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 top 50 css tools resources 2013

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 top 50 css tools resources 2013

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 CSS framework grid responsive UI kit top 50 css tools resources 2013

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 CSS framework grid responsive UI kit top 50 css tools resources 2013

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

Gridism →

Furatto

Furatto CSS framework grid responsive UI kit top 50 css tools resources 2013

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 CSS framework grid responsive UI kit top 50 css tools resources 2013

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 top 50 css tools resources 2013

Foundation 5.0 →

Bootstrap 3.0 (Update)

Bootstrap 2.0 top 50 css tools resources 2013

Bootstrap 3.0 →

CSS UI Kits

PixelKit Bootstrap UI Kit

PixelKit Bootstrap UI Kit top 50 css tools resources 2013

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 CSS responsive UI kit top 50 css tools resources 2013

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 CSS responsive UI kit top 50 css tools resources 2013

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 CSS responsive UI kit top 50 css tools resources 2013

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

Brick CSS responsive UI kit top 50 css tools resources 2013

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 CSS responsive UI kit top 50 css tools resources 2013

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

news design Create CSS3 - Easy CSS3 Generator top 50 css tools resources 2013

Create CSS3 →

Tridiv

Tridiv CSS CSS3 animation transition resources tools top 50 css tools resources 2013

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 - Convert Images to Base64 top 50 css tools resources 2013

Daturi →

CuttySSark

CuttySSark top 50 css tools resources 2013

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

CuttySSark →

piCSSel-art

piCSSel-art top 50 css tools resources 2013

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

piCSSel-art →

Prepros

Prepros top 50 css tools resources 2013

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 top 50 css tools resources 2013

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

Browserhacks →

Solved By Flexbox

Solved By Flexbox - Cleaner, hack-free CSS top 50 css tools resources 2013

Solved By Flexbox →

CSS3 Animation Cheat Sheet

Cheat Sheet CSS CSS3 animation transition resources tools top 50 css tools resources 2013

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 top 50 css tools resources 2013

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

Screen Sizes →

Author: (929 Posts)

This post has been written by the team here at Speckyboy Design Magazine.

Comments