8 CSS tools for better web design

It’s a bit odd to execute by hand some repetitive CSS tasks, and also really not productive. I have collected for you a set of eight tools that will help you to build better websites faster.

1. CSScomb

Website

Sort your CSS properties automatically with this tool. It can be used with many of the most popular text editors, such as Coda or Notepad++, but also has an online version.

2. Normalize.css

Website

A HTML5-ready alternative to CSS resets. It preserves some useful browser default settings, normalizes styles for a wide range of HTML elements, corrects some common browser inconsistencies, and is well commented for easier use.

3. SpritePad

Website

SpritePad gives you an online drag-and-drop interface to easily create CSS sprites. Drag-and-drop your images into the grid, then get it immediately as PNG + CSS code.

4. CSS Hat

Website

Turn Photoshop layer styles into CSS3 with a single click. Dramatically increase your productivity for only $19.99.

5. CSS-Only Pinterest Style Columns Layout

Website

A technique that is interesting, but may not be used for production as it relies on CSS3 columns (not supported be Internet Explorer). I thought it was still worth sharing as it’s probably the way we’ll create this type of layouts in the future.

6. WebPutty

Website

Formerly a hosted online service, WebPutty is now open-source and can be run on Google App Engine. It is a service that let’s you edit CSS online while previewing what you are doing, with the possibility to publish in one-click.

7. Bootstrap

Website

Much more than a simple CSS tool, Bootstrap is a feature-rich front-end framework published by Twitter. This tool is not new, but Twitter released the latest version very recently.

8. Responsive grid system

Website

Building responsive designs is very frequent nowadays, just as working with the grid is. This responsive grid system helps you do both and let’s do it easily, without doing complicated math to calculate your grid.