W3Avenue

This is not an attempt to create a mega list of tools for CSS developers; only few but really useful tools have been selected and placed under appropriate categories. If you see that a really useful tool has been missed, please feel free to share the link in comments.

Note that for a tool to be really useful, it also needs to provide easy to follow instructions and user friendly interface; unless it is really straight forward. Unfortunately several tools listed in this list may not fulfill this criteria. If you are aware of another tool that is more user friendly and feature rich, please let us know and we may replace it with an existing tool.

Layouts

• CSS Layout Generator
  This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.
• Grid Designer
  Generates fixed and scalable grid layouts along with basic reset and typography.
• Layout Generators
  Generate multi-column and grid layouts with CSS techniques using %, px, or em.

CSS Frameworks

• Boks
  Boks is an Visual Editor for Blueprint CSS Framework; It allows you visually setup a grid and baseline rhythm, build and fill your layout and export all this to HTML and CSS. Boks is an Adobe AIR application, which means it will works on Windows, Mac and Linux.
• Useful Tools & Resources For Blueprint CSS Framework
• YAML Builder
  YAML Builder is an online tool for visually creating YAML-based CSS layouts.
• YUI CSS Grid Builder
• 960 Grid System – Variable Grid System
  Based on the 960 Grid System; the variable grid system is a quick way to generate an underlying CSS grid for your site.
• Grid System Generator
  The grid system generator will create fixed grid systems based on 960 Grid System in valid css / xhtml for rapid prototyping, development and production environments.

Fonts

• Typetester
  The Typetester is an online application for comparison of the fonts for the screen.
• CSS Type Set
• TypeChart
  Lets you flip through, preview and compare web typography while retrieving the CSS
• CSS-Typoset Matrix and Code Generator
• CSStxt
  Tool for generating CSS for web typography.
• EM Calculator AIR Application
  Calculator for Vertical Rhythm in XHTML & CSS; easily convert px to em based on base font-size and line-height; Padding and margins automatically calculated
• Em Calculator
  Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.
• PXtoEM

Colors

• CSS Color Editor
  CSS Color Editor allows you to replace the color scheme of your website without going through the entire CSS file. You choose your local CSS file, select new colors and then download the new CSS file with new color codes automatically replaced for you.
• Color Palette Generator
  Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration.
• Color Contrast Check
  The Color Contrast Check Tool allows to specify a foreground and a background color and determine if they provide enough of a contrast “when viewed by someone having color deficits or when viewed on a black and white screen”.
• ColorZilla
  ColorZilla is an extension for Firefox offering advanced eyedropper, color picker, palette viewer and other colorful goodies like: DOM color analyzer, full page zoom, firebug support, etc.
• HSL to RGB Converter

Sprites

• CSS Sprite – Online CSS Sprite Builder / Generator
  An online tool to help web designers and web developers to build CSS Sprites. All you need to do is upload multiple files and it will generate sprite image and relted CSS and HTML for you.
• CSS Sprite Generator
  CSS Sprite Generator will combine the uploaded images into a single sprite and generate the CSS for you.
• YASC (Yet Another Sprite Creator)
  This tools is useful when all your sprite images have been created in a single file. The process is fairly straight forward: you upload this file, then visually select each individual item and specify its CSS id; once you have selected all your sprites you can generate all the required CSS  with a single click.
• SmartSprites
  SmartSprites is Java command line utility that will let you 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.

Forms

• Accessible Form Builder
  Create accessible form with CSS or table layout, including all label elements simply by typing a list of fields that you need.
• Wufoo
  Wufoo is an online service that allows anybody to easily build great looking online forms. You can use Wufoo as an easy way to create good-looking, valid CSS/XHTML form markup. It allows you to use your account to design and download the markup and CSS for FREE.

UI Components

• List-o-Matic
  Create CSS-styled navigation blocks based on unordered list <li> items. Get your semantics on!
• CSS Menu Generator
  Generates horizontal, vertical & dropdown CSS menus
• ThemeRoller
  ThemeRoller allows you to design custom jQuery UI themes for tight integration in your projects.

Text Wrappers

• CSS Text Wrapper
  Generates HTML/CSS to wrap content to any shape
