Jump-start Your Development With CSS Frameworks

Published April 14, 2008 by Guest Author.

Scott Phillips is a web developer working at Drake University in Des Moines, Iowa.

Do you get a feeling of déjà vu every time you begin a new web project? Do you smack your forehead trying to remember the best way to get something to render correctly in IE6? …again? Do you refer back to old sites when choosing font-families and sizes?

There is a better way.

Learning how to wield the mighty powers of CSS is important, but you don’t have start coding from scratch every time. CSS frameworks can save a lot of time and even make your site look better in the end.

What’s a framework?

CSS frameworks are like Legos. Combine their simple building blocks in thousands of different combinations to create a clean and usable layout for your site. Once these basic elements are in place, go wild adding your own custom headers, footers, backgrounds, bullets– whatever you’d like. All of the frameworks discussed in this article include support for multi-column layouts and readable typography. Some go further with classes for design elements like navigation menus, pull-quotes, lists, forms, and more.

How do I use them?

Generally speaking, all you need to do is add the framework’s classes to certain XHTML tags and include the needed CSS files in the header of your document. In a matter of minutes you’ll have an attractive (yet basic) layout. Of course, each framework has it’s own documentation, examples, and tutorials.

Pros

  • Save time. This is the biggest advantage of using frameworks. They give you a huge head-start on your CSS. All of the tedious/boring stuff is done, freeing you to spend time on more creative things.
  • Best practices. Many talented developers contribute to frameworks. Take advantage of their expertise. For example, the hot topics of Grid-based layouts and vertical rhythm are concepts borrowed from the print world. Even if you aren’t totally sure how they apply to the web, CSS frameworks can help you take advantage of them.
  • Cross browser support. Convincing different browsers to render a design consistently has always been a pain. Frameworks have built-in fixes for the worst offenders.

Cons

  • Not always semantically meaningful. A basic tenant of good web design is to separate presentation from content to produce readable and maintainable code. CSS frameworks require compromises that may get the purists among us a little upset.
  • Bloated code. Do you really need support for 24 columns when you only use three? Probably not. In reality, however, the file sizes of all of these frameworks are reasonable. You could always strip out unused portions is file size is a really big concern.
  • Don’t use it as a crutch. It’s important to understand what is happening under the hood of a framework. Each one has a learning curve. You’ll need to spend time understanding how they are built, their strengths and weaknesses, and how to customize them.

Popular Frameworks

Blueprint CSS

Blueprint CSS is my first choice in CSS frameworks. It is lightweight, easy to understand, and produces very attractive grid-based layouts with minimal effort. In addition, its typography choices (everything from headers to lists and addresses) are readable and attractive. It’s not perfect, however. Although Blueprint wasn’t the first one available, it has generated a lot of buzz and developed an active community since it’s release in August 2007. There is currently no built-in support for flexible-width layouts. I’ve found at least one online Blueprint CSS editor, but it’s not nearly as nice as the YAML’s (see below).

YUI Grids CSS

The Yahoo User Interface (YUI) library is a set of controls and utilities for creating rich interfaces for web applications. It is aimed primarily at the Javascript + Dom Scripting + Ajax crowd. A subset of the library essentially constitutes a CSS framework when used together. They are Grids CSS, Reset CSS, Base CSS, and Fonts CSS. YUI has been criticised having bloated code and requiring too many extra DIV tags. On the other hand, these are the very same libraries that Yahoo uses for some of their own large projects so they must be solid. Beyond the standard documentation, those of you with longer attention spans may want to watch the author, Nate Koechley, give a 42 minute overview presentation.

YAML

Yet Another Multicolumn Layout (YAML) is yet another framework worthy of serious consideration. In fact, it may become my go-to framework in the very near future. YAML hasn’t received the amount of attention that some other frameworks have due to the fact that it was originally written and documented in German. It should not be overlooked. A few of its many strengths include a focus on fluid layouts, exceptional documentation, and the truly impressive drag-and-drop YAML Builder.

960

960 Grid System is a newcomer to the scene. It is very similar to Blueprint but has different design considerations like wider margins. 960 also lacks a number of features that the author considers unnecessary (like a baseline font size). 960 includes printable grid paper and template files for Fireworks, Photoshop, OmniGraffle and Vision. Even if you don’t use the framework, these will make a handy edition to your web design arsenal.

17 Responses

  1. mooty (reply)

    sounds interesting but I find it much quicker and easier to write the css from scratch based on each design. Each design I do is different (more/less columns/diff widths/dif divs) so I need to rewrite the code for each.

    I wouldn’t suggest css newbies look into these either, maybe as a learning tool though. CSS does take a bit of time to master, even though its relatively easy to reach competency.

  2. Mike from Cincinnati Ohio (reply)

    I agree with the above comment from Mooty. I would suggest however that css newbies did what I did, which was to create a set of layouts all at once as an exercise. I created about 12 or so layout designs for any site, they have a header footer side bars and three side bars content holders etc… They also have png fixes for IE and hover fixes as well for navigation bars and special anchors I want to create… This way I have a baseline that I know and am familiar with so that when I need to look at the layout options on a site, I can present my client with a few different idea’s and let them choose which version they like the best.

  3. Paul (reply)

    Thanks for the article. What about compass? From the video on it I saw it uses blueprint(and maybe others) but gets rid of the con “Not always semantically meaningful. A basic tenant of good web design is to separate presentation from content to produce readable and maintainable code. CSS frameworks require compromises that may get the purists among us a little upset. ”

    It makes you learn some non CSS code to create CSS so that might be a turnoff, but it sure looks powerfull, and quick.

  4. Pingback: Modern CSS Layouts, Part 2: The Essential Techniques | i know idea

  5. Pingback: Modern CSS Layouts, Part 2: The Essential Techniques « 完美WP

  6. Pingback: Modern CSS Layouts, Part 2: The Essential Techniques « Defonic International Solutions

  7. Pingback: Modern CSS Layouts, Part 2: The Essential Techniques

  8. Pingback: Modern CSS Layouts, Part 2: The Essential Techniques | Best Web Magazine

  9. Pingback: Modern CSS Layouts, Part 2: The Essential Techniques - Smashing Magazine

  10. Pingback: Modern CSS Layouts, Part 2: The Essential Techniques - Goodfav Howto

  11. Halo Nevus (reply)

    You could definitely see your skills within the article you write.
    The sector hopes for even more passionate writers such as you who
    are not afraid to mention how they believe. At all times follow your heart.

    Visit my page – Halo Nevus

  12. antalyaciceksergisi.com (reply)

    Each new age brought the criminal element forward with it.

    As the culture of internet slang grew, it took on new origins from pop culture or video
    games and television. Efficiency: Many carriers provide multiple receive emails,
    so your fax messages are automatically delivered to whomever you
    intend.

  13. hormigon en illescas (reply)

    Undeniably believe that which you stated. Your favourite
    justification seemed to be on the net the simplest
    thing to be aware of. I say to you, I certainly
    get annoyed even as people consider worries that they just do not understand about.
    You managed to hit the nail upon the top and defined out the whole thing with no need side
    effect , folks could take a signal. Will likely
    be again to get more. Thanks

  14. hormigon en talavera (reply)

    I think this is one of the most vital info for me.
    And i am glad reading your article. But wanna remark on few general things,
    The website style is perfect, the articles is
    really excellent : D. Good job, cheers

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>