50 Extremely Useful And Powerful CSS Tools

Advertisement

We love useful stuff. For months, we have been bookmarking interesting, useful and creative CSS tools and related resources. We have been contacting developers, encouraging them to improve their tools and release their handy little apps to the public. Last year we prepared and published some of them in a series of smashing posts about CSS1. Now again is the time to give these tools the attention they deserve. Big thanks to all designers and developers who contributed to the design community over the last months and years. We — our community and the design community — truly appreciate your efforts.

Below, we present 50 extremely useful CSS tools, generators, templates and resources. We did not include “traditional” CSS tools, such as Firebug2 or the Web Developer extension3, but tried to focus on rather unknown tools that are definitely worth a look. Some tools are new and some are old, but hopefully everybody will find a couple of new useful or at least inspiring tools.

We strongly encourage you to develop these tools further, build on the ideas presented here, release new tools for the public and let us know about them. We would love to feature your handy tool in our next review.

Please take a look at the following related posts:

CSS and Typography

  • Hyphenator8
    Hyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. The goal is to provide hyphenation in all browsers that support JavaScript and the soft hyphen for at least English, German and French. Here is the server-side script that does the hyphenation9.
  • CSS Type Set10
    CSS Type Set is a hands-on typography tool that allows designers and developers to interactively test and learn how to style their Web content.

    CSS Type Set11

  • Typechart12
    Typechart lets you flip through, preview and compare Web typography while retrieving the CSS.

    TypeChart13

  • CSS-Typoset Matrix and code generator14
    A matrix table that presents font sizes and (symmetrical and asymmetrical) margins for various base font sizes — in pixel and em units. It also generates the source code on the fly. Created by Jan Quickels.
  • Em Calculator15
    Em Calculator is a small JavaScript tool that helps you make scalable and accessible CSS design. It converts sizes in pixels to relative em units, which are based on a given text size.

    Em Calculator16

  • Facelift Image Replacement (FLIR)17
    Facelift Image Replacement (or FLIR, pronounced “fleer”) is an image replacement script that dynamically generates image representations of text on your Web page in fonts that might otherwise not be visible to your visitors. Written by Cory Mawhorter. How To Use Any Font With FLIR: Tutorial18.
  • Vertical rhythm calculator19
    This tool converts pixel values to em values depending on the font size of the text. You can also set margins and paddings automatically, depending on the line height you’ve defined. Very useful.

    Screenshot20

  • typeface.js21
    Instead of just creating images or using Flash to show your website’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

