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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Sam DeeringSam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.
