Free CSS Resources

A list of free CSS resources, to use in your projects! All of the resources are in alphabetical order to help you sort through them.

Contents

• Animations
• Compilers
• Forms
• Frameworks
• Generators
• Loaders
• Preprocessors
• Resets
• Utilities

Animations

• Animate.css - Easily animate elements, with classes.
• Animista - CSS Animations on demand!
• CSS Animate - Create animation keyframes online
• CSS Shake - Add a class to an element, and watch it shake!
• Hover.css - Some neat hover effects, add a class and you're done.
• Magic Animations - Animate elements with Classes or through JS.
• Stylie - Online keyframe generator for the advanced user

Compilers

• CodeKit - GUI Compiler for OSX, has built in Bower support
• Koala - Visual LESS/SASS Compiler (Mac OSX, Windows, Linux)
• PrePros - Visual Compiler for LESS, SASS and more (Mac OSX, Windows, Linux)
• WinLESS - GUI LESS Compiler for Windows (Windows Only)

Forms

• EnjoyCSS Form Generator - Simple CSS form generation.
• Formalize - Cross browser, uniFORMity ;)
• GridForms - Framework for responsive grid based forms.

Frameworks

• Base - Responsive CSS framework.
• Bootstrap - Responsive framework, made my @mdo of Twitter.
• PureCSS.io - Minimal framework, small file sizes.
• Semantic UI - Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
• Skeleton - Really basic, responsive boilerplate.
• TACHYONS - Quickly build and design new UI without writing css.
• Tailwind CSS - A utility driven front end framework, built on JS.
• UIKit - Modern and easy to use framework, with loads of modules!
• Zurb - Frameworks for Web, Mobile, Apps & email.

Generators

• Arrow Please! - Easily generate CSS Arrows.
• CSSMatic Ultimate Generator - Generate loads of CSS3 effects.
• CSS3 Generator - Generate effects purely in CSS3, with fallbacks.
• CSS3 Gradient Generator - Generate easy to use gradients, with fallbacks.
• LayerStyles - Generate CSS3 Effects using a layer style box like Photoshop.
• Triangle Generator - Generate triangles in CSS.

Loaders

• CSS Loaders - Some pretty CSS3 loaders, very easy to use
• Loaders.css - Massive selection of clean, modern loaders
• SpinKit - Spinning loaders for your projects :)
• CSSLoad - Easy to use and customise loaders.

Preprocessors

• LESS - Learner CSS, to speed up your CSS, and make it more efficient
• PostCSS - Transforming CSS with JS
• SASS - Very modern, full of features, to speed your coding up!
• Stylus - Loads of functions, and you can omit braces, colons and semi-colons.

Resets

• Eric Meyer Reset - Simple CSS Reset, most popular one out there!
• HTML5 Doctor - Very nice reset, takes a different approach to Eric Meyer, but works a charm.
• Normalize - Well, it's normalize - standard for Bootstrap!
• YUI Reset - Yahoo! UI Reset

Utilities

• Gulp - Workflow Automation.
• Bower - Package Manager for the Web.
• Grunt - A Javascript Task Runner.
• Yarn - Dependency Management

I'll try to keep this updated as time goes on, however with work commitments, it may be a long time before the next update!