CSS Online Tools

  • PSD2CSS Online22
    A free online service that generates Web pages from Photoshop designs. By following the guidelines and naming conventions23, you can precisely choose how the transformation from PSD to (X)HTML and CSS is done.
  • Conditional-CSS24
    Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements for both individual browsers and groups of browsers.

    Conditional-CSS25

  • MoreCSS26
    MoreCSS is a design-oriented JavaScript library that allows you to write code for applying automatic hyphenation and creating pop-ups, tool tips, tab menus, zebra tables, advanced list styling and cross-browser opacity style. But the really special thing is that you can do these things as you would with regular CSS.
  • px to em27
    This tool is what its developers call “px to em conversion made simple”. Type a base font size in pixels, and the tool will produce a complete pixel to em conversion table, making elastic Web design much easier to produce.
  • CSS Frame Generator28
    This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure – each selector and all of its properties and values in one line. This may be a bit strange for you at the beginning, but if you get used to it you’ll find it much better.

    CSS Frame Generator29

  • CSS Redundancy Checker30
    You can use this tool to find CSS selectors that aren’t used by any of your HTML files and that may be redundant.
  • CleverCSS31
    CleverCSS is a small markup language for CSS, and inspired by Python, that can be used to build a style sheet in a clean and structured way. In many ways, it’s cleaner and more powerful than CSS2. You can also work with variables.
  • WordOff32
    WordOff applies some rules to strip the cruft that is pasted into WYSIWYG editors from Word. For example, attributes are removed for all elements except <a>, <span> and <div>, empty elements are removed and consecutive line breaks are reduced to two. It also contains an API.

    WordOff33

  • Postable34
    “I absolutely hate having to switch all the ‘< ‘ and ‘>’ signs in my code to ‘<’ and ‘>,’ respectively. I also hate having to write “&” any time I want to include an ampersand. It makes including code snippets on my blog and whatnot extremely annoying, and today I finally got fed up.” This handy tool is a little app that will do all that for you. Created by Elliot Swan.

    WordOff35

  • Kotatsu36
    Kotatsu is a simple HTML table generator. The tool lets you attach classes to cells in the same column easily.

    Kotatsu37

  • htmldevelopertools38
    This tool allows you to update your CSS files on the server in a browser window. Currently works only under IIS + .NET 3.5. An interesting idea. Could someone create a similar script for Apache? Let us know, and we’ll support your both financially and with the broad coverage of our magazine.

    htmldevelopertools39

  • Deploy40
    Deploy is a free open-source Web application that allows you to choose the name of a project, the Doctype, whether you want a CSS reset or jQuery integration, and it creates a zipped, ready-to-use package with all specified files and folders. The tool has been optimized for Fluid41, the Mac application that creates SSBs (site-specific browsers) for websites.

    Deploy*42

  • CSS Evolve43
    CSSEvolve lets you play with many properties of a website, including the website’s color scheme, fonts, borders and more. CSSEvolve works through a process of simulated evolution in which you select website features that you like and refine them through multiple generations.”It uses a traditional blind watchmaker, user-driven genetic algorithm to drive CSS changes on a website of the user’s choosing. Basically, a set of mutated CSS variants are produced, the user selects changes that he or she likes, the algorithm randomly combines those changes through crossover and mutation and the process continues.” [ via44 ]
  • Lorem 245
    This tool provides you with an “all around better Lorem experience.” It contains short paragraphs, long paragraphs, short list items and long list items to use in your wireframes.
  • SelectORacle46
    A small script that explains CSS selectors in plain English or Spanish. Particularly useful for CSS3 selectors.
  • JS Bin47
    A Web app specifically designed to help JavaScript and CSS folk test snippets of code in a particular context and debug the code collaboratively. It allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code: new tabs don’t). Once you’re happy, you can save and send the URL to a peer for review or help. They can then make further changes, saving anew if required. Alternative: CodePaste48 or EtherPad49.

    50

  • CSS Text Wrapper51
    The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

    Screenshot52

  • Writing Tests Against CSS53
    CSS is hard to test automatically. Do font sizes meet expectations? Does the layout width correspond to the initial mockup? This tool helps you spot changes in unexpected areas of a website’s layout and design. It can also extract rendered DOM values, such as text size, from a given Web page and compare them against expected values. This could be useful for both regression testing and assertion-based, test-driven development. Written in Python by Gareth Rushgrove.
  • CSS Sprite Generator54
    With this tool, you can upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and generate the CSS for you.
  • Sky CSS Tool55
    An online CSS authoring tool, Sky CSS allows you to create CSS classes almost without using handwritten code. A JavaScript-compatible browser is needed for proper functioning.
  • CSS Tidy Online56
    An online version of CSS Tidy, a tool that allows you to keep your code clean by compressing the code.
  • Web-Based Tools for Optimizing, Formatting and Checking CSS57
    A huge compilation of some of the best free Web-based CSS optimizers/compressors, code formatters and validation services. By Jacob Gube.
  • Grid Designer 2.458
    This tool enables you to create a grid by specifying the number of columns and the widths of the columns, gutters and margins. You can also specify typography in the same tool and export the final CSS and (X)HTML markup. You can also bookmark your grid and typography settings and create designs with spanning columns. Created by Rasmus Schultz.

    Grid Designer 2.459

  • Yahoo’s Secret Text-Sprite Generator60
    Basically this is a URL you can hit that creates a perfect sprite-ready PNG graphic of text you add to the URL.
  • Replace CSS Colors – Editor61
    This tool enables you to change the entire color scheme of your website without going through the CSS code. You choose your local CSS file, replace colors and then download the new CSS file.
  • The Box Office62
    The Box Office lets you wrap, float or contour text around free-form images using CSS for (X)HTML pages.
  • MinifyMe63
    A small AIR application that can compress multiple CSS and JavaScript files into one and runs on your desktop.

    MinifyMe64

  • cssdoc65
    CSSDOC is a convention for commenting in CSS to help individuals and teams to improve writing, coding, styling and managing CSS files. It is an adoption of the well known JavaDoc/DocBlock-based way of commenting in source code by putting style, DocBlocks and tags together.
  • CSS Menu Generator66
    This tool generates vertical, horizontal and drop-down menus online. Various color schemes are available, and you can also customize the menus online.
  • sheetUp – DOM Stylesheet Library67
    Simplify the tedious task of manipulating style sheets contained in document.styleSheets. You can use the sheetup bookmarklet68 to integrate a built-in CSS/HTML-editor in your browser.
  • CSS SuperScrub69
    This tool claims to significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls and intelligently grouping the remaining element names.
  • DrawAble Markup Language70
    Drawter Beta 2 gives you the possibility of literally drawing your website’s code. It runs on every single Web browser, which makes it really useful and helpful. Each tag is presented as a layer you have drawn.

    Screenshot71

Handy Kits For Designing With CSS

  • Regex Patterns for Single Line CSS72
    If you are formatting your CSS style sheets single-line, you may find Dan Rubin’s Textmate macro useful and helpful. “This macro retains a single blank line where your original contained two or more blank lines (helpful if you group your rules) and adds white space that matches my standard formatting preferences (which I find makes it easier to scan quickly).” And if you don’t use Textmate, you can use a regular expression instead; it is also provided in the post.

    Regular Expressions73

  • 21 Excellent Dreamweaver Extensions for CSS Productivity and Standards74
    An extensive overview of various Dreamweaver extensions, such as CSS Sculptor, CSS Menu Writer, Link Fader, CSS Layouts, Format Table, Style Switcher, etc.
  • Graph Paper75
    This graph paper is made for visual designers, interactive designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a two-by-two grid. Plus, you’ll get a basic grid for drafting sitemaps or anything else that might come up.
  • Starter Kit For Developers76 (PSD)
    This starter kit is a free Photoshop template that includes forms, grids, ad placeholders, dummy copy and other design elements (13 MB).
  • CSSHttpRequest77
    CSSHttpRequest (CHR) is a method for cross-domain AJAX, using CSS for transport. Similar to JavaScript, this works because CSS is not subject to the same-origin policy that affects XMLHttpRequest. Like JSONP, CSSHttpRequest is limited to making GET requests. Unlike JSONP, untrusted third-party JavaScript cannot execute in the context of the calling page.

In-Browser CSS Tools

  • Collection of Web Developer Tools, by Browser78
    Sometimes it is not easy to keep track which tools are at a developer’s disposal (and which ones are actually useful). This article lists the best tools available and quickly describes how to activate, install and use them.

    Screenshot79

