14 CSS Tools to Save you Time

Posted by Brett in CSS, Tools

Tags: buttons, CSS, font, Forms, generators, Navigation, Tools

Apr

As a web designer/developer you must continue to find ways to reduce the time it takes to design/develop websites. This is very important to improve your productivity and to maximize your profits. The CSS Tools below, which are categorized by function, are here to save you time designing websites.

Optimizer/Formatter

CSSTidy - CSS Tidy is an open source CSS parser and optimiser.
CleanCSS - CleanCSS is a powerful CSS optimizer and formatter. Based on CSSTidy
CSS Optimizer - CSS Optimizer reduces the file size of cascading style sheets.
CSS Analyzer - CSS Analyzer allows you to check the validity of your CSS against the W3C’s validation service

Font

Em Calculator - EM Calculator calculats pixel font sizes to ems.
CSS Font and Text Style Wizard - This wizard is good to experiment with font and text styles and generate sample CSS style source code.

Forms

CSS Form Code Maker - Generates ‘Colorful Box Layout’ For Forms
JotForm - JotForm is a web based WYSIWYG form builder

Navigation/Buttons

CSS Buttons - Css Button and Text field Generator.
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.

Generator

CSS Creator - Css Creator is a layout generator that will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer.
QrONE CSS Designer - QrONE is an online CSS generator and editor.
Web 2.0 Generator - Web 2.0 Generator creates a full website layout with HTML and CSS.
CSS Mate - CSS Mate is an online CSS editor.

If you have any more tools that could help you save time then please comment below.

Popularity: 42%

I hope you enjoyed reading this article. You may subscribe to my RSS Feed, scroll down to leave a comment, or get back to the homepage.

25 Web 2.0 Generators
List of CSS Frameworks
Convert HTML to a ASP, PHP, or JSP Variable
Add Style to your HTML Tables
List of Google Analytics Alternatives

Add to

37 Users Commented In This Post

Subscribe To This Post Comment Rss Or TrackBack URL

Edwin says, April 7th, 2008

About the css-optimizers: I don’t like them. Better write your code good yourself, so you don’t need them…

Edwin says, April 7th, 2008

Sorry, maybe a little bit a negative reaction… And no edit-function :p for the rest it’s a good list, I am just sceptical about those optimizers

CSS Mates says, April 8th, 2008

Hey,

Could you add http://www.cssmates.com to the list, its an awesome cs tool aka forum

Thanks

Ivan says, April 8th, 2008

typetester.maratz.com would be great addition to this list, very nice tools for trying different font faces and styles.

Johannes Neumeier says, April 8th, 2008

Thanks for sharing

I think the first 4 are the essentials. Can’t imaging using any of the others really.

Jeff says, April 8th, 2008

Firebug for Firefox:

http://getfirebug.com/

Brett says, April 8th, 2008

Thanks everyone for the comments. I will check out the links that you posted and add them to the list.

Jan says, April 8th, 2008

Hello everyone,

I build a calculator to easily generate a whole typeset with including line-height in px and em for your website. You can find in at: http://www.jan-quickels.de/tools-web-typography/

In a coming version I´ll generate the css-code automatically.

Hope it is helpful to some of you–just check it out!

Phoenix2Life says, April 8th, 2008

Thanks, this is a great set of CSS tool set. Looks like you have prepared this list from regular use of these tools. I am guessing this from the neat categorization of toolset. I am all in for CSS Optimization and CSS generation tools. Cool..

Andy Ford says, April 10th, 2008

I second Firebug. I’m a full time css developer, and Firebug is a major part of my work. Inspecting html elements and seeing the style cascade (with filename and line number) is a huge time saver. Not to mention the ability to edit the css on the fly so you can experiment with styles on live sites.

Speaking of FireFox plugins, the Web Developer Toolbar is also extremely helpful and the Screengrab! plugin is pretty handy too.

Also, why no mention of any CSS frameworks? Certainly those are tools to save you time. While I personally prefer to cherry pick bits and pieces of both BlueprintCSS and the YUI css files rather than use them in their entirety, they have quite a following and are extremely useful in whole or in part.
http://code.google.com/p/blueprintcss/
http://developer.yahoo.com/yui/

Eric Meyer’s css reset is also quite helpful
http://meyerweb.com/eric/tools/css/reset/

CssEdit is also a really nice CSS editor for the mac. Lots of time savers built into it.

I just ran across this the other day:
http://lab.xms.pl/css-generator/
You paste in html markup, and it generates a style sheet with all the id and class based selectors from your markup. Honestly I haven’t put it to good use yet, but some might find it really handy.

cheers!

Brett says, April 11th, 2008

@Andy- I haven’t used any CSS Frameworks other than Eric Myer’s reset. I will check out the links and look at some of the frameworks. Thanks for visiting and commenting.

Maxxu says, April 20th, 2008

Great resources, but just like Edwin, I don’t use CSS Optimizers. I have a certain way to arrange the CSS code; this way I know where to go when I need something.