35 CSS-Lifesavers For Efficient Web Design

Advertisement

CSS-design is not easy. We need to find workaround across browser inconsistencies, not that easy CSS-concepts and quite counterintuitive CSS-solutions. However, there are effective and useful CSS-tools and Smashing Magazine reviewed many1 of2 them3 in our previous posts. Now it’s time to present you with some fresh (or not mentioned earlier) tools that can assist designers in their work.

Today, we will look at 35 new and useful CSS tools, generators and resources that can significantly improve your workflow and reduce your time efforts for CSS-coding. Whether you’re writing, compiling, refining or experimenting with CSS code – or all of the above – these tools can help you get the job done faster and better than ever before.

You may want to take a look at the following related articles:

Extend CSS with advanced selectors, variables etc.

Less CSS7
Say goodbye to bloated CSS code with LESS. LESS uses existing CSS syntax to extend the capabilites of CSS while compiling lean code.

Less CSS Tool8

Sizzle9
A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library. Includes CSS 3 Selector support, escaped selector support #id:value, :contains(text), :not :not(a#id), :not :not(div,p), not attribute value [name!=value], position selectors :first, :last, :even, :odd, :gt, :lt, :eq, easy Form selectors :input, :text, :checkbox, :file, :password, :submit, :image, :reset, :button and more.

Screenshot10

Haml11
When it comes to templating languages for Ruby, Haml is our pick of the litter. Haml was built on the primary principle that markup should be beautiful. Its creators say you should give yourself 20 minutes to sit down and concentrate and you can learn Haml. After learning Haml, your templates will be fast, beautiful and ready to use on any busy website.

Haml CSS Tool12

Object Oriented CSS13
We demand high performance from CSS in the process of beautiful design work. The problem with these demands has always been that the CSS code can become large and clumsy along the way. Object Oriented CSS creates clean code for even the largest websites and is simple enough for even beginners to use.

Object Oriented CSS Tool14

DtCSS: Variables in CSS15
DtCSS is a PHP script that preprocesses your CSS file. It speeds up CSS coding by extending the features of CSS, such as nested selectors, color mixing and more. DtCSS reads the CSS file with special syntax written for DtCSS, and outputs the standard CSS. It also comes with a smart caching system.

CSScaffold16
Everyone has heard the arguments before – the pro’s and con’s of CSS frameworks like Blueprint. They’re not semantic and they’re inflexible. Everyone knows it, but it’s a start. CSScaffold merges the productivity increase of CSS frameworks, with the dynamic capabilities of Cacheer.

CSS-Tools For HTML-Newsletters

Inline Styler17
The Inline Styler converts CSS rules into inline style attributes with the click of a mouse. Choose between entering a url or pasting source url into the box and click convert. It’s all done for you.

Inline Styler18

Emogrifier19
Emogrifier automagically transmogrifies your HTML by parsing your CSS and inserting your CSS definitions into tags within your HTML based on your CSS selectors. You can either use the form below to paste your HTML or CSS, or if you’re more technically inclined, you can download the PHP source code and use it in your own applications. Great for making e-mail newsletters.

Typographic CSS tools

Better Web Readability Project20
The main purpose of this project is to contribute to a better reading experience on-screen by using a CSS typography library.

Better Web21

Readability22
Readability is a simple tool that makes reading on the Web more enjoyable by removing the clutter around the text. Just drag the bookmarklet to your bookmark toolbar to enjoy easier reading on the Web.

Readability23

Texster24
Texster is a CSS code generator that allows you to preview 19 fonts as you adjust size, color, line height, character spacing, word spacing and indent properties – so there are no surprises.

Texster25

Syncotype Baseline Overlay Bookmarklet26
Either install the Safari/Firefox bookmarklet or add one script tag to your page, and the Syncotype box appears in the upper right. Enter your line height and offset from the top of the page in pixels and Syncotype overlays your baseline in red.

Better Web27

CSS Font Matching28
A list of font comparisons for web development and CSS that compares all three major systems: Linux, MacOS X and Windows.

CSS Font and Text Style Wizard29
This tool allows you to easily apply CSS styling to text and generates HTML and CSS source code for you to copy and paste.

