Aarron Walter » CSS

Blueprint: A Practical CSS Framework

Aarron — Sat, 11 Aug 2007 13:48:32 +0000

There’s a fair bit of tedium and redundancy that goes into the set up of a new site. Most web designers start with the same tasks like reseting all default margins, padding, and other values to a common baseline for cross-browser support, you define your layout, wrestle with type, maybe even set up a print style sheet. We often find ourselves repeating what we’ve already done many times over on other projects. Blueprint, a recently released CSS framework created by Norwegian student Olav Frihagen Bjorkoy, seeks to eliminate this common tedium by providing a concise set of style sheets that make setup and design quick and easy.

If you are unfamiliar with the concept of a framework, you can think of it as a base structure of prefabricated code utilities that function both as a toolbox and a skeletal structure for a project. Many great frameworks have been created for both client-side (Prototype, Dojo, JQuery) and server-side development (Ruby on Rails, CakePHP, Code Igniter), and have revolutionized the way web applications are built. The goal of a framework is to allow you to concentrate more on the project concept and mission rather than micro-focusing on the details of the inner pinnings of the code.

That’s exactly what Blueprint delivers for CSS design. It brings together the solutions from many recent articles on grid-based layout, page rhythm, print style sheets, and typography and packages them neatly into a practical system with a low learning curve. By default, Blueprint creates a flexible 14 column grid to guide your layout. Using very simple class combinations, you can define the size of a div to span any number of horizontal units in the grid. For example, a div like the following will span 5 units of the grid and will sit on the right side of the layout.

...

Blueprint also creates flowlines that define the type baseline, and create a uniform rhythm to the page. Background images can be turned on to draw out the grid columns and flowlines as guides while refining your layout.

Although still undergoing refinements to create consistent cross-browser support, Blueprint is in a relatively stable state for project development. If you’re curious about the story behind the project, check out Khoi Vinh’s recent blog post on the subject, which includes an interview with Olav Bjorkoy, Blueprint’s creator.

Visible Design Evolution

Aarron — Sat, 25 Nov 2006 20:11:13 +0000

I’m usually averse to blogging about things that are already hot topics of everyone else’s blog, but I think all of my students who read this blog should take a look at this recent post on Ajaxian. A web designer took a screen shot after adding content to a page or modifying the CSS, revealing and interesting look at the evolution of the web page development process. The screen shots are rolled into an animated Gif to show the design through time.

Yahoo! UI: Reset Style Sheet

Aarron — Sun, 19 Nov 2006 20:03:10 +0000

Yahoo! has a really nice style sheet that will reset all browser default rendering of padding, margins, fonts, etc. so you can build your style sheets for projects on a level playing field. This is going to prevent a lot of (though not all) cross-browser formatting issues as all browsers will get the same design instructions rather than inheriting default browser styles. Yahoo! has already done all of the cross browser testing to ensure that their reset style sheet forces all browsers to start on a consistent base.

CSS Layout Library

Aarron — Tue, 31 Oct 2006 18:19:26 +0000

Dynamic Drive has put together a nice collection of common CSS layouts that demonstrate positioning and floating methods. There are other collections that have been around for some time, but this one seems to have more variety than most. It’s a great way to learn about CSS positioning.