In-Browser CSS Tools: Firefox Extensions

  • Dust-Me Selectors80
    A Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all of the selectors from all of the style sheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered.
  • Aardvark Firefox Extension81
    With Aardvark, you can: clean up unwanted banners and surrounding “fluff,” especially prior to printing a page; see how a page is created, block by block; and view the source code of one or more elements.
  • CSSViewer82
    A CSS property viewer that displays all information about a design element.
  • Dummy Lipsum83
    This Firefox extension dynamically fills a selected field with Lorem ipsum text; the function is called via the context menu.
  • Firefox: Test- und Entwicklungstools für Webentwickler | Dr. Web Magazin84
  • GridFox85
    GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize and allows you to create the exact grid you based your layout on.

    Screenshot86

  • 20 Firefox Add-Ons To Enhance Your Web-Development87
    Yet another overview of useful Firefox add-ons that can help developers create websites more efficiently. Among them are Codetch88, Pixel Perfect89, Link Checker90 and ColorZilla91.

Coding and Programming With CSS

  • CSS Extra Coda Plug-in92
    CSS Extra is a plug-in for Coda that gives you access to some dynamic CSS. Although it is not truly dynamic in that it will not force Coda to process the variables and settings, it gives you the commands to process the CSS instead. What this means is that you can have constants, bases and a layout module within your CSS.
  • Edit in Place with JavaScript and CSS93
    This tool offers you more intuitive editing (in-place editing) of your documents and style sheets. The idea: in a selected area, the user can enter the markup or change the current value directly.
  • Simple CSS94
    Simple CSS is a free CSS editor that runs on Mac, Windows and Linux. It allows you to create CSS from scratch and modify existing sheets, using a familiar point-and-click interface. Freeware.
  • AWK95
    AWK is a very powerful programming language that you can use on the command line for advanced text processing.
  • cssutils96
    A Python package for parsing and building CSS.
  • Simple CSS97

  • RESTful CSS98
    A new method for organizing CSS that better maps on to the way that popular Web application frameworks are built. The examples are based on Ruby on Rails, but the concepts should be easily transferrable to other MVC frameworks. By Steve Heffernan.

    RESTful CSS99

New CSS Frameworks

  • CSS Drop-Down Menu Framework100
    A cross-browser, modular framework that contains 14 customizable templates for designing drop-down-menus.
  • BlueTripCSS Framework101
    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. The framework contains 24-column grid, sensible typography styles, clean form styles, a print styleshet, an empty starter stylesheet, sexy buttons and status message styles.
  • Hartija – CSS Print Framework102
    Hartija is a CSS print framework that attempts to unite the best CSS printing practices into one single CSS file.
  • AM framework103
    This framework contains six basic templates: for fixed, fluid, one-column, two-column and three-column layouts, as well as a jQuery template.
  • Introducing SenCSS104
    A clean, minimal CSS template for new projects.
  • Typogridphy105
    Typogridphy is a CSS framework constructed to allow Web designers and front-end developers to quickly code typograhically pleasing grid layouts.
  • formy-css-framework106
    A CSS Framework for better form management.
  • emastic107
    Emastic is a CSS Framework. Its continuing mission: “to explore a strange new world, to seek out new life and new Web spaces, to boldly go where no CSS framework has gone before.”

CSS Bookmarklets

  • Design Bookmarklet108
    Design is a suite of Web design and development tools that can be used on any Web page. Encompassing utilities for grid layout, measurement (rule) and alignment (unit, crosshair), Design is a powerful and useful JavaScript bookmarklet.
  • ReCSS: Reload your CSS109
    This little bookmarklet makes refreshing your CSS a breeze. It comes in quite handy when you’re developing dynamic applications. Tested in IE and Firefox.
  • XRAY110
    A bookmarklet for Internet Explorer 6+ and Webkit- and Mozilla-based browsers (including Safari, Firefox, Camino and Mozilla). You can use it to see the box model of any element on any Web page.
  • MRI111
    MRI is a bookmarklet for Internet Explorer 6+ and Webkit- and Mozilla-based browsers (including Safari, Firefox, Camino and Mozilla). You can use it to debug and test selectors.
  • CSSFly112
    A tool for editing websites easily, directly and in real-time in your browser.
  • 15 Must-Have Bookmarklets For Web Designers And Developers113
    An extensive list of 15 handy Web designer and developer bookmarklets. The whole pack can be downloaded and imported into Firefox.

Tools For Generating CSS Layouts

  • Construct Your CSS114
    A visual layout editor based on Blueprint and jQuery. A video tutorial115 is available as well. You can use the keyboard to create layouts on the fly. By Christian Montoya.
  • XHTML/CSS Markup Generator116
    Markup Generator is a simple tool created for XHTML and CSS coders who are tired of writing boring frame code as they just begin slicing work. Its main purpose is to speed up your work by generating (X)HTML markup and a CSS frame out of very intuitive, shortened syntax, so that you can jump directly to the styling of elements.

    Markup Generator117

  • Dynamic Layout Generator118
    This tool generates cross-browser multi-column liquid designs and enables you to visually change the width and colors. You can drag the sliders to choose the width you want in your layout and preview the layout online. The CSS code is generated automatically.
  • iStylr – Online CSS Template Generator119
    An advanced WYSIWIG online CSS-editor with syntax highlighting, drag’n’drop-functionality, template import/export, image manager, stylsheet sharing option and a visual DOM tree. A registration is required (OpenID-login is supported).

    iStylr120