• The Box Office
  The Box Office lets you wrap/float/contour text around freeform images using CSS for usage in HTML pages.

Analysis & Debugging

• W3C CSS Validation Service
• CSS Analyzer
  CSS Analyzer checks the validity of your CSS against the W3C’s validation service, along with a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.
• Firebug
  One of the post popular web developer tool – Firebug is a Firefox add-on that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. You can use Firebug Lite in IE, Opera, and Safari.

Maintenance

• Dust-Me Selectors
  Dust-Me Selectors is a Firefox extension that finds unused CSS selectors
• CssCleaner
  Windows desktop application that removes unused CSS Classes from your web application
• CSS Redundancy Checker
  Use this tool to find CSS selectors that aren’t used by any of your HTML files and may be redundant.

Optimization

• CSS Drive CSS Compressor
  Normal mode allows you to choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. You can switch to Advanced mode for greater customization.
• Robson CSS Compressor
  A good CSS Compressor still in development.
• MinifyMe – AIR Application
  Adobe AIR application that allows you pack multiple files together.

Formatting

• CleanCSS – CSS Formatter and Optimizer
  This tool comes with several options for formatting as well as optimization. It also provides ready made sets of options for various level of balances between optimization and readability.  Important feature includes ability to automatically merged the same selectors and properties.
• Styleneat
  It organizes and standardizes your CSS – selectors, sub-selectors and properties – in a structure that makes it easier to define page areas and see how they relate to each other.
• CSS Toolbox
  Free CSS Validation, CSS Formatter, CSS Compressor

Browser Specific

• Conditional-CSS
  Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers. Compilers for Conditional-CSS are available in PHP, C# and C.
• Litmus
  Litmus shows you exactly how your designs look on various platform, across every popular web browser.
• Web Browser CSS Support
  Detailed information about CSS support in major web browsers, allows you to pick which browser appear on the information tables.
• When Can I Use?
  Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies. Allows you to specify browsers, features, time period,  status, search and sorting options.
• IE7.js
  IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
• Modernizr
  Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Selectors

• Sizzle JavaScript Selector Library
  A pure JavaScript CSS selector engine designed to be easily dropped in to a host library. Sizzle supports virtually all CSS3 selectors – this even includes some parts that are infrequently implemented such as escaped selectors (”.foo\\+bar”), Unicode selectors, and results returned in document order.
• SelectORacle
  Online tool that provides explanation of CSS2 and CSS3 selectors. Simply provide it with some selectors and it will return descriptions of what the selectors will match.
• YUI Selector Utility
  The YUI Selector Utility brings CSS3 Selector syntax to JavaScript, providing a compact shorthand for collecting, filtering, and testing HTMLElements.
• YUI StyleSheet Utility
  The StyleSheet Utility allows you to create and modify CSS stylesheets on the fly.

Miscellaneous

• XRAY
  XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to see the box model for any element on any web page.

Cheat Sheets

• CSS Cheat Sheet
  The CSS cheat sheet is a one-page reference sheet, listing all selectors and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.
• CSS Shorthand Cheat Sheet
• YUI Library: CSS Reset, Base, Fonts, and Grids
• Blueprint CSS Cheat Sheet

Beyond Standard CSS

• MoreCSS
  MoreCSS is a JavaScript library that can assist you with all the daily JavaScript things like pop-ups, tabs, tooltips, hyphenation, advanced list styling and more using CSS like syntax.
• LESS – Leaner CSS
  Less extends CSS by adding: variables, mixins, operations and nested rules. Less uses existing CSS syntax. This means you can migrate your current .css files to .less in seconds and there is virtually no learning curve. However you’ll need Ruby installed to use it.
• DtCSS
  DtCSS is a PHP script that preprocesses your CSS file. It speeds up CSS coding by extending the features to 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.

Please feel free to suggest any addition to the list in your comments. You may also want to look at:

• CSS3 Unleashed – Tips, Tricks and Techniques
• List of Really Useful Free Tools For JavaScript Developers
• Definitive List of CSS Frameworks
• List of Really Useful JavaScript Libraries
• Guidelines for Developing Your Own CSS Framework