admin originally posted this on Saturnboy.
The design from the last post is finished, and it follows a very simple blog layout. In this post, I’ll slice the design and turn it into a pretty html page with the magic of Blueprint CSS.
Slice It
Before we get slice happy, we need to think. First, Blueprint is grid-based, so that means rectangles are good. And second, the default Blueprint container width is 950px. The defaults are intelligently chosen and have always worked great for me. By sticking with the defaults, we will get a 950px wide, centered, fixed-width site, which is exactly what we want.
We could get all clever and try to slice out just the circles as a background image, but that would force the top border to be a transparent PNG because of the shadow. Similarly, we could cut out all four rounded corners and all four edges of the sidebar, but that would force us to reassemble humpty dumpty with some fancy css and markup. In both cases, just say No! The simplest possible choice is to slice the entire header, the entire footer, and then a thin slice for the body that can be vertically tiled. Exactly like this:
And we get: the header, the background tile, and the footer. Slicing the sidebar in the exact same manner gives: sidebar header, sidebar background tile, and sidebar footer.
Code It
The original simple blog layout had four divs: header, content, sidebar, and footer. This is exactly want we want, but the original markup won’t exactly work, because the current design has a vertically-tiled background. The solution is simple – just wrap the content and sidebar inside a div with a bit of padding (via a prepend-2 and append-2). If we ignore the sidebar design for a moment, and just insert a placeholder, the markup is:
<div class="container">
<div id="header" class="span-24">header</div>
<div id="bg" class="prepend-2 span-20 append-2">
<div id="content" class="span-15">content</div>
<div id="sidebar" class="span-5 last">sidebar</div>
</div>
<div id="footer" class="span-24">footer</div>
</div>That’s just beautiful Blueprint markup! Adding some simple css:
body {
background-color:#111;
}
#header {
background:#111 url(img/circ-head.png) 0 0 no-repeat;
height:160px;
min-height:160px;
}
#footer {
background:#111 url(img/circ-foot.png) 0 0 no-repeat;
height:30px;
min-height:30px;
text-align:center;
}
#bg {
background:#fff url(img/circ-bg.png) 0 0 repeat-y;
}And that gives us Circles of Doom, version 0! View it, or download it. I’ve included the latest-and-greatest Blueprint CSS, which is v0.8 at the time of writing. I’ve chosen to enforce the vertical height of the header and footer via height and min-height which seems to work fine in Firefox, Safari, and IE7.
Sidebar Me
Since the sidebar graphic was sliced in the exact same manner as the body graphic, we just add the exact same markup to the sidebar div – header, bg, and footer.
<div id="sidebar" class="span-5 last">
<div id="sidehead" class="span-5"><!-- sidebar header --></div>
<div id="sidebg" class="span-5">sidebar content</div>
<div id="sidefoot" class="span-5"><!-- sidebar footer --></div>
</div>
Style it like this:
#sidehead {
background:transparent url(img/sidebar-head.png) 0 0 no-repeat;
height:14px;
min-height:14px;
}
#sidefoot {
background:transparent url(img/sidebar-foot.png) 0 0 no-repeat;
height:14px;
min-height:14px;
}
#sidebg {
background:transparent url(img/sidebar-bg.png) 0 0 repeat-y;
}Putting everything together with some dummy Lorem Ipsum text gives us Circles of Doom, version 1! View it, or download it.
Debug It
Lorem Ipsum text is the basic unit testing for HTML+CSS. I always fill out every content div with some dummy text, just to see what breaks. This time around, I noticed the sidebar content was touching the edges. I decided against adding a prepend-1 and append-1 because that’s too much padding. Instead, I thought I might just add some padding to sidebg, but this is bad, bad, bad! You can not add padding or margins to a Blueprint node, which sidebg clearly is because of the class="span-5". I could add another div inside sidebg, but that seemed like too much markup. So, I took the easy way out and just padded the known sidebar content markup (in this case, just p and h3).
#sidebar h3, #sidebar p {
color:#fff;
padding:0 10px;
}Digging Deeper: Blueprint CSS uses margin and padding to create the grid. Thus it should have been obvious to me that you can NOT add margins or padding to a Blueprint element (any markup element with a Blueprint grid class). Alas, it was not immediately obvious, but I was able to catch my mistake during debugging.
And that’s it for the visual aspect of Circles of Doom. Next, I’ll cover web design optimization.
The Files
