Andrew Wayman

I love useful stuff. For months, I have been bookmarking interesting, useful and creative CSS tools and related resources. Below, are 138 extremely useful CSS tools, generators, templates, resources, and more… I strongly encourage everyone to develop these tools further, build on the ideas presented here, release new tools for the public and let me know about them. I would love to feature your handy tool in my next review (feel free to add them into the comments as well).

Layout

• YAML Builder This is by far the best layout generator out there, definitely use this if you want to practice CSS.
• Templatr- Almost like YAML without the pretty colors.
• CSS Creator- 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.
• Firdamatic- Firdamatic™ is an online tableless layout generator that allows you to create and customise layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze.
• The Generator Form- Allows the creation of easy to create websites right from the click of a button.
• Qrone CSS Design Editor- You can easily edit CSS with this design editor by Qrone.com
• CSS template generator- This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look n feel of an entire site.
• HTML PHP CSS Website Template Maker- This PHP - HTML - CSS template generator creates a two column layout with both a header and a footer. This PHP / CSS Style Sheet template generator outputs full featured tableless code i.e. tables are NOT used for the template with the column layout.
• CSS rounded box generator- Allows for the creation of rounded CSS boxes.
• CSS layout generator- This generator will create a fluid or fixed width column layout, with up to 3 columns and with header, footer and menu. Values can be specified in either pixels or percentages.
• Wordpress Theme Generator- This online generator creates your own custom unique WordPress Theme. Without any need for HTML, JS, PHP, or CSS knowledge.
• Construct Your CSS - A visual layout editor based on Blueprint and jQuery. A video tutorial is available as well. You can use the keyboard to create layouts on the fly. By Christian Montoya.
• XHTML/CSS Markup Generator - 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.
• Dynamic Layout Generator - 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 Generator - 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).
• The Only CSS Layout You Need - A collection of basic cross-browser layouts.
• Faux-Column CSS Layouts - There are a total of 42 faux-column CSS layouts for downloading. All markup has been validated against a strict Doctype.
• Fixed-Width CSS Layouts - There are a total of 53 fixed-width CSS layouts for downloading. All markup has been validated against a strict Doctype.
• ___layouts - 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.
• 100 Free High-Quality XHTML/CSS Templates - In this post, we showcase 100 free high-quality templates. Hopefully, some of them will save you some time in your design and development. While they are generally free for personal or commercial use, always remember to check the license first for any restrictions or guidelines.

Optimization

• Online CSS Optimizer- This tool is used to optimise CSS code. Enter either a URL or Copy & Paste the stylesheet into the box, and click Go. More information on this tool can be found on the about page.
• CSS Compressor- Use this utility to compress your CSS to increase loading speed and save on bandwidth as well.
• CSS Analyzer- This service has been provided to allow you to check the validity of your CSS against the W3C’s validation service, along with a colour contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.
• Clean CSS CSS formater and optimizer based on CSS tidy.
• CSS Tidy- CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality).
• Tabifier- The tabifier is a tool to properly indent computer code. The style it produces is a mix of my personal preferences for indentation plus what he could manage to make a program produce from dirty source.
• Lonnie Beast- CSS online formatter, easily format your CSS without any programs.

Navigation

• DOMTab- DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any “back to top” links in the section and automatically hides all but the first one when the page is loaded. You can use as many tabbed menus on the page as you want to.
• List-O-Matic- List-o-matic lets you choose the content, layout and presentation of your list-based navigation menus. Just give it a go - it’s child’s play!
• Tabs Generator- Creating tabs has never been this easy!
• CSS Navigation Generator- This web tool generates the necessary code you need to build up a valid and accessible text based imaged navigation bar with one sprite image, XHTML and CSS.
• CSS Menu Generator- CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.
• CSS Button Generator- Generate buttons and field text easily.
• CSS Play- Huge database of menus.
• List-O-Rama- List-O-Rama will allow you to generate nice CSS inline menus in seconds. Just walk through the wizard and insert the text of the links, choose the vertical or horizontal menu, pick the design and click on finish.
• Izzy Menu- Choose from dozens ready styles or create your own menu style. IzzyMenu, online menu generator is the best solution for amateurs and professionals!
• CSS Buttons- CSS Buttons will allow designers to quickly implement consistently looking, cross-browser, buttons regardless of the element used. CSS Buttons is a plug n’ play solution for Multilingual, CMS, Blogs, and similar web sites faced with dynamic content challenges.
• CSS Tab Designer- CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!
• CSS Menu Generator- Over 31 designs of CSS menus ready to be picked.
• CSS Menu Generator- Easily generates menus for your use.
• Listamatic - Nested list options, there are plenty to choose from.