Grids with CSS: generators and useful tools

1Kb Grid30
A simple tool that generates lightweight CSS-grid and lets you download it. Very useful.

Haml CSS Tool31

Fluid 960 Grid System32
A set of comprehensive templates for rapid interactive prototyping, based upon the 960 Grid System, covering main design elements such as forms, typography, graphics and various dynamic components.

Haml CSS Tool33

Grid System Generator34
The grid system generator will create fixed grid systems in valid CSS/XHTML for rapid prototyping, development and production environments. In addition to the css framework, it creates a background file (sample) that you can use in Fireworks, Illustrator, OmniGraffle, Photoshop, Visio (etc.) to aid in prototyping and design.

Haml CSS Tool35

BluePrint CSS Architect36
This tool will generate the CSS required to layout an XHTML template. It uses Blueprint CSS at the core, but it does not implement the Blueprint grids through classes. Rather, it generates the same CSS for the IDs you have already defined in your template.

BOKS37
BOKS is a visual grid editor that was designed for designers who believe the grid system is good, but haven’t had time to fall in love with it yet. Since it is an AIR application, it works on Windows, Mac and Linux and provides a user interface for Blueprint CSS’s framework.

BOKS Visual Grid Editor38

CSS Grid Calculator39
Use the CSS Grid Calculator to quickly visualize page layout and draw grids in a variety of ways. It provides accurate visual feedback on how text blocks and page divisions will appear in browsers and returns style declarations for divisions and code to copy and paste into your CSS.

CSS Grid Calculator40

CSS Frameworks

BlueTrip CSS Framework41
A full featured and beautiful CSS (Cascading Style Sheets) framework which combined the best of Blueprint, Tripoli (hence the name), Hartija’s print stylesheet, 960.gs’s simplicity, and Elements’ icons, and has now found a life of its own. Including a 24-column grid, sensible typography styles, clean form styles, a print stylesheet, an empty starter stylesheet, sexy buttons and status message styles.

Screenshot42

Compass43
This CSS Meta-Framework provides ports of the best of breed CSS frameworks (blueprint, yui, 960) to Sass.

Compass CSS Tool44

HTML/CSS/JS-Kickstart 0.945
A lightweight library of files and folders for getting started on projects really quickly – a kick-start for static web development.

HTML/CSS/JS Kickstart46

iPhone-universal47
IPhone-universal is a CSS framework for iPhone Web application developers. This tool makes it simple to create an app using different iPhone interfaces.

Useful CSS development tools

Mappet48
A visual generator of maps using CSS. Very handy.

Vanilla CSS Un-reset49
Vanilla is a CSS “un-reset” that works in tandem with CSS resets such as the Yahoo CSS Reset. Vanilla is meant to be dropped into your stylesheet, tweaked and handled to your liking. It’s meant to be some kind of a baseline stylesheet, so that you don’t have to start over every time.

Screenshot50

CSSEd51
A small developer editor and validator, a GTK2 application to help create and maintain CSS style sheets for web development.

Screenshot52

HTML test page for CSS53
The Snipplr html test page for CSS style guide is a good place to test and analyze CSS code. Snipplr is also a public source code repository to store and organize snippets of code to be shared with other designers and developers.

Snipplr CSS Tool54

CSS Styling Code Convention Convention55
NodeWave provides a complete downloadable CSS Coding Style Convention with guidelines to improve development productivity.

CSS Styling Code Convention Convention56

CSS Http Request57
Cross-domain AJAX using CSS. Like JavaScript includes, this works because CSS is not subject to the same-origin policy that affects XMLHttpRequest. CSSHttpRequest functions similarly to JSONP, and is limited to making GET requests.

Useful Browser Extensions For CSS-Coding

CodeBurner58
CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. The extension’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties.

codeburner59

CSS Usage 0.0.560
This is a Firebug extension that allows you so scan multiple pages of a site to see which CSS rules are actually used.

CSS Usage 61

PixelPerfect Firefox Plugin62
This Firefox plugin generates an overlay over a web composition over top of the developed HTML.

