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:
- 50 Extremely Useful And Powerful CSS Tools4
- Powerful CSS-Techniques For Effective Coding5
- 53 CSS Techniques You Couldn’t Live Without6
Extend CSS with advanced selectors, variables etc. Link
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.
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.
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.
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 Link
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.
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 Link
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.
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.
Syncotype Baseline Overlay Bookmarklet23
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.
Grids with CSS: generators and useful tools Link
A simple tool that generates lightweight CSS-grid and lets you download it. Very useful.
Fluid 960 Grid System27
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.
Grid System Generator
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.
BluePrint CSS Architect
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.
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.
CSS Grid Calculator31
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 Frameworks Link
BlueTrip CSS Framework33
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.
Useful CSS development tools Link
A visual generator of maps using CSS. Very handy.
Vanilla CSS Un-reset
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.
HTML test page for CSS42
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.
CSS Styling Code Convention Convention
NodeWave provides a complete downloadable CSS Coding Style Convention with guidelines to improve development productivity.
CSS Http Request44
Useful Browser Extensions For CSS-Coding Link
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.
PixelPerfect Firefox Plugin
This Firefox plugin generates an overlay over a web composition over top of the developed HTML.
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.
Useful CSS tools: online and offline Link
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.
CSS Redundancy Checker
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 Tools Coda Plugin
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.
Silk Sprite is a Blueprint CSS plugin providing the Popular Silk Icon Package in CSS Sprite form to improve peformance and ease of use.
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.
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.
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.
The Box Office66
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.
IE6 CSS Fixer: starter kit68
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.
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 implementation72.
- 1 https://www.smashingmagazine.com/2008/12/09/50-really-useful-css-tools/
- 2 https://www.smashingmagazine.com/2008/02/21/powerful-css-techniques-for-effective-coding/
- 3 https://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
- 4 https://www.smashingmagazine.com/2008/12/09/50-really-useful-css-tools/
- 5 https://www.smashingmagazine.com/2008/02/21/powerful-css-techniques-for-effective-coding/
- 6 https://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
- 7 http://lesscss.org/
- 8 http://lesscss.org/
- 9 http://sizzlejs.com/
- 10 http://sizzlejs.com/
- 11 http://haml.hamptoncatlin.com/
- 12 http://haml.hamptoncatlin.com/
- 13 http://wiki.github.com/stubbornella/oocss
- 14 http://wiki.github.com/stubbornella/oocss
- 15 http://code.google.com/p/dtcss/
- 16 http://inlinestyler.torchboxapps.com/
- 17 http://inlinestyler.torchboxapps.com/
- 18 http://www.pelagodesign.com/sidecar/emogrifier/
- 19 http://code.google.com/p/better-web-readability-project/
- 20 http://code.google.com/p/better-web-readability-project/
- 21 http://texster.ru/
- 22 http://texster.ru/
- 23 http://robgoodlatte.com/2007/07/31/syncotype-your-baselines/
- 24 http://robgoodlatte.com/2007/07/31/syncotype-your-baselines/
- 25 http://my.opera.com/area42/blog/css-font-matching-windows-mac-and-linux
- 26 http://www.somacon.com/p334.php
- 27 http://www.designinfluences.com/fluid960gs/16/fluid/jquery/
- 28 http://www.designinfluences.com/fluid960gs/16/fluid/jquery/
- 29 http://toki-woki.net/p/Boks/
- 30 http://toki-woki.net/p/Boks/
- 31 http://www.gwhite.us/downloads/css_grid_calc.html
- 32 http://www.gwhite.us/downloads/css_grid_calc.html
- 33 http://bluetrip.org/
- 34 http://bluetrip.org/
- 35 http://compass-style.org/
- 36 http://compass-style.org/
- 37 http://praegnanz.de/weblog/htmlcssjs-kickstart
- 38 http://praegnanz.de/weblog/htmlcssjs-kickstart
- 39 http://code.google.com/p/iphone-universal/
- 40 http://cssed.sourceforge.net/
- 41 http://cssed.sourceforge.net/
- 42 http://snipplr.com/view/8121/html-test-page-for-css-style-guide
- 43 http://snipplr.com/view/8121/html-test-page-for-css-style-guide
- 44 http://nb.io/hacks/csshttprequest
- 45 http://tools.sitepoint.com/codeburner/
- 46 http://tools.sitepoint.com/codeburner/
- 47 https://addons.mozilla.org/en-US/firefox/addon/10704
- 48 https://addons.mozilla.org/en-US/firefox/addon/10704
- 49 http://getfirebug.com/lite.html
- 50 http://getfirebug.com/lite.html
- 51 https://addons.mozilla.org/en-US/firefox/addon/5392
- 52 https://addons.mozilla.org/en-US/firefox/addon/5392
- 53 http://daringfireball.net/projects/markdown/
- 54 http://www.opencube.com/qmv_vdesign/launch_quickmenu.html#
- 55 http://www.opencube.com/qmv_vdesign/launch_quickmenu.html#
- 56 http://www.cssfly.net/
- 57 http://www.cssfly.net/
- 58 http://code.google.com/p/htmlwrapper/
- 59 http://code.google.com/p/htmlwrapper/
- 60 http://thewpresser.com/css-cheat-sheet-wallpaper-in-helvetica/
- 61 http://thewpresser.com/css-cheat-sheet-wallpaper-in-helvetica/
- 62 http://www.styleneat.com/
- 63 http://www.styleneat.com/
- 64 http://smartsprites.osinski.name/
- 65 http://typo3.org/extensions/repository/view/scriptmerger/current/
- 66 http://www.theboxoffice.be/
- 67 http://www.theboxoffice.be/
- 68 http://www.onderhond.com/tools/ie6fixer/
- 69 http://www.onderhond.com/tools/ie6fixer/
- 70 http://wufoo.com/gallery/templates/forms/
- 71 http://wufoo.com/gallery/templates/forms/
- 72 http://www.featureblend.com/css-json.html
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.