Font and Typography

• Type Chart- Type chart lets you flip through, preview and compare web typography while retrieving the CSS.
• EM Calculator- Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design.
• Vertical rhythm calculator - Want to convert pixel values to EM values, this calculator is for you!
• Type Tester - It has beautiful layout and a very friendly user interface.
• CSS Font and Text Style Wizard - Allows for the easy creation of css font options.
• Font Tester - Are you tired of having to refresh the page to view how your font will look like? Font tester to the rescue.
• Sky CSS Tool - Online CSS Authoring Tool. «Sky CSS» allows you to create CSS classes almost without using manuscript code.
• Clear CSS Generator - You can easily select colors from the palette to preview your future web-project design right now.
• Hyphenator - 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 hyphenation.
• CSS Type Set - 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.
• Typechart - Typechart lets you flip through, preview and compare Web typography while retrieving the CSS.
• CSS-Typoset Matrix and code generator - 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 Calculator - 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.
• Facelift Image Replacement (FLIR) - 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: Tutorial.
• Vertical rhythm calculator - 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.
• typeface.js - 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 Frameworks

• Elements- Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient.
• Sen CSS- SenCSS is a sensible standards CSS Framework. This means that SenCSS tries to supply standard styling for all repetitive parts of your CSS, allowing you to focus on the fun parts. In that sense, senCSS is a bit like a large CSS Reset.
• Eswat- Easy to edit grid based layouts.
• Clever CSS- CleverCSS is a small markup language for CSS 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 is.
• Logic CSS- The Logic CSS framework is a collection of CSS files and a toolset designed to cut development times for web-standards compliant web layouts and templates.
• CSS Drop-Down Menu Framework - A cross-browser, modular framework that contains 14 customizable templates for designing drop-down-menus.
• BlueTripCSS Framework - 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 Framework - Hartija is a CSS print framework that attempts to unite the best CSS printing practices into one single CSS file.
• AM framework - This framework contains six basic templates: for fixed, fluid, one-column, two-column and three-column layouts, as well as a jQuery template.
• Typogridphy - Typogridphy is a CSS framework constructed to allow Web designers and front-end developers to quickly code typograhically pleasing grid layouts.
• formy-css-framework - A CSS Framework for better form management.
• emastic - 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 Firefox Extensions

• CSS Validator- Validates a page using the W3C CSS Validator. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page.
• Firebug- Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…
• Grid Fox- 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.
• FireScope- FireScope is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS.
• CSS Viewer- I love this tool! If you ever go into a website and want to see its CSS properties this tool will allow you to do just that.
• CSS Mate- Inline CSS Editing Evolved. Originally a port of the fantastic EditCSS tool that he had been using for many months. He gutted it, made each stylesheet load into a seperate tab.
• Dust-Me Selectors - 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 Extension - 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.
• CSSViewer - A CSS property viewer that displays all information about a design element.
• Dummy Lipsum - 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 Magazin
• GridFox - 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.
• 20 Firefox Add-Ons To Enhance Your Web-Development - Yet another overview of useful Firefox add-ons that can help developers create websites more efficiently. Among them are Codetch, Pixel Perfect, Link Checker and ColorZilla.

CSS Online Tools