Firebug Lite63
Designers who use FireFox may have used the Firebug extension for some time now, but not everyone uses Firefox. Firebug Lite brings the goodness of Firebug to Internet Explorer, Opera and Safari. Firebug Lite is a JavaScript file that can be inserted into Web pages to simulate Firebug features in browsers other than Firefox.

Firebug Lite64

ReCSS65
This handy bookmarklet makes refreshing your CSS simple. It comes into play when you’re developing dynamic applications. Tested in IE and Firefox and also now has an update with Safari support.

ReCSS66

Dust-Me Selectors 2.1167
Time for some CSS housekeeping? Dust-Me Selectors is a FireFox plugin that finds unused CSS selectors to help you keep your code clean.

Dust-Me Selectors68

Useful CSS tools: online and offline

Markdown69
Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML). Requires Perl 5.6.0 or later.

Visual QuickMenu70
Make custom menus on the fly with Visual QuickMenu. Choose a template, click the customize button and instantly create. Visual QuickMenu produces cross browser / cross code menus, capable of running on 100 percent Pure CSS alone, or JavaScript if it’s present in the browser.

Open Cube71

CSS Redundancy Checker72
CSS Redundancy Checker is another tool to help keep your code tidy. Use this tool to find CSS selectors that aren’t used by any of your HTML files and may be redundant.

CSS Redundancy Checker73

CSS Tools Coda Plugin74
CSS Tools brings the power to reformat your CSS to Coda. With this tool you are able to convert a style sheet from a single line to multi-line and vise-versa and compress your CSS code if you’d like.

CSS Tools75

CSS Fly76
CSSFly is a developer’s tool for easy site-editing, direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files – what you code is what you get!

CSS Fly77

Silk Sprite78
Silk Sprite is a Blueprint CSS plugin providing the Popular Silk Icon Package in CSS Sprite form to improve peformance and ease of use.

Silksprite CSS Plugin79

htmlwrapper80
Wrapper is a cross-browser compliant HTML/CSS rendering engine written in ActionScript that sits on top of your standards compliant HTML page. Wrapper eliminates cross-browser issues and makes integrating ActionScript and HTML/CSS projects possible without needing to compile.

htmlwrapper81

CSS Cheat Sheet Wallpaper82
Rather than opening and closing a CSS cheat-sheet, you can now simply use this attractive wallpaper.

CSS Cheat Sheet83

Styleneat84
With Styleneat you can input CSS code, upload a file or specify the url of the stylesheet you wish to organize. There are options to arrange properties or sorters alphabetically, import and organize linked stylesheets and to have the output in single or multi-line formatting.

Styleneat85

SmartSprites86
SmartSprites is a CSS sprite generator that allows you to easily introduce and maintain CSS sprites in your designs. SmartSprites parses special directives you can insert into your original CSS to mark individual images to be turned into sprites. It then builds sprite images from the collected images and automatically inserts the required CSS properties into your style sheet, so that the sprites are used instead of the individual images.

Typo3 CSS/JS Merger87
This extension speeds up your website by merging your css and js files to minimize requests.

The Box Office88
The Box Office lets you wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages. Using today’s techniques (PHP/CSS/XHTML) it automates the task of wrapping the text; allowing you, the webdeveloper, to kick back and relax a little.

The Box Office89

IE6 CSS Fixer: starter kit90
This is a tool specifically designed to ease the pain of the ie6 css debugger. It is not a one-click-fix-all tool and no final version exists yet. It gives designers a head-start by correcting roughly 40-60 percent of IE6 issues with a click and outputing rough code that can be refined.

IE6 CSS Fixer91

Wufoo CSS/XHTML Form Templates92
A collection of customizable CSS/XHTML-templates for web forms that can be downloaded and used for free.

htmlwrapper93

JSON CSS94
CSS is great at the basics, but there is a lot of opportunity for improvement by adding a few simple programmatic concepts like variables, inheritance, syntactical cascading, and browser detection. That’s what makes JSON CSS better. Alternative implementation95.

JASON CSS96

↑ Back to topShare on Twitter

