List of Really Useful Tools for CSS Developers

Regardless of size and scope of your project, CSS development process can take quite a lot of time. Even if you are an experienced CSS developer; having good set of tools at your disposal can drastically improve your productivity.

W3Avenue has compiled a list of really useful CSS tools that will help you increase both your productivity and knowledge. We have categorized these tools under various categories to help you easily find the right tools for your needs.

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

Fonts

  • Typetester
    The Typetester is an online application for comparison of the fonts for the screen.
  • @font-face Generator
    Easy to use CSS3 @font-face generator from Font Squirrel.
  • 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 Generator
    Creates single sprite image and generate the appropriate CSS for you.
  • 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.
  • Nav-o-Matic
    Generates navigation markup and CSS for your sprite.
  • 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.

Convertors

  • Primer CSS
    Primer undercoats your CSS by pulling out all of your classes and id’s and placing them into a starter stylesheet.
  • Automatic CSS Inliner Tool
    Tool that will automatically transform all of your local styles into inline styles. Useful for styling email news letters.
  • Drawter
    Online tool that literally lets you draw your website’s code.

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.
  • CSS SuperScrub
    This tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.
  • Helium
    JavaScript tool to scan your site and show unused CSS

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

  • CSS Sorter
    Free online tool for sorting CSS files. It organizes CSS rules alphabetically so that it will be easier for you to maintain your CSS files.
  • 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.
  • Wordoff
    Strips the cruft that is pasted into WYSIWYG editors from Word
  • CSS Toolbox
    Free CSS Validation, CSS Formatter, CSS Compressor

Browser Specific

  • Modernizr
    A really useful JavaScript library that detects native availability of HTML5/CSS3 features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities. If you prefer using MooTools, you can use MooModernizr (MooTools port of Modernizr)
  • 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.
  • CSS3 support for Internet Explorer 6, 7, and 8
    IE-CSS3 is a script to provide Internet Explorer support for several of the popular new styles available in the upcoming CSS3 standard.
  • 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.
  • IE6 CSS Fixer
    A tool specifically designed to ease the pain of the IE6 CSS debugger.

Selectors

  • CSS3 pseudo-class Selector Emulation
    ie-css3.js allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. Simply include the script in your pages, start using these selectors in your style sheets and they’ll work in IE.
  • Dust-Me Selectors
    A Firefox extension that finds unused CSS 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.

CSS3 Generators

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.
  • CSSUtilities
    A JavaScript library that provides unique and indispensible methods for querying CSS style sheets
  • ReCSS
    This little bookmarklet makes refreshing your CSS a breeze

Cheat Sheets

Beyond 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:

Stay Updated

If you found this post useful, consider subscribing to our RSS Feed! You can also stay updated by following us on Twitter and Facebook or by subscribing to our FriendFeed.

Bookmark / Share

Bookmark and Share

Read More

SIMILAR/RELATED POSTS:

PREVIOUS POST:

NEXT POST:

Reader Comments

41 Responses to “List of Really Useful Tools for CSS Developers”
  1. Martin Luff says:

    Great set of resources there – some really useful finds for me…

    Thanks a bundle.

  2. Frato says:

    You could add this tool (http://www.lecentre.net/fratoblog/yasc/) for the sprites creation.

  3. Paul says:

    JotForm is horrible!
    :s

    • W3Avenue Team says:

      JotForm has been replaced by Wufoo

      • Joe says:

        Jotform is bad and “Accessible Form Builder” is good!!. You got to be kidding me? This is ridiculous. Jotform is the easiest and most flexible form builder ever, just use your common sense.

  4. Anna says:

    Thank you, really useful list. I can’t believe how easy it is to create color-skins for my sites with CSS Color Editor. I used to spend hours manually editing my css files.

    Thanks, Really:)

  5. Stephan says:

    Maybe you can add http://iStylr.com to this list. Would fit under Layouts though it can do much much more.

  6. Web 2.0 Junkie says:

    knowing that they’re a viral marketing tool, isn’t it really an attempt to get another “list” on the internet, to get more visits to the site?

  7. Jickky says:

    Wow! It’s a great list! Thanks for sharing & waiting for more quality posts.

  8. Simon says:

    Great list! You could also add http://www.IzzyMenu.com – free CSS menu builder.

    • W3Avenue Team says:

      Thank you, CssCleaner has been added to the list under newly created category “Maintenance”.

  9. You should really list ie7-js, which is javascript that makes many of the features that both ie7 and ie8 misses.

    It’s much easier to fix IE-problems with it! :D

  10. Sponter says:

    Thank you very much for this useful post, it really helped me solve some minor problems…

  11. Rajan Sharma says:

    Thanks a lot its really helpful

  12. Jasper Kooij says:

    I like the css color extraction from an image: http://www.cssdrive.com/imagepalette/

    as well as the Adobe Kuler: http://kuler.adobe.com/ It is quite handy to come to some sort idea about color schemes and them turn it around into a color palette for photoshop or Illustrator.

    My 0.02

    I really like this list!

    Jasper

  13. Aliester says:

    This css cleaner list,it is too useful.
    thanks!

  14. Hunter says:

    This is a pretty great list, I do like some of the Firefox tools that i use as well though, not sure if you’d want to add them someplace

    First that I’ve been using for along time is colorzilla
    http://www.colorzilla.com/firefox/

    and the second one i just found and is in beta but really helpful sometimes, for css development work is xray try it
    http://www.westciv.com/xray/

    thanks for the great list.

  15. tenerife says:

    well i’ve certainly learnt a bunch of stuff tonight. thx

  16. John Ryan says:

    Hi, great list of help tools with css. I have an easy to use css menu creator at FREECSSMENUS ! Enjoy!

  17. Module23 says:

    Hi man, great list. Thanks for compiling this useful collection. Bookmarked!

  18. ChanHan Hy says:

    Thanks for sharing, good tools.

  19. A good list. Although there’re many lists of this type, but this is the biggest list of CSS tools I’ve seen. Thank you for this post.

  20. Tracy says:

    Thanks for the great resources!
    I recently started using the 960.gs framework – it’s been great so far!
    I can also recommend the grid system generator as a great tool for generating variable grid systems and not being bound to a specific number of columns or width – http://www.gridsystemgenerator.com/

  21. Intalksicator says:

    How about the IE6 fixer?
    http://www.onderhond.com/tools/ie6fixer/

  22. robb says:

    css layout generator get my vote.
    i’ve been using it since my first time developing web pages.

  23. Ukrainian says:

    Very comprehensive list of tools in one page. Thanks!

  24. Meissen says:

    Great list with wonderful tools. Many thanks!

  25. SmashDesign says:

    great post
    thanks a lot

  26. great list..! Thanks for the share….! Loved it.!

  27. shoaib says:

    this is such a nice list.m with the grid system,it makes things really easy .

  28. muhammed says:

    Thank you very much about this Article

  29. Sergey says:

    Good list but it need to be refreshed i think. This collection is worth to be reevaluated periodically.

  30. W3Avenue Team says:

    Thanks, we have finally been able to revamp this list on 9th April 2010. Hope you find it more up to date. Please keep suggesting further additions.

    Thank you all for great support and feedback.

  31. A.Hariri says:

    Excellent CSS Resources. Much appreciated!

  32. Murad says:

    This is an amazing list. I never knew there was a tool for Text Wrappers. Grids and Layouts are pretty useful.

    A difinite bookmark!

Leave Comment

 
 

Stay Updated, Subscribe to RSS Feed

 
 
 
 

Blogroll

 

Sponsored Links