21 Essential CSS Tools for Web Designers

Filed September 30th, 2010 under CSS and Resources

Most, if not all, of my projects begin in a simple text editor. And that’s not likely to change any time soon – unless someone develops a serious web design application. That said, a lot of my tasks rely upon the rather monotonaous referencing of W3C specifications, and laborious testing.

Thankfully, the design community has produced some fantastic CSS tools to make our jobs easier. From on-the-fly typography comparison, to entire layout frameworks, there’s a tool for just about everything you can imagine with CSS. In this post, I cover some of the most essential: from golden oldies, to the latest and greatest.

Typography

Typechart

Courtesy of Panduka Senaka, Typechart is my favourite amongst a host of typography apps. Although it’s limited to web safe fonts, it’s a great tool for rapidly comparing font styles.

Typetester

Typetester is functionally the same as Typechart. With it, you can quickly compare different font styles amongst the web safe fonts – and then grab the raw CSS of whatever you’ve tested.

typeface.js

Of the many font embedding solutions, typeface.js is one of the easiest – especially if being cross-platform is absolutely necessary. Of course, Typekit is definitely easy, and cheap – but it relies upon @font-face. For older browsers (say pre-Safari 2.1 and pre-Firefox 3.5), it’s just not an option. So if you absolutely need real fonts, but also want to make sure your project is broadly cross-compatible with older browsers, typeface.js is worth a shot.

CSS Typeset

The last of the typography tools on the list, CSS Typeset is the minimalist counterpart to the two font style editors mentioned above. In fact, the thumbnail below is a screen capture of the entire site. Enter example text on the left, play with the controls on the bottom, and the raw CSS appears on the right. Just about as easy as it can be.

Frameworks

960s.gs

If you haven’t worked with a CSS grid framework before, 960.gs is the place to start. With such widespread acclaim, there’s not much else to say about 960.gs. It’s used by 5by5 Media, Twitter, WooThemes, and a host of freelancers, design agencies, and web professionals. And the grid overlay bookmark is seriously cool.

Blueprint

If I had to give a rough estimate of usage of these frameworks, Blueprint would come a close second to 960.gs. Again, it’s a platform that’s been widely praised for its intuitive modularity, strong documentation, and broad community support (it even has plugins for things like sprites).

YUI CSS Grids

Like every part of the YUI framework, Yahoo’s CSS Grids module is beautifully polished, with excellent documentation. Its CDN hosted stylesheet offers a fast, responsive, and cache-friendly grid framework.

css-boilerplate

Although it’s a bit old (it was released in 2007 – which, as we all know, is the equivalent of 20 internet years ago), it’s still a great resource. css-boilerplate basically gives you a blank slate for your web development projects. Its default settings include a reset stylesheet, IE specific styles, forms styles, and typography. Here’s a teaser snippet from the form styles:

form.hform p { margin: 0 0 .5em; }
form.hform p label { float: left; width: 100px; }

form.hform p input { width: 200px; }
form.hform p select { width: 200px; }

form.hform p input.button { width: auto; }
form.hform p input.checkbox { width: auto; }
form.hform p input.radio { width: auto; }

form.hform p.checkbox { margin-left: 100px; }
form.hform p.checkbox label { float: none; }
form.hform p.checkbox input { width: auto; }

52Framework

52Framework bills itself as the first ever HTML5 & CSS3 framework. It’s basically a mux of boilerplate meets grid system. There’s an HTML5-ready starting document, along with pre-coded CSS using a few of CSS3′s awesome features including the ::selection selector, rounded corners, text-shadows, and more. I’m not sure how much traction this will get within the community – particularly given the strength of HTML5 Boilerplate – but this is a CSS tools list, so we’ll save that discussion for later.

Variable Grid System

Inspired by 960.gs, the Variable Grid System is an easy-to-use tool that allows to create, well, varying grid systems. You input column width, number of columns, and the gutter width – and VGS outputs ready-to-go CSS. It’s really an incredibly useful tool.

Elastic CSS

Elastic CSS is a semantically-sensitive CSS framework. Classes are named intelligently and intuitively, and it provides a nice blend between some of the more full-blown boilerplates, and the more low-key grid systems.

BlueTrip

Like Elastic CSS, BlueTrip focuses on common sense naming conventions, ease of use, and, well, just plain getting out of your way. This demo page shows off all of its bells and whistles.

Formatting

ProCSSor

This simply beautiful app turns your ugly stylesheets, into poetic pieces of art. It’s simple, intuitive, and works really, really well. First, you paste in some CSS (or upload a file/paste a link to a stylesheet), then you set some optional parameters, and ProCSSor spits out your work in perfectly formatted code. It’s awesome.

Code Beautifier

Code Beautifier does essentially the same thing as ProCSSor. Input a stylesheet, define some parameters, and out pops some gorgeous looking code.

CSS Compressor from CSS Drive

After aesthetics, the other quintessential CSS formatting problem is a very simple one: size. With a large enough deployment (or sloppy enough coding), every extra kb can start to feel sluggish. With so many CSS compressors out there – all with essentially the same feature set – I feel like I can only justifiably include two. CSS Compresspor from CSS Drive is the first. With three levels of compression, CSS Drive’s tool can do everything from a casual tidy-ing up to full fledged illegibility.

CSS Compressor from Sevenforty

With perhaps the shortest instructions of any tool on this list, CSS Compressor for Sevenforty is lightweight and fast – just like the stylesheets it gives you: “Simply browse your system for the CSS file you wish to shrink down, select your line break option and hit Compress.”

Miscellaneous

0to255

0to255 is a new take on an old problem: sorting through hex values for the perfect colour. With a downright beautiful design, it’s hard not to love it.

LESS

A cousin to the venerable SASS, LESS is a Ruby-based CSS compiler. Basically, you write your stylesheets like normal – but you can do things like use variables, mixins, and nested rules (like any scripting language). LESS takes this quasi-stylesheet, and compiles it into ready-to-go CSS. It’s an amazing time saver for large scale development.

Modernizr

Ok, so Modernizr isn’t strictly a CSS tool. But it enables you to detect CSS3 support when a user visits your site. It doesn’t add any functionality, but it allows you to selectively control certain features – so that everything works as intended.

ecsstender

Unlike Modernizr, ecsstender actually does add functionality to older browsers. You choose from a number of extensions (including CSS3 transform, transition, font-face, etc), and then ecsstender determines whether or not the user’s browser supports a given function. If it doesn’t, it outputs browser-specific functionality pertaining to that function using JavaScript.

Did we forget something?

Did we forget to mention your favorite tool? The one that you absolutely, positively cannot live without? Let us know in the comments!

Joshua Kelly
Director of Human/Machine Synthesis

5 Comments

5 Responses

§ Stevenmc wrote on October, 18th:

When developing CSS styles, I personally start all my scripts with:

This allows me to set PHP variables for all attributes, colours, font sizes, etc. It also compresses the script before transmission if using a compatible browser. This allows for many significant efficiencies.

§ Stevenmc wrote on October, 18th:

Code above was cut out, here it is again:

if(!ob_start(“ob_gzhandler”)) ob_start();
header(‘Content-type: text/css’);