We all know CSS is great. It makes our sites look good, can be used to add animation, and keeps the presentation separate from the content. It can be hard, though, to know everything there is to know about CSS. It only gets harder as we try to make our code cross-browser compatible.
This is where third-party tools come in. From simplifying our workflows, to generating actual CSS, these tools give us the code we need, faster, even as we learn to write it ourselves.
Pure
Pure is not quite a framework. Rather, itâs a collection of CSS code that has been divided into modules for ease of use. Grab what you need, and only what you need, for your project. All components are, of course, responsive. Pure includes a grid system, buttons, tables, forms, and menus, and is built on normalize.css.
Magic Animations CSS3
A collection of CSS3 animations designed to be applied to just about anything. Swap your elements in, slide them out, twist them, fade them, and generally go wild.
Jeet Grid System
Jeet is a SASS-based grid system that works a bit like semantic.gs. Instead of adding classes to your markup, you define columns (and sometimes rows too) right in your CSS. This makes creating responsive layouts even easier, and further separates content from presentation, just like (insert your favorite deity here) intended.
10 Pure CSS Flat Mobile Devices
A man named Oleg went and re-created ten different mobile devices (including the iPhone 6, iPad Mini, Nexus 5, and Lumia 920) in pure CSS, for use in your mockups and prototypes. Thank you, Oleg.
CodyHouse
A library of unrelated, self-contained components for your website. Theyâre built with HTML, CSS, and JavaScript. Your options include various kinds of navigation, parallax effects, pagination, modal windows, page layouts, and still more. Each comes with an actual tutorial to get you set up faster.
Ratchet
If you use HTML, CSS, and JS to write mobile apps, then Ratchet might be the framework for you. Each UI component is tailor-made for mobile devices, and there are more than a few that you wonât see in traditional HTML/CSS frameworks. The defaults look good.
Animo.JS
Animo is a jQuery-based library that gives you more ways to trigger CSS animations. You can stack animations, or trigger a second animation once a first has completed, and all while taking advantage of the hardware acceleration that CSS animations provide.
Adobe Extract
Converting the layer styles from a Photoshop file to CSS can be a real pain, at times. Fortunately, Adobe went and made a tool (which works in your browser), that allows you to select a layer, and convert its properties to CSS code. You can also select any text in the PSD for use in the live site as well.
Sculpt
Yet another framework! Well, the more the merrier. This oneâs based on SASS, and unlike many others out there right now, Sculpt is designed to support legacy browsers. If you like building mobile-first sites with SASS, and want them to look decent on old versions of IE, look at Sculpt.
CSS3 Generator
A simple generator for commonly used CSS3 properties. Itâs not new, but itâs useful for when you forget the exact syntax.
Bourbon Neat
More SASS love! Bourbon Neat is a simple and semantic grid system that can be used on its own, but was designed to be used with the Bourbon mixin library.
Enjoy CSS
Enjoy CSS is another CSS3 generator, but with an interesting twist. Instead of just generating CSS3-related code, you can pick the kind of element you want to apply it to: a div, a text input, a button, and so on. Itâs a simple, visual way of getting the exact effect that you want.
Keyframer
Start creating your keyframe-based CSS animations here! Just head to the site and follow the directions.
Gumby
Gumby is a HTML/SASS framework designed more for those who like to work in a Ruby environment. You can download it separately, of course, but it also comes packaged as a Ruby gem, and was created by people who love that technology.
CSShake
More CSS animations, here, with an emphasis on shaking things up a little. (See what I did there?) But no, seriously, these guys have shaking their online money makers down to a fine art (I canât help it).
Bounce.JS
Bounnce.js combines visual tool (for designing CSS animations) with a JS library (for the implementation). Itâs pretty simple to use, for those who love to design things visually.
GridLover
Need a simple, visual way to set up your font sizes? GridLover gives you an easy way to preview your typography, set up your vertical rhythm,  and grab your CSS. Best part? You can grab the CSS with pixel values, EMs, or REMs, formatted as regular CSS, SASS, LESS, or Stylus code.
ExtractCSS
Want to set up your CSS file quickly? One way would be to write your HTML first, set up your IDs, classes, and so on. Copy and paste the HTML into Extract CSS, and the web app will list all of your selectors for you, ready to be put in your CSS file.
Kite
Kite is a CSS layout library that is designed to work like the new flexbox CSS layout module, but without actually using flexbox. Itâs compatible with IE 8+.
Pesticide
Need to figure out exactly whatâs going on with your layout? Add the Pesticide CSS file. It will add outlines to each and every element on the page, subtly changing the outline color as elements go further down in the hierarchy. Simple, but impressive.
Pleeease
Tired of having to look for different tools to preprocess your CSS, add vendor prefixes, include IE filters, and all the rest? Donât mind using the command line? This is for you. Compatible with SASS, LESS, and Stylus,
CSS Colours
A list of CSS-friendly color names. The hex and rgb values are provided as well.
CSS Vocabulary
A small app that provides a handy list of CSS-related terms. Select one, and it will show you what the term refers to by highlighting some example code.
Tridiv
Build complex 3D models with pure CSS.
Buttons
A CSS button library built with Sass & Compass.
CSS Menu Maker
CSS Menu Maker will help you to build clean, responsive website navigations.
One% CSS Grid
One% CSS Grid is a 12 column fluid CSS grid system. Itâs been designed as a base for building responsive web layouts easily, quickly and with minimum effort.
Simptip
Simptip is a simple CSS tooltip made with Sass. You can have a tooltip in different directions (top, left, bottom, right). You can also have a Tooltip in different color such as success , info , warning and danger.
Myth
Myth is a preprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval. Itâs like a CSS polyfill.
Hover CSS
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration.
CSS Animation Cheat Sheet
The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.
Spinkit
SpinKit contains some simple but awesome loading spinners animated with CSS.
Typebase.CSS
Typebase.css is a minimal, customizable typography stylesheet. It has both less and sass versions so it can easily be modified and merged into modern web projects.
SpriteBox
Make your CSS imager sprites with a simple Drag ânâ drop editor, and let it write the code for you.
CSS Ratiocinator
This is a command line tool that will clean out unused CSS code by examining what actually gets rendered. Itâs perfect for those large projects where the CSS files may have gotten out of hand.
CSS Beautifier
Make your CSS pretty! If youâve got a minified file and canât find the original (or youâre just a bit messy when you code), the beautifier can fix that with proper formatting and indentation.
CSScomb
After youâve made your CSS look readable with the CSS Beautifier, you can run it throughCSScomb to make sure all of your properties are organized in alphabetical order. Not your selectors, mind you. Just their properties, so width: always comes after font-family:, etc.
Anima
An animation library designed to expand on what you can do with CSS animations, and animate up to 100 elements at a time.
Recess
Recess is a âlinterâ program that can also be run as a compiler to make sure that your CSS conforms to a set of rules for keeping it clean. Each rule can be disabled individually to suit your coding style.
Bonus: A to Z CSS
Itâs not a tool, but it is a fantastic resource for beginners. On A to Z CSS, Guy Routledge gives solid lessons in the very basic principles of working with CSS, like the box model, and the most commonly-used CSS properties.
