10 Unbelievable Online CSS Tools To Make Your Designing Life Easier

CSS layouts that display the same in all major browsers had been a real headache for designers some years ago. Especially when it came to test it on Internet Explorer and it's different versions. One hack that worked well on IE6 did not work the same on IE7 etc. This was the case untill CSS frameworks appeared. Now it is easier to create layouts that look the same on nearly all major browsers and on IE's versions too.There are also some tools that make the process even easier. Here is a little list of 10 excellent online tools that will assist you on creating versatile layouts.

1) YUI CSS Grid Builder

Part of the YUI, the Grid Builder is a simple interface that allows you to create and customize complex layouts as shown in the image above with minimum code. For example the code needed to create the above layout is: [code lang="html"] "http://www.w3.org/TR/html4/strict.dtd"&gt; <div id="doc" class="yui-t1"> <div id="hd"> <h1>Jeez Aggressive Technology</h1> </div> <div id="bd"> <div id="yui-main"> <div class="yui-b"> <div class="yui-gb"> <div class="yui-u first"><!-- YOUR DATA GOES HERE --></div> <div class="yui-u"><!-- YOUR DATA GOES HERE --></div> <div class="yui-u"><!-- YOUR DATA GOES HERE --></div> </div> <div class="yui-gd"> <div class="yui-u first"><!-- YOUR DATA GOES HERE --></div> <div class="yui-u"><!-- YOUR DATA GOES HERE --></div> </div> </div> </div> <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> </div> <div id="ft"> An example layout </div> </div>[/code] The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Other features include:

• Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
• Supports easy customization of the width for fixed-width layouts.
• Flexible in response to user initiated font-size adjustments.
• Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
• Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
• Layouts less than 100% are automatically centered.
• Accommodates IAB's Ad Unit Guidelines for common ad dimensions.
• Offers full A-grade browser support.

2) YAML Builder

The Builder is designed for rapid development of CSS layouts, that are based on YAML. Yet Another Multicolumn Layout is a highly versatile (X)HTML/CSS framework, released under Creative Commons Attribution 2.0 License (CC-A 2.0) and can be downloaded at yaml.de/en/. This one is a state of the art tool. It is more complex than YUI Grid Builder described above but it surely worths it. Creating neat layouts is a piece of cake with YAML Builder. For example, the above layout, looks like this:

3) Telerik Visual Style Builder

The Telerik Visual Style Builder is a web-based, fully functional CSS customization tool that enables easy, point-and-click customization of skins for the RadControls for ASP.NET AJAX. This tool eliminates the need to understand the front-end HTML and CSS structure of the RadControls to create custom skins. It gives you complete control over the elements of the RadControls’ skin and allows you to create your own custom skin in minutes. This is an awesome tool for ASP.NET developers. Maybe the easiest way to create skins for the RadControls skin. It also can come handy to all other designers that need ready made styles and images for controls like calendar or menus.

4) iStylr

The iStylr, an online application that enables you to easily create, edit and share tableless css designs online. It lets you im- and export almost any website and allows you to create themes on the basis of other people's designs. You can create custom designs for CMS's like:

• Nexecutive
• Aos
• Wordpress
• Joomla
• Drupal
• Typolight

and ordinary templates.

5) Grid Designer

Grid Designer is a plain simple tool to help you create solid layouts. You can set columns, typography and export the HTML and CSS code. You can even bookmark each design and come back and edit it later.

6) Drawter

Drawter Beta 2 is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw 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. Currently Drawter is available in Pro version, which means that it is intended for webmasters use only - knowledge of HTML and CSS is required. It also requires at least 256MB RAM and 800Mhz CPU. Drawter is not a tool for laymen, for the time being, but the whole team behind the project is putting every effort to launch a new version called "Amateur". Soon you will be able to draw your websites without any knowledge of HTML or CSS. Launching soon, really soon.

7) QrONE

Page WYSIWYG editing of CSS style sheets. It can preview your CSS real-time and is ideal for learning CSS.

8) CSS Grid Calculator

A simple tool to help you create grids and calculate column widths etc

9) Construct Your CSS

Create simple or complex layouts with less effort.

10) Blueprint Grid CSS Generator

This tool will help you generate more flexible versions of Blueprint's grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.