1 Excellent Overview

Excellent article, Jeff. I think that the other frameworks get covered often (JS and Rails, Django, Cake) – but the Y!UI library and others don’t seem to get as much exposure. I think design has a completely different need, but the same principles apply (just as you said you didn’t use Yahoo due to specific needs). I like to keep it simple, as you have shown, then override where necessary (same as if you were using any other framework).

Thanks for sharing some insight into your construction. I would be interested to see more on the baseline grid for your typography – do you include all block level elements, or target specific ones to set the margins/line height? I’ve found this to be tricky when you have images that can be different dimensions – but I love how the grid comes together and everything lines up.

posted at 06:10 am on June 12, 2007 by Nate Klaiber

2 Untitled

Larger web development companies benefit from centralized framework more in updating hundreds of sites in a hurry. Updating CMS or other functionality in dozens of sites at once might be a recipe for catastrophe. Centralized frameworks in templates and css can make this process a lot more straight forward and orderly.

With new browser versions popping up now than maybe ever before, the need for stable process is lifesaver for site managers.

Frameworks also help getting new employees up to date with company’s development standards fast.

posted at 06:17 am on June 12, 2007 by Lasse Larvanko

3 a single style sheet is most always better

Unless you are dealing with a really large stylesheet, handling everything in a single stylesheet is the preferred method. Switching between files is a hassle – working with one file is easier for everyone.

A good way to divide sections within the single stylesheet is naming your sections and putting an equal to character in front of your sections, so you can easily check your sections by querying ”=”, or ”= footer” if you wanted to get to the footer section.

The reason you want all your declarations in a single css file is that am element might have two different declarations in two css files, causing confusion about the inheritance. If you have a single stylesheet you have a clear view which element inherits the properties you defined.

If you can deal with inheritance, and have a text editor that supports searching in multiple files at once, multiple stylesheets may be the way to go, but then again there’s stil the disadvantage of multiple HTTP requests.

I work with 4 stylesheets: screen.css, print.css, ie6.css and ie7.css (last two included with conditional comments).

posted at 07:06 am on June 12, 2007 by Johan Ronsse

4 How many lines of CSS do you really reuse?

The framework strategy is mainly useful when you’re dealing with multiple sites all under one roof. With a project that is unique in design and its’ goals, the markup usually differs from a previous project (or your “framework”).

What you can reuse most of the time are actually just a few browser reset rules. If you take a vertical rhythm into account, setting default white-space doesn’t make much sense, since it heavily depends on font sizes and line heights of various content units across the page (you are not using the same font family and font sizes over and over, right?).

Sometimes overriding rules leads to a bloated CSS file of more than 2000 selectors. However, if you have to develop another web site within the same brand, creating a framework is actually worth spending time.

posted at 09:46 am on June 12, 2007 by Marko Dugonjic

5 Frameworks for Designers

“How should a CSS framework be built?” Method that You describe works quite well i know that it adds to the number of HTTP connections needed to render each page but I agree that large, high-traffic sites, adding five more HTTP connections to every page view may result in angry system administrators so thanks for some solutions on that.

posted at 10:29 am on June 12, 2007 by Thomas Ezolt

6 CSS caching

Good article, Jeff.

I’ve been working a lot lately on social media site projects using the Drupal core and modules. It takes some digging to find Drupal themes with minimalist markup, good semantics and something resembling your CSS framework.

I’ve found that the Foundation theme, available in Drupal’s theme library, is a good “starter kit.” It isn’t cruft-free but it’s close, and very easy to shape as a UI designer sees fit.

I’ve also found Drupal has a handy feature—the ability to combine and cache multiple CSS files into one server call per page, much as you describe. It does save a few ticks, and that kind of functionality would be handy alongside your CSS framework.

I’d love to see a Drupal theme developed with your CSS approach. Maybe someday, in my alleged spare time…

posted at 11:36 am on June 12, 2007 by Jay Small

7 Fantastic

Great stuff, Jeff, this technique will surely make it more enjoyable to create CSS files.

Maybe you should release a version of LJWorlds framework as a sort of light-weight alternative to the Yahoo package, which is quite bloated? :)

posted at 11:45 am on June 12, 2007 by Olav Bjørkøy

8 Optimized and Organized

I hope I’m not stating anything dreadfully obvious here on the whole optimize vs organize subject, but you could import your sheets as one flat sheet with PHP, no fancy script required:

In base.css: <?php include(“reset.css”); include(“typography.css”); include(“structure.css”); ?>

This should dump the content of all your sheets in your base sheet verbatim. If I understand correctly (programming is not my forte) this should reduce the HTTP connections to your single sheet. Maybe some more knowledgeable folks could enlighten us to possible caching issues/solutions?

Thanks to (fiftyfoureleven for confirming my suspicions.)

One more note, if your server won’t parse a CSS file as PHP, just name it base.php and import it as such into your XHTML.

posted at 11:48 am on June 12, 2007 by Gordon Brander

9 From the Obvious Department

The entire article could be summarized like this:

“Frameworks are good, don’t repeat yourself, save some time, make your life a bit easier. It’s what I do.”

Great, now how about giving those new to the notion of design frameworks something they can actually use? I agree with the use of frameworks for design, but I think it would be far more valuable to the reader if you offered deeper examples and previous successes.

These ALA fluff pieces are absurd.

posted at 12:34 pm on June 12, 2007 by Michael Thompson

10 Enjoyable Article

Two things.

1. Folks, no need to point out that extra CSS files increases HTTP connections – that was mentioned and addressed in the article. If your offering solutions, (Gordon) then that’s awesome. But to the others, no need to be snitty.

2. @Michael: I agree that a more in-depth look at examples would have helped, but you have to take into account how much space this guys has. He can’t write a book on the subject.

This could make a great website – a listing of frameworks – anyone know one? I’m actually interested in a list of them for some odd reason.

posted at 01:02 pm on June 12, 2007 by Neil Kelty