The Crafty Coder’s CSS Toolbox

By   |  Stashed in Tools & Resources

Someone once said, ‘Style is all that matters.’, and if they didn’t, they should have. Mainly, because it would help make my point a little better, but also because the style applied to a design is one of the most powerful tools of an effective website. People are drawn in by design. Something immediately catches their eye, although it may take time for them to fully appreciate the entire site.

Now, I know the old saying that you can’t judge a book by its cover, and our society pushes us away from the shallow assessments we make about a person based solely on their appearance and with good reason, but when it comes to design, we do judge the look. The style that attracts us. Moves us. Encouraging us to explore the full depth of the design with all it has to say. And it all starts, with a look. A look that on the web is more often than not, crafted and applied through CSS.

CSS is one of the main components that drive web designer’s work home in exciting and stylistically individual ways.  Ensuring that you have a deep and well stocked kit of CSS tools and resources is vital for keeping you ahead of the styling curve. Below is an awesome array of various toolbox additives that you can sort through to start building your own toolbox, or to add to your existing one. So whether you are just getting started in the CSS arena, or you have been haninging your hat there for some time, you are sure to find a useful tool or two in the assemblage I have gathered here.

General Tools

To get things started, I thought we would dive right into the general, all purpose section of the toolbox. A solid foundation is always beneficial before you start building towards specifics.

Conditional CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.

CSS Frame Generator – If you need a frame for your CSS work in a hurry, don’t worry, just turn to the trusty CSS Frame Generator. It’s all right there in the title.

CSS Sprite Generator – CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

CSS Menu Generator has a large selection of menus that you can customize and download the image, html & CSS.

CSS Menu Builder is another instant menu site with tons of options.

CSS Form Code Generator generates CSS layout code to spice up your forms.

Primer undercoats your CSS by pulling out all of your classes and id’s, and placing them into a starter stylesheet.

Listamatic shows the power of CSS when applied to one simple list. You can find out how to do pretty much anything to a list here.

Deploy is a free, open source, web application which allows users to quickly deploy a web project framework with valid XHTML and CSS in only a matter of seconds.

Typography

Typography is a large part of most web endeavors, and is certainly getting a lot more attention than it used to. Make sure that you keep your type tools stocked and tight so your style doesn’t fall flat in this critical stage.

CSS TypeSet allows you to quickly and easily scan through and decide on any number of typographical CSS options for your project, and view the selections and alterations you make in real-time. Then, once you have found the settings that work for your project, the CSS code is given to you.

TypeChart lets you flip through, preview and compare web typography while retrieving the CSS.

Em Calculator is a small JavaScript tool which helps you make scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on text size.

CSS Font and Text Style Wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.

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.

Optimization and Validation

Naturally when you are working on your coding projects, you are going to want to take the extra time and effort towards optimizing your code and making sure that it validates. It’s the little things that show how much you care.

MinifyMe is an Adobe Air application that will compress your CSS and Javascript into one file.

CSSTidy is an opensource CSS parser and optimizer. It is available as an executable file (available for Windows, Linux and OSX) which can be controlled per command line and as a PHP script (both with almost the same functionality).

CSS Analyser allows you to check the validity of your CSS against the W3C’s validation service, along with a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.

CSS Validator is the W3C official CSS validator.

CSS Sorter is a free online tool for sorting CSS files. It organizes CSS rules alphabetically so that it will be easier for you to maintain your CSS files.

Frameworks and Grids

It is hard to talk about CSS without talking about two very useful aids, frameworks and grids, and some would say it is impossible to do so. Since I didn’t try, it is hard for me to remain objective. But look, framework and grid related tools a plenty.

Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.

Bluetrip is a full featured and beautiful CSS framework which originally combined the best of Blueprint, Tripoli (hence the name), Hartija, 960.gs, and Elements, but has now found a life of its own.

Blueprint gives you a solid foundation to build your project, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

YUI 2: 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.

960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Grid Designer is just that, a fantastic site for designing your own custom grids to use in your CSS stylesheets.

Variable Grid System is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

Browser Tools

I thought I would wrap up with a little bit of toolage for transforming your web browser into a powerful developer tool in and of itself. Always a handy set of implements to optimize and trick out your web browsing and debugging experience.

Collection of Web Developer Tools, per Browser seeks to list the best tools available and quickly describe how to activate/install/use them.

That’s a Wrap

I hope that gets you started or moves you along a little farther in compiling and putting together your very own CSS toolbox. Feel free to add your favorite tools for CSS’ing in the comments below to help others build on from here.

About the Author

Rob is an emerging author, celebrated podcaster and poet, and is an author and freelancer for Arbenting Freebies and Dead Wings Designs.

More posts by

Website   

  • http://francoaverta.com.ar/blog/ Franco

    Thanks Rob, I didn`t know most of this resources till now. Great Toolbox!!!

  • http://www.chillybin.com.sg Shaan Nicol

    Great list of resources thanks!

  • http://staszek.sokolowski.me/ cf

    Great selection! Thanks for sharing with us.

  • http://all-for-design.com Auré

    Waho, great list thanks for sharing :)

  • http://www.franklyfranklin.co.uk/ Tim Ngwena

    Love it !!

  • http://richworks.in Richie

    Thats one gigantic and resourceful list. I just cannot get enough out of CSS :) Bookmarked without a second thought.

  • http://www.newgadgets.com New Gadgets

    Great resources for a newby designer like me. Thank you!

  • http://www.reparatiifrigidere.com.ro Reparatii Frigidere

    Thanks a lot for this. Everything I need in one place :)

  • http://deadwingsdesigns.com Rob Bowen

    Hey everyone, glad that the post is useful for ya!! Thanks for the kind words.

  • http://www.creationsdunet.fr daniel

    Not to mention, a very useful article!

  • http://psdcollector.blogspot.com henri

    TypeChart is very useful tool.

  • http://inspiks.com loswl

    Very nice tool, I see some that I will use, never knew about most of these, thanks a bunch :)

  • http://www.digitalartempire.com Digital Art Empire

    definetly gonna go through these one by one – the pennies are dropping more and more these days with me and CSS = cheers Mr Bowen

  • http://www.juengerconstruction.com David

    great stuff. thanks for putting this together, rob!

  • elwalt

    Thank you for such a comprehensive site

  • http://drummy.org Paul

    Really great collection here. Awesome!
    One funny thing though:
    The CSS Shortener thing made my test CSS file bigger. It increased whitespace for example. Made line-breaks were I hadn’t made any.

  • http://www.fotogeschenk.org Fotogeschenk

    That is a really useful collection for everyone who is interested in design. Thanks a lot!

  • http://www.sjlwebdesign.co.uk SJL Website Design

    Awesome collection of resources, I have hardly used any of these.
    Looking forward to trying some them out, thanks.

  • http://www.driversoftwareupdate.com James Khan

    Superb list. Thanks Rob.