10 Cool Tools for Easier CSS Development from 2011

Sam Deering

In this post we have compiled 10 Cool Tools for Easier CSS Development from 2011. These tools have greatly improved the work-flow, took care of many of those tedious repetitive tasks that every project required, or by simply offering solutions to many of those tasks that were time consuming (like sprites) and at times challenging (CSS3 animations). Enjoy!

Related Posts:

1. Animatable

Is an easy way to create CSS3 animations for WebKit browsers on any platform or device – including Android, BlackBerry, iOS and WebOS. It lets you create multi-scene CSS3 animations without knowing much about CSS or animation. Useful for not only designers and developers but animators as well.


Animatable

Source + Demo

2. CSS3 Buttonize Framework

Is a lightweight, flexible instant-button framework. Simply choose one of the button style examples, then download the CSS code form the provided link, add the code it gives you to where it tells you to put it, and you’re set for having your website use that button style.


CSS3 Buttonize Framework

Source + Demo

3. Patternify

Is a simple CSS pattern generator. Its graphical web-based interface lets you draw the pattern you want, and then it generates the CSS code for you. Instead of having to launch your graphics editor and creating a 2px by 2px image, you can just build your pattern online using this.


Patternify

Source + Demo

4. CSS3 Patterns Gallery

Is exactly what it sounds like: a gallery of CSS3 patterns. You get a preview of each pattern in the gallery, and if you like it, just click on it and the code for it will pop up, as well as a full-screen preview of what the pattern will look like.


CSS3 Patterns Gallery

Source + Demo

5. Columnal

Is a CSS grid system that’s a remix of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) is taken from 960.gs.


Columnal

Source + Demo

6. Spritemapper

Is an app that merges multiple images into one and generates CSS positioning for the corresponding slices. It improves loading times, gives you code in CSS so that you don’t have to write any extra syntax, is self-contained and doesn’t have any 3rd-party dependencies, and minimizes space used with its image packer by implementing simulated annealing.


Spritemapper

Source + Demo

7. The Web Font Combinator

Lets you preview web font combinations. It shows you font examples that you can combine in order to see how a header and body font work together – but does it on the web and uses current web font technologies.


The Web Font Combinator

Source + Demo

8. Layer Styles

Is a web browser-based graphics editor, but instead of creating graphics, it creates CSS. If you’ve ever used Photoshop or similar graphics editor (like, 99% of you readers), then you’ll know how to use Layer Styles’ interface. Nice for those who prefer GUIs for creating visuals, except in this case you’re creating CSS code instead of an image.


Layer Styles

Source + Demo

9. Sencha Animator

Is a desktop app that lets you create CSS3 animations for WebKit browsers and touchscreen mobile devices. Create rich experiences for today’s most popular devices.


Sencha Animator

Source + Demo

10. Holmes

Is a stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML and HTML5 markup by adding one class. The holmes.css file will display either an error (red outline), a warning (yellow outline), or a deprecated style (dark grey outline) for flags such as missing required attributes on tags, potentially improvable markup, deprecated and non-W3C elements and attributes, and others.


Holmes

Source + Demo

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.