Changing Grid Units in the Blueprint CSS Framework - Building a two-column web page layout
(Page 3 of 4 )
As you learned in the previous section, creating a web page layout comprised of three main columns with the Blueprint CSS framework is really a no-brainer process. This procedure only requires that you play around with its “span-x” and “last” CSS classes. That’s all.
However, it’d be pretty educational to extend the use of these classes a bit further, and see how to utilize them for constructing a two-column design. Thus, in the next few lines I’m going to define the markup that corresponds to this particular design, so you can grasp how it works. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2-column web page layout</title>
</head>
<body>
<div class="container showgrid">
<div class="span-24">
<h1>2-column layout</h1>
<h2>This section spans 24 cols</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="span-16">
<h2>This section spans 16 cols</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="span-8 last">
<h2>This section spans 8 cols</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="span-24">
<h2>This section spans 24 cols</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
Basically, the structural markup of the above (X)HTML file looks very similar to the examples that you learned in the previous section, except for some subtle differences. In this particular case, you should pay close attention to the CSS classes that have been assigned to the main divs, since they’re used to construct the aforementioned two-column design by spanning 16 grid units for the main area, and 8 units for the side bar.
Asides from creating these columns, the markup also includes two typical header and footer sections, which have been created by spanning 24 grid units.
So far, so good. At this stage, I defined the entire structural markup of the previous (X)HTML file to build a two-column web page layout. There’s a missing piece in this scenario, however, since it’s necessary to link the pertinent divs to the source files provided by Blueprint CSS, thus completing this web page design.
Therefore, this task will be performed in the final section of this tutorial. So, go ahead and read the following segment. It’s only one click away.
Next: Completing the web page layout >>
More Style Sheets Articles
More By Alejandro Gervasio