• PSD2CSS Online - A free online service that generates Web pages from Photoshop designs. By following the guidelines and naming conventions, you can precisely choose how the transformation from PSD to (X)HTML and CSS is done.
• Conditional-CSS - Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements for both individual browsers and groups of browsers.
• MoreCSS - 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 em - 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 Generator - 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 Redundancy Checker - You can use this tool to find CSS selectors that aren’t used by any of your HTML files and that may be redundant.
• CleverCSS - 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.
• WordOff - 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.
• Postable - “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.
• Kotatsu - Kotatsu is a simple HTML table generator. The tool lets you attach classes to cells in the same column easily.
• htmldevelopertools - 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.
• Deploy - 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 Fluid, the Mac application that creates SSBs (site-specific browsers) for websites.
• CSS Evolve - 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.” [ via ]
• Lorem 2 - 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.
• SelectORacle - A small script that explains CSS selectors in plain English or Spanish. Particularly useful for CSS3 selectors.
• JS Bin - 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: CodePaste or EtherPad.
• CSS Text Wrapper - 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.
• Writing Tests Against CSS - 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 Generator - 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 Tool - 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 Online - 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 CSS - 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.4 - 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.
• Yahoo’s Secret Text-Sprite Generator - 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 - Editor - 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 Office - The Box Office lets you wrap, float or contour text around free-form images using CSS for (X)HTML pages.
• MinifyMe - A small AIR application that can compress multiple CSS and JavaScript files into one and runs on your desktop.
• cssdoc - 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 Generator - 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 Library - Simplify the tedious task of manipulating style sheets contained in document.styleSheets. You can use the sheetup bookmarklet to integrate a built-in CSS/HTML-editor in your browser.
• CSS SuperScrub - 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 Language - 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.

Handy Kits For Designing With CSS

• Regex Patterns for Single Line CSS - 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.
• 21 Excellent Dreamweaver Extensions for CSS Productivity and Standards - An extensive overview of various Dreamweaver extensions, such as CSS Sculptor, CSS Menu Writer, Link Fader, CSS Layouts, Format Table, Style Switcher, etc.
• Graph Paper - 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 Developers (PSD) - This starter kit is a free Photoshop template that includes forms, grids, ad placeholders, dummy copy and other design elements (13 MB).
• CSSHttpRequest - 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 Browser - 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.

Coding and Programming With CSS

• CSS Extra Coda Plug-in - 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 CSS - 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 CSS - 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.
• AWK - AWK is a very powerful programming language that you can use on the command line for advanced text processing.
• cssutils - A Python package for parsing and building CSS.
• RESTful CSS - 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.

CSS Bookmarklets

• Design Bookmarklet - 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 CSS - 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.
• XRAY - 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.
• MRI - 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.
• CSSFly - A tool for editing websites easily, directly and in real-time in your browser.
• 15 Must-Have Bookmarklets For Web Designers And Developers - An extensive list of 15 handy Web designer and developer bookmarklets. The whole pack can be downloaded and imported into Firefox.

Miscellaneous

• CSSHttpRequest - CSSHttpRequest is cross-domain AJAX using CSS.
• Grid Designer - Creates grids without having to waste time creating them manually.
• CSS Text Wrapper - Ever thought about making shapes with text? Then this tool is right for you.
• Collaborative Javascript Debugging - Test live JavaScript with HTML and CSS context
• Fixed Width CSS Layouts - Stop wasting time creating your own layouts, instead use one of these.

Enjoy

-Andrew Wayman

Tags: best css tool, best css tools, CSS, css admin tool, css authoring tool, css authoring tools, css debug tool, css decoder tool, css design tool, css developer tools, css editing tool, css editing tools, css examples, css layout, css layout tool, css layout tools, css properties, css style sheet, css style sheets, css stylesheet, css tool tips, css top, css training, css tutorial, css tutorials, css validation tool, free css decoding tools, html css, tools for css, xhtml css

This entry was posted on Monday, February 16th, 2009 at 9:14 pm and is filed under CSS, Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.