CSS Frameworks have been a hot topic the past few months. Although they've been getting a lot of heat from semantic freaks and minimalists (for adding unnecessary code), I think they're a step forward. As I've said before, web design is about doing things quickly and beautifully. No matter how you feel about frameworks, it's undeniable that they speed up the design process. I'm a fan.

With this in mind, I searched everywhere for every snippet of every framework I could find. I've tried 960.gs, Blueprint, LogiCSS, YAML, Elements, YUI, and Boilerplate, among a few others. I even discussed the pros and cons of each of them. Finally, I decided to combine the good points of each of them to get something that I was satisfied with. Since most of it came from BlueprintCSS or Tripoli, I'm calling it BlueTrip. Why not?

Let me preface this by saying that 90% of the code in BlueTrip is not mine. I've pretty much taken the entire grid from Blueprint (with a bunch of my own changes) and the entire typography from Tripoli (with a bunch more of my changes). I don't intend for this to be on the same level as those guys...it's just what I've made for myself and I thought someone else might like to take a look. Now let's have a look.

VIEW THE DEMOS
- Typography Demo
- Grid Demo

DOWNLOAD IT

Things taken from BlueprintCSS:
- The grid - 24 column grid with a few of the class names changed around
- A couple plugins (fancy type, external links, and buttons)

Things taken from Tripoli
-The form elements - I like not having to add class="text" to them.
-Most of the typography - I like the greater line spacing and everything just looks a little cleaner.
-The tables - Padding is good.
-The blockquotes - Very dramatic looking.

Thing (just one!) taken from 960.gs
-Naming conventions (especially prefix and suffix rather than prepend and append)

Grid Usage

First things first, go into "screen.css" and change the reference to "yourwebsite.com" to the actual URL of your website.

Then, make sure you link to the correct stylesheets:

Then, surround all of your content with a div class="container". Or, if you'd like to view the grid in the background to assist in design, make it div class="container showgrid".

Now, you can do pretty much anything you want. Just like Blueprint, set the width of a div using class="span-XX" where XX is the number of columns you want that div to occupy. If you want to add empty columns to the beginning of a column, use class="prefix-XX" instead of prepend, or if you want them on the end, use class="suffix-XX" instead of append. I kept finding myself trying to remember if append came before or after, so I changed it.

Whenever a column is the last column in a row of columns, make sure to add class="last" so that everything lines up correctly. That's pretty much it. Here's a more complete example:

For some more usage instructions, view the source code of the grid demonstration (link above).

Typography Usage

Most of the typography will work itself out. I've added Blueprint's pretty links plugin, so external links, or special links (such as pdf's, doc's, rss feeds, etc.) will get a little icon next to them so users know what they're clicking on. Forms should also prettify themselves without any extra work from you. Tables, blockquotes, all that good stuff is also styled sensibly by default (thanks to Tripoli).

I've also kept Blueprint's status messages, so adding class="success" or class="notice" or class="error" will get you some really clean looking status messages to use. There are a few other text classes to take a look at, and you can use them all or ignore them completely if you don't think they're necessary. I liked them, so I kept them.

Adding Your Own Styles

Do not change any of the three stylesheets, because that will make upgrading to later versions a pain. I've included a "style.css" that's more or less empty so you can make your own changes to it, overriding anything that's in BlueTrip or adding things.

And that's that. I've included the license (GPL or MIT) so feel free to do whatever you want with it.

Once again, I won't flatter myself into thinking that this is a full fledged CSS framework. It's just a combination of the EXCELLENT work of others all rolled into one neat little package. If you think it's too much, then go check out Boilerplate or something a little more minimalistic. I knew what I wanted, and I thought there was a chance that perhaps somebody else was looking for the same thing. I hope you found something you liked.

Please let me know if you try it out and find bugs or have recommendations!

This entry was posted on Wednesday, April 30th, 2008 at 9:59 am and is filed under BlueTrip, CSS, Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.