Gerri Elder is a content producer and social media strategist who has worked full-time on Internet development and marketing since 1997. Her current projects include ChicagoNow, GreenBiz and ProspectMX. Gerri can be reached on Facebook or Twitter and is often found on the Web under the username "absolutelytrue".

  1. 1

    This is just great… Thanks… (First ^_^)

    0
  2. 2

    Second.. great tools..thanks

    0
  3. 3

    im a big fan of smashingMag… never posted, but this list is just off the charts for me! great tools i didnt know were available . Thankyou

    0
  4. 4

    As someone that makes a lot of html emails, those inline stylers are brilliants… cheers

    0
  5. 5

    Fab list and definitely bookmarked… Thanks Smashing Mag!

    0
  6. 6

    This is one of those posts where a little more “quality-over-quantity” would have been nice. Not that any of these are inferior solutions, but I think it’s definitely worth noting that Less and Haml both require your site to be built with Ruby. Pretty important, and the fact that I had to follow the links just to be let down really hurt the rest of the article for me- I didn’t want to waste any more time on dead ends.

    0
  7. 7

    thanks for this great collection of css tuts
    really useful

    0
  8. 8

    Simply. A greatest post! Thank u!

    0
  9. 9

    Yahoo/YUI grids/etc should be listed as a framework. It gets a large amount of support.

    0
  10. 10

    Nathan Weizenbaum

    June 25, 2009 10:17 pm

    Dan: Both Sass and Less work perfectly well for non-Ruby sites – they’re just implemented in Ruby, they don’t require you to write any Ruby code.

    0
  11. 11

    Łukasz Adamczuk

    June 25, 2009 10:54 pm

    a lot of useful tools

    0
  12. 12

    awesome, thanks=)
    I hate wiritng html emails, that inline styler will certainly be handy. I’ll certainly try out that ie6 fixer.

    I can’t view the helveticacss wallpaper, tried in firefox and safari =(

    0
  13. 13

    one of the top so far…
    awesome…

    0
  14. 14

    anybody using lesscss.org?? it looks fine, but not sure!

    0
  15. 15

    Thank You SM. Definitely an article to bookmark.

    0
  16. 16

    I thought that maybe YAML could also fit into the list, since you also introduced some ready to use frameworks. YAML layouts can be easily configurated by using predefined elements, generating cross browser compatible layouts.

    0
  17. 17

    Less is extremely useful!
    THX 4 this hint… :)

    0
  18. 18

    Yeah, YAML is definitively a must on this list!

    0
  19. 19

    There is another “css inliner” excellent tool called premailer
    http://code.dunae.ca/premailer.web/

    0
  20. 20

    awesome.
    thx

    0
  21. 21

    ‘CSS-design is not easy.’ CSS is freakin’ easy, come on.

    0
  22. 22

    I love ReCSS, really a time saver.

    0
  23. 23

    absolutely awesome post

    0
  24. 24

    An excellent post, and a definite bookmark. This has so many useful links that I know I’ll be coming back to it often. Thanks!

    0
  25. 25

    its really very goof information. thank u smashingMag

    0
  26. 26

    woah ! woah ! woah !

    Great article ! And as usual full of usefull stuff & ideas.

    0
  27. 27

    Yes!!! I am semi-featured on this post! I made the graffix for the IE6 CSS Fixer: starter kit (you can see my gravatar featured in there too)! I hope my friend knows about this. Thank you very much! x3

    0
  28. 28

    These are some great resources – very useful – much thanks!

    0
  29. 29

    Filip Van Tendeloo

    June 26, 2009 4:46 am

    @Quakeulf
    Oh he knows :)

    Great to see our little tool here.

    Love the inline css tool (could save me a lot of time when creating mailtemplates)

    0
  30. 30

    This post will be on the first place of my bookmarks – just great guys !!!!

    0
  31. 31

    Great list of sites. For css typography I use typechart.com

    0
  32. 32

    Really a useful post Gerri, keep it up, and Thanks….

    0
  33. 33

    what is CSS plz

    0
  34. 34

    Just, wow! What a comprehensive list.
    For those just starting: you could build a business from this. From those in the know: what a way to improve efficiency…thanks, as always.

    0
  35. 35

    needed stuff like this when I was back in school

    0
  36. 36

    Greg:
    Counter-Strike: Source. You should go play it now, and never return. >;3

    0
  37. 37

    Very usefull
    Thanks for sharing

    0
  38. 38

    Great list! Thanks for sharing

    0
  39. 39

    I’ve used WuFoo for styling forms. I like it but I prefer Uni-Form. I recommend adding this to the list. If you build or maintain really, really complex forms, Uni-Form it makes building them much less tedious.

    http://sprawsm.com/uni-form/

    0
  40. 40

    VisualQuick Menu is horrid! I’ve tried it.

    0
  41. 41

    Does anyone use Stylizer? I’m using it and I love it… It’s a visual CSS editor that makes life very simple when it comes to CSS, imho…here’s the link if you’re interested:

    0
  42. 42

    Great feed For CSS Lover

    0
  43. 43

    I’m kind of shy using those techniques. But thanks, anyway.
    Dust-Me-Selector is not as helpful as it sounds: If you use one stylsheet for all pages of your project, it will show up everytime one selector isn’t used on that page (but on another page of the same website).

    0
  44. 44

    if you can not write css long hand you do not belong here or on any html work. Css is to easy to have to expand upon it “this” much. haml I can see. fake CSS code not so much

    0
  45. 45

    good post.
    very useful.
    thanks.

    0
  46. 46

    thankyou!

    0
  47. 47

    Essential collection for every web designer :)

    0
  48. 48

    Thank you for sharing your Valuable information.
    I just gone through your Blog it’s nice to have all this information shared as I am also working for web design this information will help me increase my knowledge.

    0
  49. 49

    You guys always make me stunned. what a wonderful collection for css resources/ tools too good 10000000*thanks :)

    0
  50. 50

    Just an another great post! thanks!

    0
  51. 51

    Great post, thanks for sharing these resources.

    0
  52. 52

    Mohammed Zatari

    June 28, 2009 7:00 am

    good article but sth advanced to a newbie in css like me

    0
  53. 53

    Handy article, however it was not mentioned that Visual Quickmenu was not free/oss.
    I spent an hour getting my menu just right to find that it was going to cost me $150 :(

    0
  54. 54

    Great info! thanks for posting.

    0
  55. 55

    Dan: LESS doesn’t require Ruby, it’s just that the main compiler is written in Ruby and comes as a Ruby gem. So if you have Ruby installed you can easily compile .less files to .css using that gem — but you don’t actually need Ruby at all for the rest of the site, it’s just the compiler. Additionally, there is a web based compiler for LESS at http://www.tripeedo.com/less . Obviously the Ruby one is best, but you are not limited to it :) Hopefully we might see a PHP one in the future as well, giving you even more options.

    0
  56. 56

    Great! Bookmarked and deilicious’d. I need tips like this as I’m still “starting out” (for the last year) at Loklo Media.

    0
  57. 57

    Great article, very informative

    0
  58. 58

    neither codeburner or dust-me selectors are compatible with FireFox 3.5

    @Greg – are you serious!

    @Quakeulf – hilarious!!

    0
  59. 59

    Awesome Article…..
    A lot of Thanks for this…..
    Congrats Smashing Magazine Team.

    0
  60. 60

    Either your author writes for other sites, or your content is being ripped off:

    dzinepress.com/2009/06/30-css-techniques-for-effective-coding-in-web-designs/

    (Note, I didn’t make the link clickable, because I don’t want to drive more traffic to their site if they are just ripping off other articles.)

    0
  61. 61

    Alexander Bickov

    July 10, 2009 4:39 am

    Nice post

    0
  62. 62

    Very helpfull! :)

    Thanks a lot!

    0
  63. 63

    非常感谢,哈哈哈。

    0
  64. 64

    Very nice article, I was checking Less and find out i need a .NET version and voila – some googling- “http://www.dotlesscss.com/”.

    0
  65. 65

    are you aware of a tool converts from inline css to external css?
    thanks

    0

↑ Back to top