Everybody else has been writing about the Blueprint CSS framework lately, so I decided I would too. In my case, I have spent several hours using it to create a layout for a customer, and in the process, I feel I have learned a lot about Blueprint’s current strengths and weaknesses, and a little more about CSS best practices as well.
I say current, because although Blueprint is quite usable right now, everything I say should be tempered by the fact that the current release is 0.4, with 0.5 coming very soon. Many fundamental code design issues (such as pixel vs. em based layout) are still being debated and fine tuned.
If you’re like me, the idea of a CSS “framework” may sound odd but intriguing. Blueprint cleverly resets browser defaults, automatically sets professional looking typographic styles and uses an image of a layout grid as the page background during the initial design phase. Along with an intuitive approach to specifying styles that work with this grid, I would say that anyone with a basic knowledge of HTML and CSS can begin productively using Blueprint within a half hour and make better quality layouts as a result. That’s damn impressive.
Even more impressive is how Blueprint does this under-the-hood. Blueprint consists primarily of just a few CSS files that can be injected into an HTML template with just two <link> tags in the document head. These CSS files are very logically implemented, so that a quick look at them is actually quite instructive in the areas of CSS positioning, cross browser issues, and the finer points of text formatting.
I learned basic graphic design formally in the days before the Web, and worked for a few years in a job with a design component. When the Web emerged, I learned each best practice of the day, including such things as spacing with single pixel gifs (remember those?) and of course, tables. But, graphic design has always been a secondary part of my work, so overall, my experience is limited. I have of course learned CSS, but I don’t use it everyday, so my expertise with it is shallow, and I have not had the time nor the patience to learn the dozens (hundreds?) of CSS and Javascript hacks necessary to tame cross-browser issues and general CSS2 shortcomings.
So for me, the promise of Blueprint is not only to much more quickly and easily implement nice, grid-based designs, but also to automatically build on the best practices of people like Eric Meyers, Khoi Vinh, Jeff Croft and others whose work I have admired and have been trying to learn from for several years. Just as valuable as the grid layout techniques of Blueprint is the typographic code that automatically makes text on the screen look professional. If the framework can also deal effectively with cross-browser issues, I’ll jump into it with both feet.
You do have to make some compromises. Blueprint does not necessarily encourage semantic HTML markup, and in many ways, it leads you to think of <div>’s as you might a table based layout. These are valid criticisms, and they may be addressed in future versions of Blueprint, or they may be inherent in a CSS framework, at least one that takes Blueprint’s approach. For example, to create a column that is 6 grid columns wide and whose content spans 4 of those grid columns, centered, you might do this:
<div class=”column span-4 prepend-1 append-1″> placeholder text </div>
As you can see, its very easy to understand at a glance how this div should appear on the screen, and its this approach that makes Blueprint so easy to learn and use. I would say that those who will benefit most from Blueprint are those for whom this markup and CSS is a step toward the ideal of semantic markup and pure CSS presentation, not a step away from it. For me, and I suspect a very large part of the population, Blueprint will help us create better HTML and CSS, and it would be a shame if Blueprint lost this ease and simplicity in an effort to achieve greater philosophical purity.
In the end, Blueprint has a very low learning barrier, allowing you to create designs that conform to good visual design principles very quickly. As most of the CSS for positioning, typography and cross browser tweaking is already there for you, the amount of CSS you provide is extremely small by comparison and is limited to things like color, text alignment and fine tuning the spacing and text within divs. And you can get fancier with Blueprint styles that create boxes within divs and and that “push” or “pull” divs across columns, so you aren’t locked into purely square, table-like layouts. In other words, this “framework” does very little to limit the flexibility you normally have with CSS. (And, of course, although I have been talking exclusively of div elements, these styles can be applied to other block level elements.)
For those beginning to explore Blueprint, I can offer some fairly obvious advice for how to begin using it effectively. Of course, you want to separate your own CSS from that of the framework, so you don’t have upgrade issues, and the most straightforward way to do that would be to link your own separate CSS file into your HTML template right below the script links to the screen and print Blueprint styles.
I also recommend gathering your placeholder content (or your real content, if you’re lucky to have it) and gradually adding into your HTML template focusing on getting the placement of elements correct first before fine tuning the typography or adding color. Tweaking typography and colors before your layout has gelled are premature optimizations that are just as likely to create more work for you, and adding color hides the underlying grid image.
Sometimes adding a colored background to a div can help you understand how it fits on the grid, however. But even in this case, I would recommend that you stick to a grayscale approach to specifying colors in the beginning, only using relative tonal values to remain focused on positioning. I also found it very useful to turn on div outlining in my Web developer toolbar to give me a better sense of how elements are being positioned on the grid. I initially added a one pixel border to all div’s in my custom CSS for this purpose, but this eventually threw off the pixel based positioning.
I also created a transparent placeholder graphic in the Gimp to simulate images in the layout and content that I either hadn’t yet created or didn’t yet have available, so I could add these placeholder images to the layout, specifying the appropriate width and height in the image tag to get a better sense of how it would fit into the grid. This helped me judge not only the dimensions of images in the layout that would maintain the fidelity of the grid, but it also eventually gave me specifications for what size thumbnails, etc should be created within the content itself.
The only hang-up I initially had with Blueprint was knowing when to nest divs. The examples on the Blueprint site show columns side-by-side that are equal beneath the ultimate “container” div as well as similar looking columns in their own containing div. Reading the grid.css file was instructive, as I realized that by using the “prepend-*” and “append-*” styles, I was adding padding to a div. This realization, along with outlining the divs with the Firefox Web developer toolbar led me to be able to decide when one approach or the other was appropriate. I think the fact that the examples on the Blueprint site tend not to show divs with borders and background colors makes initially figuring this out a little subtle.
My only problem in all of this is that I am currently seeing cross browser issues with–and I know this is going to shock some of you–Internet Exploder. I was quite proud of myself for quickly getting the layout in my mind on the screen using Blueprint. The markup looked correct, and the result in Firefox was exactly what I had hoped for and expected. But my heart sank when I brought it up in IE, which exploded a grenade in the middle of the screen and tossed twisted bits of my layout everywhere.
Looking at the Blueprint site, and specifically, the source for the demo/test page I saw a tantalizing reference to an ie.css file that doesn’t seem to exist in the 0.4 version of Blueprint. Hacking the URL of the demo page also failed to reveal the existence of that file on the site, and neither did poking in the Google subversion repository for the file. So, it appears that this reference is a hold-over from an earlier version of Blueprint that is no longer valid, presumably these IE fixes have been integrated into the other style sheets.
So in trying to figure out the underlying cause, it occurred to me that there may be something slightly–and unintentionally–misleading about the Blueprint examples. These examples take a kitchen sink approach to displaying many of Blueprint’s capabilities on each screen. This is to be expected, and is what one wants to see from an example page when evaluating Blueprint. However, it also means that each div on the screen is filled with content, which might hide positioning bugs that could occur in layouts with a lot of padding, using both “prepend-*” and “append-*” styles on each div, for example.
I am probably somewhat typical in that most of my graphic design work is done in my spare time for my personal business, and most of those sites are small business “brochure” sites, blogs, galleries, etc. In other words, sites that are not information dense. So, many of my layouts, including the one I am currently implementing in Blueprint, make liberal use of negative space throughout. So, given that I am using an early release version of Blueprint, I am wondering if this type of layout may partially explain the disparity I am seeing. If this is the case, it would be somewhat ironic, as I think that the people who create these kinds of layouts for these kinds of sites, are, like me, the most likely to benefit from Blueprint.
Of course, given my shallow knowledge of CSS and the fact that I am just learning to use Blueprint, it is at least as likely that there is a bug in my code, except that looking through my HTML markup and CSS, I think I am using Blueprint correctly (but then again, the best bugs are those that elude the naked eye) and the layout does display properly, or at least, as expected, in Firefox. And we are talking about IE after all, the scourge of designers and end users alike.
Here is how the layout currently looks in Firefox:
And here is how it looks in IE6:
And here is the code used to generate it. For convenience, I have embedded my custom CSS in the HTML <head>:
<html lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> <title>Site Name Placeholder – Home</title> <link rel=”stylesheet” href=”css/blueprint/screen.css” type=”text/css” media=”screen, projection”> <link rel=”stylesheet” href=”css/blueprint/print.css” type=”text/css” media=”print”> <style type=”text/css”> body, .container { margin: 0px; } h2 { font-size: 12px; line-height: 18px; } h3 { font-size: 18px; line-height: 18px; } h1,h2,h3,h4,h5,h6 { font-weight: bold; text-transform: lowercase; white-space: nowrap; } div#header img { margin: auto; padding: 0px; } .navigation ul, .sample_images ul { white-space: nowrap; margin: 0px; padding: 0px; } div.sample_images { padding-top: 18px; position: absolute; margin-top: 0px; margin-left: 420px; min-height: 100%; } .navigation li, .sample_images li { margin: 0px; list-style-type: none; } .navigation li { padding-bottom: 18px; } .sample_images li img { display: block; margin-left: auto; margin-right: auto; } .navigation { text-align: center; text-transform: lowercase; } .navigation a { color: #ffffcc; text-decoration: none; font-weight: bold; } #header, #page_title, #footer { text-align: right; } #header { margin-top: 54px; } #page_title { margin-top: 18px; padding-top: 18px; } #footer { font-size: 9px; line-height: 12px; } html, body { background: #ffffcc; } div.sample_images { background: #cccccc; } #page_title, .content { background-color: #cccc99; } div#page_title { background: #cccc99 url(“ul.gif”) no-repeat top left; } div.content { background: #cccc99 url(“ll.gif”) no-repeat bottom left; } .quiet, .quiet a { color: #666; text-decoration: none; } </style> </head> <body> <div class=”container column span-10 prepend-2 append-2″> <div class=”column span-6 append-4 first last” id=”header”> <h1> Site Title Placeholder </h1> <h2> Subtitle Placeholder </h2> </div> <div class=”column span-4 prepend-2 append-4 first last” id=”page_title”> <h3> About </h3> </div> <div class=”column span=10 first last content”> <div class=”column span-2 first navigation”> <ul> <li>Home</li> <li>Gallery</li> <li>News</li> <li>About</li> <li>Contact</li> </ul> </div> <div class=”column span-4 append-4 last”> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget sapien. Sed lobortis, nisl quis tincidunt eleifend, enim pede luctus justo, vel dictum pede lacus sit amet magna. Phasellus nec tellus quis diam pulvinar gravida. Morbi euismod rutrum mauris. Ut dapibus blandit odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed elementum. Duis id nisl at nisi consectetuer adipiscing. </p> <p>Donec euismod ornare augue. Ut erat metus, rhoncus sed, fringilla sodales, facilisis in, pede. Cras vel nulla sit amet lorem vulputate luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec id purus vitae justo gravida ultricies. Donec lacus turpis, sagittis id, porttitor ac, laoreet ut, arcu. </p> <p>Cras cursus ante non est. Mauris sapien lectus, fringilla eget, euismod nec, convallis non, sapien. Nunc id nibh a est aliquet consectetuer. Mauris dapibus elit sed justo bibendum scelerisque. Ut eleifend sem ac augue. </p> </div> </div> <div class=”span-3 sample_images”> <ul> <li><img src=”image_placeholder.png” width=”150″ height=”126″ /></li> <li><img src=”image_placeholder.png” width=”150″ height=”126″ /></li> <li><img src=”image_placeholder.png” width=”150″ height=”126″ /></li> <li><img src=”image_placeholder.png” width=”150″ height=”126″ /></li> <li><img src=”image_placeholder.png” width=”150″ height=”126″ /></li> </ul> </div> <div class=”column span-4 prepend-2 append-4 first last” id=”footer”> <cite class=”quiet”> Website Designed and Managed by … </cite> </div> </div> </body> </html>
Any suggestions for improving this are very much appreciated.