Blank CSS Layouts

  • The Only CSS Layout You Need121
    A collection of basic cross-browser layouts.
  • Faux-Column CSS Layouts122
    There are a total of 42 faux-column CSS layouts for downloading. All markup has been validated against a strict Doctype.

    Faux Column CSS Layouts123

  • Fixed-Width CSS Layouts124
    There are a total of 53 fixed-width CSS layouts for downloading. All markup has been validated against a strict Doctype.

    Fixed Width CSS Layouts125

  • ___layouts126
    The foundational ___layouts file offers five preset page widths, the option to have a fixed width or a text “zoom”-style scaling effect and two core templates that give you the ability to nest subdivided regions of one to four columns. The framework supports fluid-width layouts and fixed-width layouts.

CSS Layouts


(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/category/css/page/2/
  2. 2 http://getfirebug.com/
  3. 3 http://chrispederick.com/work/web-developer/
  4. 4 http://www.smashingmagazine.com/2008/02/21/powerful-css-techniques-for-effective-coding/
  5. 5 http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
  6. 6 http://www.smashingmagazine.com/2006/10/25/css-techniques-tutorials-layouts/
  7. 7 http://www.smashingmagazine.com/2008/09/11/75-really-useful-javascript-techniques/
  8. 8 http://code.google.com/p/hyphenator/
  9. 9 http://yellowgreen.de/hyphenation-in-web/
  10. 10 http://csstypeset.com/
  11. 11 http://csstypeset.com/
  12. 12 http://www.typechart.com/
  13. 13 http://www.typechart.com/
  14. 14 http://www.jan-quickels.de/tools-web-typography/
  15. 15 http://riddle.pl/emcalc/
  16. 16 http://riddle.pl/emcalc/
  17. 17 http://facelift.mawhorter.net/
  18. 18 http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/
  19. 19 http://jameswhittaker.com/journal/em-based-layouts-vertical-rhythm-calculator
  20. 20 http://jameswhittaker.com/journal/em-based-layouts-vertical-rhythm-calculator
  21. 21 http://typeface.neocracy.org/
  22. 22 http://psd2cssonline.com
  23. 23 http://psd2cssonline.com/node/128
  24. 24 http://www.conditional-css.com/
  25. 25 http://www.conditional-css.com/
  26. 26 http://yellowgreen.de/morecss
  27. 27 http://pxtoem.com/
  28. 28 http://lab.xms.pl/css-generator/
  29. 29 http://lab.xms.pl/css-generator/
  30. 30 http://services.immike.net/css-checker/
  31. 31 http://sandbox.pocoo.org/clevercss/
  32. 32 http://www.targetlocal.co.uk/wordoff
  33. 33 http://www.targetlocal.co.uk/wordoff
  34. 34 http://www.elliotswan.com/postable/
  35. 35 http://www.elliotswan.com/postable/
  36. 36 http://www.askthecssguy.com/kotatsu/index.html
  37. 37 http://www.askthecssguy.com/kotatsu/index.html
  38. 38 http://code.google.com/p/htmldevelopertools/
  39. 39 http://code.google.com/p/htmldevelopertools/
  40. 40 http://seaneill.com/deploy/
  41. 41 http://fluidapp.com/
  42. 42 http://seaneill.com/deploy/
  43. 43 http://iterationprojects.com/evolve/
  44. 44 http://somanyschemes.com/2008/11/26/cssevolve-guided-stylesheet-evolution/
  45. 45 http://lorem2.com/
  46. 46 http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py
  47. 47 http://jsbin.com/
  48. 48 http://paste.bradleygill.com/
  49. 49 http://etherpad.com/
  50. 50 http://jsbin.com/
  51. 51 http://www.csstextwrap.com/
  52. 52 http://www.csstextwrap.com/
  53. 53 http://github.com/garethr/css-test/tree/master
  54. 54 http://spritegen.website-performance.org/
  55. 55 http://skycsstool.sourceforge.net/
  56. 56 http://floele.flyspray.org/csstidy/css_optimiser.php?lang=en
  57. 57 http://sixrevisions.com/css/css_code_optimization_formatting_validation/
  58. 58 http://grid.mindplay.dk/
  59. 59 http://grid.mindplay.dk/
  60. 60 http://css-tricks.com/yahoos-secret-text-sprite-generator/
  61. 61 http://css-color-replace.orca-multimedia.de/
  62. 62 http://www.theboxoffice.be/
  63. 63 http://blog.base42.nl/2008/11/20/minifyme-a-minimizer-for-css-and-javascript/
  64. 64 http://blog.base42.nl/2008/11/20/minifyme-a-minimizer-for-css-and-javascript/
  65. 65 http://www.cssdoc.net
  66. 66 http://www.cssmenumaker.com/index.php
  67. 67 http://sheetup.com/
  68. 68 javascript:var%20scr=document.createElement('script');scr.setAttribute('src','http://templateed.com/ted2.js');document.body.appendChild(scr);void(0);
  69. 69 http://isnoop.net/tools/css.php
  70. 70 http://drawter.com/
  71. 71 http://drawter.com/
  72. 72 http://superfluousbanter.org/archives/2008/08/regex-patterns-for-single-line-css/
  73. 73 http://superfluousbanter.org/archives/2008/08/regex-patterns-for-single-line-css/
  74. 74 http://speckyboy.com/2008/10/07/21-excellent-dreamweaver-extensions-for-css-productivity-and-standards/
  75. 75 http://konigi.com/tools/graph-paper
  76. 76 http://www.quommunication.com/
  77. 77 http://nb.io/hacks/csshttprequest/
  78. 78 http://www.klauskomenda.com/archives/2008/02/16/collection-of-web-developer-tools-per-browser/
  79. 79 http://www.klauskomenda.com/archives/2008/02/16/collection-of-web-developer-tools-per-browser/
  80. 80 http://www.sitepoint.com/dustmeselectors/
  81. 81 http://karmatics.com/aardvark/
  82. 82 https://addons.mozilla.org/en-US/firefox/addon/2104
  83. 83 https://addons.mozilla.org/de/firefox/addon/2064
  84. 84 http://www.drweb.de/magazin/firefox-test-und-entwicklungstools-fur-webentwickler/
  85. 85 http://www.puidokas.com/portfolio/gridfox/
  86. 86 http://www.puidokas.com/portfolio/gridfox/
  87. 87 http://www.noupe.com/tools/20-firefox-add-ons-to-enhance-your-web-development.html
  88. 88 https://addons.mozilla.org/en-US/firefox/addon/1002
  89. 89 https://addons.mozilla.org/en-US/firefox/addon/7943
  90. 90 https://addons.mozilla.org/en-US/firefox/addon/532
  91. 91 https://addons.mozilla.org/en-US/firefox/addon/271
  92. 92 http://anthonyshort.com.au/projects/details/css-extra/
  93. 93 http://tool-man.org/examples/edit-in-place.html
  94. 94 http://www.hostm.com/css/
  95. 95 http://eriwen.com/tools/awk-is-a-beautiful-tool/
  96. 96 http://code.google.com/p/cssutils/
  97. 97 http://www.hostm.com/css/
  98. 98 http://www.digital-web.com/articles/RESTful_CSS/
  99. 99 http://www.digital-web.com/articles/RESTful_CSS/
  100. 100 http://lwis.net/free-css-drop-down-menu/
  101. 101 http://bluetrip.org/
  102. 102 http://code.google.com/p/hartija/
  103. 103 http://www.musoyan.com/am/
  104. 104 http://kilianvalkhof.com/2008/css-xhtml/introducing-sencss/
  105. 105 http://csswizardry.com/typogridphy/
  106. 106 http://code.google.com/p/formy-css-framework/
  107. 107 http://code.google.com/p/emastic/
  108. 108 http://www.sprymedia.co.uk/article/Design
  109. 109 http://turtle.dojotoolkit.org/~david/recss.html
  110. 110 http://www.westciv.com/xray/
  111. 111 http://www.westciv.com/mri/
  112. 112 http://www.cssfly.net/
  113. 113 http://www.webresourcesdepot.com/15-must-have-bookmarklets-for-web-designers-and-developers
  114. 114 http://www.constructyourcss.com/
  115. 115 http://www.constructyourcss.com/tutorial.html
  116. 116 http://lab.xms.pl/markup-generator/
  117. 117 http://lab.xms.pl/markup-generator/
  118. 118 http://www.pagecolumn.com/
  119. 119 http://istylr.com/index.php
  120. 120 http://istylr.com/index.php
  121. 121 http://www.strictlycss.com/articles/article/40/the-only-css-layout-you-need
  122. 122 http://www.code-sucks.com/css%20layouts/faux-css-layouts/
  123. 123 http://www.code-sucks.com/css%20layouts/faux-css-layouts/
  124. 124 http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/
  125. 125 http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/
  126. 126 http://layout.constantology.com/
  127. 127 http://www.smashingmagazine.com/2008/12/01/100-free-high-quality-xhtmlcss-templates/
  128. 128 http://dzineblog.com/2008/07/45-excellent-free-web-templates.html

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising
  1. 1

    uh…this list is kind of amazing. Thanks! Lots of useful stuff that I hadn’t ever heard of.

    1
  2. 2

    Very Good :D

    0
  3. 3

    What a great list of resources. It’ll take the rest of the week to check out every single one of them. Thanks S-mag.

    0
  4. 4

    Thank you for listing my article. You have quite the fantastic list here!

    0
  5. 5

    Absolutely amazing post. I found at least 5 new resources that I will be using daily. Smashing keeps kicking major ass! Thank you.

    0
  6. 6

    Great post, thank you for all the knowledge you share among us!

    0
  7. 7

    oooOOOOoooo…I’m like a kid in a candy store! So much useful CSS info to go through. I’m sure I’ll find something new.

    Thanks Smashing :D

    0
  8. 8

    Awesome post man!

    0
  9. 9

    too much links in one post…

    0
  10. 10

    You can never have too many links in one post in my opinion. Thanks for compiling this great list of CSS Tools.

    0
  11. 11

    I love this site.

    0
  12. 12

    Some lovely new bookmarks, thanks SM!

    0
  13. 13

    great post very helful

    0
  14. 14

    I’m speechless… didn’t know there were so many great tools to help with fiddly css… will take me ages to explore them all!

    0
  15. 15

    SM is back! Love this post! Wonderful resources here, lot’s I’ve never seen before.. thanks!!!

    0
  16. 16

    Josiah Jost | Siah Design

    December 9, 2008 4:09 pm

    Excellent! Great list! Thanks again.

    0
  17. 17

    Brilliant list… like you read my mind

    0
  18. 18

    ZOMG! Awesome!

    /me bows

    0
  19. 19

    podarok - _my.ukrweb.info

    December 9, 2008 5:04 pm

    So many tools have no support for Unicode 8(
    But very usefull articl as for me. Thanks

    0
  20. 20

    I’ve never seen such a comprehensive list. Thanks for this!!!

    0
  21. 21

    excellent ! Bravo.

    0
  22. 22

    Like everyone else here I’ve to approve, that this is the most comprehensive list for useful css-tools I’ve ever seen!
    On articel to stay hours for just checking out all the contents.

    0
  23. 23

    Fantastic stuff here SM!

    0
  24. 24

    Amazing list guys! Thank you!

    0
  25. 25

    you guys are amazing!

    0
  26. 26

    *****

    Incredibly awesome

    0
  27. 27

    We’ve been smashed…

    0
  28. 28

    How about yahoo YUI? It’s not quite as visual of a css as the list but it is a fairly widely used CSS reset and grid tool these days…

    0
  29. 29

    Fan-bloody-tastic! More CSS tools than you can poke a stick at!

    Brilliant work guys- keep it up!

    0
  30. 30

    Web Design Puerto Rico

    December 9, 2008 11:28 pm

    Woow very good,

    0
  31. 31

    Perhaps Typetester ist useful, too.

    0
  32. 32

    great article! thank you so much for all these helpful tools!! :)

    0
  33. 33

    This is taking up my whole morning. I REALLY had things to do. You guys have to stop this!

    0
  34. 34

    Great post, thank you…

    0
  35. 35

    Quite innovative and fresh !!!
    Keep up the good work.

    0
  36. 36

    very nice thank you keep it up

    0
  37. 37

    Thanks for the addition (Typogridphy).

    0
  38. 38

    Great list! Thanks!

    0
  39. 39

    The best post on here in months, a real return to form. Good work.

    0
  40. 40

    Hardcore!
    Very nice post ^-^

    0
  41. 41

    this is really amazing!

    0
  42. 42

    Very nice article! Thanks guys!

    0
  43. 43

    Thanks for posting my tools here guys, I hope someone will find them useful. Cheers!

    0
  44. 44

    wow .. great list .. thanks

    0
  45. 45

    A-MA-ZING ! This fits exactly my current needs. It’s like you’ve guessed it… This is a gold mine for every people working on web matters, even if not specifically designers (like myself).

    Thank you very MUCH for this ! This article is a database of info one usually stores, bookmark per bookmark, browsing the web, during weeks.
    Thanks !

    0
  46. 46

    This is alot better than more lame icon packs.

    Well done SM, your back on my daily checks again.

    0
  47. 47

    It’s almost too much :)

    But I still much use notepad++ and good ol’ F5 when doing CSS. Wonder why …

    0
  48. 48

    This is a great resource! Thanks SM!

    0
  49. 49

    Very nice list, Thanks

    0
  50. 50

    Very very extremely awesome! thanks you so much!

    0
  51. 51

    I am BLOWN AWAY by this list, so many promises, I hope they can deliver. I will definitely be back to this page when i have to repoduce my next client templates.

    0
  52. 52

    great collection! thanks a lot!!!

    0
  53. 53

    I miss blueprint CSS grid

    it is a really great help for all designers

    0
  54. 54

    Holy smokes you guys, this is a freaking amazing list of resources. I’m currently in the process of fine tuning my CSS coding skills, and I think that you guys have just made that much easier.

    Once again, excellent work you guys.

    0
  55. 55

    Woah! Great stuff you guys! Nice post indeed!

    Now I’ve got something to do after my pre-board tomorrow! :)

    0
  56. 56

    Awesome! thaks for this post.

    David Costales
    http://davidcostales.comhttp://blog.davidcostales.com

    0
  57. 57

    excelente recopilacion de recursos.!

    0
  58. 58

    very useful :)

    0
  59. 59

    This is extreme! I would pay for a list like this. Got me 5 new bookmarks :). Smashing rockz!

    0
  60. 60

    Hi guyz,,,,,,,,,,,,,,superb workkkkkkkkkkkkk excellent….

    0
  61. 61

    That leaves just one problem… How am I ever going to use all these tools?

    Great post. Thanks SM

    0
  62. 62

    Amazing list here, I can’t wait to try some of these tools out. Not your typical top 10 list with the tools everyone knows. Many kudos to the authors, great job!!

    0
  63. 63

    As always… Smashing makes my job easier and my day that much better… you guys rock!

    0
  64. 64

    great post!!

    0
  65. 65

    Best Smashing post ever.

    0
  66. 66

    Exactly what I needed, exactly when I needed it. How serendipitous!

    0
  67. 67

    Wow, I cant believe Typetester (http://www.typetester.org) is not in the list! it’s a really cool tool! I wish someone would integrate all these tools that are floating around all over the web into one website under one interface, my tools list is getting pretty long Xb

    0
  68. 68

    I really appreciate all of the resources you share! Thank you!

    It would be great if you would collect reviews of these 50 CSS Tools and then publish the Top Ten that pros actually use & how they use them. Gracias!

    0
  69. 69

    WOW! These tools look like they’ll save me tonnes of time and help me actually write proper css code. thanks SmashingMag, yet another fantastic post bookmarked in my del.icio.us :)

    0
  70. 70

    like the title: this is a powerful article and very helpful, thanks a lot

    http://www.3dand2dmag.wordpress.com

    0
  71. 71

    Frameworks are for pussies that can’t write their own CSS, and do their own work. CSS is not complicated enough to require a framework. I can code up any design in less than 6 hours, and make it cross-browser compliant, and then it’ll have classes like “left_nav” or “header”, instead of “y_2_38r”, or other bullshit.

    The only thing you should need a framework for is programming.

    0
  72. 72

    Thank for article Smashing.

    0
  73. 73

    Seriously Great info. You guys have a way of posting exactly what I’m looking for.

    1
  74. 74

    Absolutely amazing list ! Thanx a lot !

    0
  75. 75

    Hi!

    Great collection… there are soo manye cool links!

    Thx it`s awsome

    0
  76. 76

    Great list! Thanks for compiling it.

    Feedback on one of the entries — I was disappointed in the “faux-column layouts” site (toward the bottom of the list). Their site (called CSS Sucks) doesn’t render properly in Firefox 3… makes it a little hard to take their tools seriously.

    0
  77. 77

    Hey mikemike… nothing says “I’m 13 years old” like pig-headed opinions and profanity. CSS frameworks are for good coders who have better things to do with 6 hours than reinventing the wheel.

    0
  78. 78

    Damn, do you all get any sleep? Awesome post, thanks!

    0
  79. 79

    How do you guys find this stuff? Great resource nonetheless.
    Moluv.com

    0
  80. 80

    Damn, this seems like the pirate’s css chest… lots of info.. need to digest..

    thanx for this smashing article

    0
  81. 81

    SWEET. I’m going to have to devote an afternoon to going through this all. thanks!

    0
  82. 82

    This article got me so excited I actually tinkled a little bit! Great job and list of resources. Thanks a ton! :)

    0
  83. 83

    Yey – an unbelievably good post! :)

    0
  84. 84

    Just Incredible list,

    Thank you!

    0
  85. 85

    wow! Wonderful list! So many new links to play with. It’s like xmas came early. :) thanks guys, stellar post.

    0
  86. 86

    This is going to save me so much time! :D

    0
  87. 87

    its.. too… much….
    now I’m going to stuck in my notebook the whole week and my wife will hate me…
    mmm thx anyway smashing magazine!

    0
  88. 88

    @mikemike

    you shouldn’t name css class after their ‘physical’ position…:)

    0
  89. 89

    This is probably the MOST useful article I’ve read in a while! Very good resources! I LOVE IT!

    http://www.taddmencer.com

    0
  90. 90

    As a front end developer this is exactly the kind of article I want to read here at Smashing. Keep up the good work people!

    0
  91. 91

    Thank your for the overview.

    I really wonder if Conditional-CSS makes your website faster. I prefer conditional comments in my markup over the inclusion of another php file

    0
  92. 92

    I never even knew a lot of these existed, some great stuff here, especially for up and coming Front End developers

    0
  93. 93

    Nice, helpful list of useful things. One small criticism though – you might want to take a look at the description for “Postable” as it makes very little sense ;)

    0
  94. 94

    IMO this Layout Generator must be included in Tools For Generating CSS Layouts. It’s great tool.

    0
  95. 95

    heather van de mark

    December 11, 2008 6:57 am

    Although, I’m more interested in the design aspect, and less so on the developing, coding, I found a lot of little interesting things on here, so good job SM!

    0
  96. 96

    Thanks for the mention of BlueTrip!

    0
  97. 97

    And thanks for including CSS Type Set!

    0
  98. 98

    Absolutely amazing post! I never heard of most of the tools…Thank you.

    0
  99. 99

    a very nice article

    0
  100. 100

    you peoples goona make me mad someday. i just love your posts. keep it up.

    0
  101. 101

    I’m exhausted from just scrolling to the bottom :)
    Great roundup!

    0
  102. 102

    Thank for Great collection.

    0
  103. 103

    A lot of stuff ;-) Thanks.

    0
  104. 104

    Really a good one. Would have been better if little descriptive with some screen shots placed. Firebug and Dev Toolbar are few good tools suggested.

    0
  105. 105

    excelenteeeeeee!!!! quiero más ;)

    0
  106. 106

    Just what I needed, thank you guys.

    0
  107. 107

    Just to clarify on the sheetUp bookmarklet ( http://templateed.com/ ), it only works in Firefox, purely because I knew that Firefox could to save to disk so I concentrated efforts towards Firefox. It did partly work with Webkit and Opera but that broke recently, twas pure luck that it did run before. I’m just about to add a warning on the loading screen now.

    0
  108. 108

    I don`t think that most of them are usefull. When I make a css or xhtml I will make it slower if use some of the tools. Alot of them are for a non profesional work.

    0
  109. 109

    God bless you!

    0
  110. 110

    this article will come very handy…
    bookmarked for reference and spread to friends =)

    0
  111. 111

    WOW, you weren’t joking when you said “extremely useful”!

    FYI, “css-checker” isn’t working.

    0
  112. 112

    brilliant list of helpful tool! Tnx. Most of them are very useful. It’s great to collect them in one perfect place. That save a lot of coders’s time.

    0
  113. 113

    Epic post. I have been a developer for a few years and used many many resources, but you continue to provide fresh stuff that helps and inspires! Many thanks, keep it up!

    0
  114. 114

    Comprehensive and interesting… but not useful for me. I think I would waste time trying to “use” these tools. Anything that automates my CSS development means I don’t fully “know” my CSS, and that will cause delays later when I try to fix problems. I’ll stick with Dreamweaver and the Web Developer toolbar for Firefox.

    0
  115. 115

    where to download the materials of ’50 CSS tools’ in this page?I have been researching the download link ,but i can’t find.

    Jesper

    0
  116. 116

    great post

    0
  117. 117

    Hey, nice one Smash, a multi-dimensional list. Are there any apps that alphabetize your style sheets from selector to selector?

    0
  118. 118

    OMG you just saved me so many headaches with the minimizer air app. Keep these rocking please ;)

    0
  119. 119

    frank katzer | 1klang.de internetagentur

    December 30, 2008 4:00 pm

    respect. that’s a lot of work of yours…
    thanks for the list!

    0
  120. 120

    Woow.. wonderful collection.. :-))

    0
  121. 121

    谢谢分享!
    Thank you for sharing this。

    0
  122. 122

    Really usefull information… thanks smashing magazine!

    0
  123. 123

    Really useful information… thanks smashing magazine!

    0
  124. 124

    very good,thank you,welcome to our website:www.1dushi.com,www.zhongt.net

    0
  125. 125

    Fantistic!

    0
  126. 126

    Wow, thanks!

    0
  127. 127

    Pretty PollyPerfect

    January 20, 2009 8:50 pm

    great advice, interesting article, and nice presentation… do you want my job (just kidding)…
    cheers,
    polly
    the jeans guru,

    0
  128. 128

    Great post. I’ve used a few of these, but I’m very grateful for the others you’ve found! There can never be too many CSS resources! :)

    0
  129. 129

    One more css framework: cSans

    0
  130. 130

    I’m pretty suprised you didn’t mention the YUI CSS framework, it’s an excellent set of tools for developers. The YUI Reset is awesome for creating a cross browser ‘blank slate’. And the YUI Grids are great for creating templates. Check it out if you haven’t already.

    0
  131. 131

    THIS IS AS GOOD AS GOLD!

    0
  132. 132

    i has happy

    0
  133. 133

    Every time I drop by this site, I wind up leaving with about 10 new tabs open. The resources are so awesome! And these CSS tools are no exception.

    0
  134. 134

    super
    good Fantistic!

    0
  135. 135

    You just keep getting better and better. Wow — WOW!

    0
  136. 136

    This is very very excellent document. I think site creator had done very hard work to create this document. It is so use full to web developers.

    0
  137. 137

    really impressive, i think my internet presence will live here for a while

    0
  138. 138

    very nice

    0
  139. 139

    nice nice

    0
  140. 140

    Simply amazing. So many useful tools

    0
  141. 141

    Great article and contains lots of tips and tricks!

    0
  142. 142

    PXConverter allows you to convert PX websites to EM Sites on the fly. Either upload your Stylesheets or use the real-time text converter. Hassle-free accessible websites.

    http://pxconverter.com/

    0
  143. 143

    There will be many issues to discuss between our two countries, and we are willing to move forward without preconditions on the basis of mutual respect. ,

    0
  144. 144

    Nobel Job! Kudos Mr.Vitaly Friedman, Keep posting things that we love to have… Thanks Alot…

    0
  145. 145

    Very good exhaustive post!
    Thank you very much for this!

    0
  146. 146

    Very good article and contains lots of tips and tricks!

    thanks…

    0
  147. 147

    GREAT ARTICLE
    I develop a css3 button generator , take a look and tell me what do you think…
    http://css3buttons.markware.gr/

    0
  148. 148

    learning

    0
  149. 149

    I’d also suggest trying Squad (SquadEdit.com). Squad’s collaborative, which makes it very easy to work with groups or do pair programming, even if your teammates don’t also subscribe to Squad. It has a simple, accessible interface, and it’s easy to code from anywhere. You can also try it for free!

    0
  150. 150

    Hey!

    Really good article, thanks for it. I’ve just ran into bluePen last week. It’s goood, You can save the modifications directly to your server with ctrl+s without editing css files.
    You can try it and download it at: http://www.bluepeneditor.com/

    0
  151. 151

    Christopher Bensinger

    December 10, 2011 9:52 pm

    Where does Steve Mcintyre fit in with the Good, Bad and Ugly?

    0
  152. 152

    Another one useful tool to convert em, px, %, pt. Ability to convert whole css. http://emtopx.com/

    3
  153. 153

    I have also made new CSS tool for styling tables, menus and lists (complete with gradients!). Check it out at http://designmycss.com

    0
  154. 154

    And…a simple but usefull grid system extension for Google Chrome browser…

    https://chrome.google.com/webstore/detail/fikpgdnlnimmndcamdmmkfjblcfnckoo?hl=fr

    0
  155. 155

    I really like reading your webblog. There is only one problem. I cannot find your subscription button.

    0
  156. 156

    hi . Vitaly Friedman Was very good . Do not tired

    0
  157. 157

    that one article… had changed my life.
    super b…. :)

    0
  158. 158

    Really good article!
    I would recommend my CSS shadow generator:
    http://shadowgenerator.com/

    0
  159. 159

    Since so many people are posting css generators, here’s another one to add to the list http://www.generatecss.com

    0
  160. 160

    Hello! The list is amazing. I have been using some of the above mentioned tools. But recently I’ve found one more nice CSS tool – CSS3 generator EnjoyCSS (http://enjoycss.com/). It is absolutely free and has a simple UI. It allows making ‪2D‬ and ‪3D‬ transforms and multiple box and text shadows and much more.

    0
  161. 161

    I like this enjoycss tool. Awesome. Seems like alpha, but already very powerfull

    0

↑ Back to top