Saturday, March 5, 2011

10:32 AM

CSS is the essential component of modern web design. But writing the CSS code from scratch for each web design project is a tiring and time-consuming job. Here are 15 CSS tools ranging from layout generators, form generators to code compressors that will save you a lot of time writing the CSS code for your next web design.

1. CSS Typeset

CSS Typeset is a handy tool that allows to test different font-styles on a piece of text and provides with the CSS code for chosen font-style that you can copy paste into your stylesheet quickly.

2. TypeTester

TypeTester is similar to CSS Typeset but with this, you can compare three different font-styles simultaneously and choose the one you find suitable. It also lets you specify the base font-size to adjust the em values.

3. CSS Frame Generator

CSS Frame Generator generates an empty CSS frame for provided HTML elements. Just copy paste the XHTML content and it’ll create a CSS Frame and then you can add styles to the CSS frame which will save you a lot of time.

4. CSS Grid Builder

With CSS Grid Builder, you can quickly create a CSS-based, standards compliant web page layout. It uses the YUI Grids CSS framework which supports more than 1000 types of layouts.

5. YAML Builder

YAML Builder is another layout generation tool that uses YAML framework to create grid layouts.

6. Spiffy Corners

Spiffy Corners lets you create rounded corner flexible boxes without any images. With just few clicks you can add nice looking rounded corner box to your web page.

7. JotForm

JotForm makes creating HTML forms a breeze. With its Visual drag drop interface, you can quickly create HTML forms. Also there are pre-built templates like registration form, feedback form which you can use to set up your web forms in almost no time.

8. Kotatsu

Kotatsu lets you easily and quickly create HTML tables and attach CSS classes to rows, columns and cells of table.

9. CSS Sprite Generator

CSS Sprite Generator is a big time saver. Just upload a zip file containing all the images you want to convert into CSS sprite, it’ll not only create the sprite image but will also provide you with CSS styles which you can quickly use in your web page to utilize CSS sprites.

10. W3C CSS Validator

W3C CSS validator is perhaps the most widely used CSS validator. It is a great time saver in the sense as it points out various errors within your stylesheet so that you can create better and more accessible web pages.


grant said...

Compass & Sass blow all of these away