CSS

40 tools for writing better CSS

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 through CSScomb 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.

Justas Markus is the co-founder & chief operating officer of Refe. He's a traveler, blogger, athlete and entrepreneur. Catch up with Justas on Twitter More articles by Justas Markus
  • CSS tools are extremely significant for applying the effects for any websites. The Website is nothing with out CSS. Great share. The resource for the beginners is also very useful.

  • This is a great resource, thanks for putting it together. Currently using sass with compass and will soon be using libsass and bourbon.

  • This is a great resource This is one of the best CSS articles I’ve read in a while. Thanks for this!

  • pritom borogoria

    Thanks Mr. Justas Markus for such an article….

  • did a great jobs justas it would be really efficient for others to know about it

  • Thanks for sharing CSS tools. Working in website designing and development company I always search for new tools to make my work easier. I will definitely go through it. Keep sharing your blog to get further information.

  • Time saving post thanks for sharing …

Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress