The Blueprint CSS Framework - Using Blueprint CSS for a simple web page design
(Page 3 of 4 )
Before I proceed to code the first sample web page with Blueprint CSS, first it’s convenient to outline some basic concepts that determine the way it works. By default, the framework provides a grid whose width is 960px, composed of 24 columns with individual gutters. As you'll see in a moment, this gives you great control over how a web document is laid out.
Having explained how the grid generated by Blueprint CSS functions, let me show you the first code sample, which constructs a three-column design with a visible background grid. 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>Sample web page (showing the grid - 3 column-layout)</title>
<!-- framework CSS source files-->
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />
<!--[if IE]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
</head>
<body>
<div class="container showgrid">
<div class="span-24">
<h1>Showing the CSS Grid</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-8">
<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-8">
<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-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>
As shown above, each layout built with Blueprint CSS must include a main wrapper that has a “container” class assigned to it, since this element sets the width for all entire design. Them, each section of the web page is created by assigning a class named “span-x” to a div, where X is the number of grid columns that will be spanned by this particular div.
In addition, it’s valid to mention that each time a column must be finished, it’s necessary to attach a second class, called “last.” This is exactly the case with the left bar created before, which has been assigned this class, aside from the corresponding “span-x.”
From this initial example, it’s clear to see how simple it is to build a specific web page layout with Blueprint CSS. Quite possibly, one of its major drawbacks is its lack of semantic names when it comes to creating page sections, since a class called “span-8” or “span-16” doesn’t say anything meaningful in the context of the web document.
However, it’s possible to improve this issue in a relatively easy manner. For instance, you might want to first use the default CSS classes to build the desired layout, and then rename them to something more semantically correct. Logically, this is an extra step that will slow down the whole design process, but it’s not so hard to implement.
Also, in order to complement the previous explanation, here’s a screen capture that shows the layout corresponding to the example developed earlier:
So far, so good. At this point, you hopefully grasped the logic that stands behind building web page layouts with Blueprint CSS. However, if you try out the previous sample web document on your own browser, you’ll realize that it displays the background grid. This is very useful when designing, but not for production environments.
Thus, in the next section I’ll be demonstrating how to prevent the web page grid from being displayed.
Please click on the link below and read the next few lines.
Next: Using a web page layout in a production environment >>
More Style Sheets Articles
More By Alejandro Gervasio
