Introducing the BlueTrip CSS Framework - Using BlueTrip CSS to create a basic web page layout
(Page 2 of 4 )
As I expressed in the introduction, the learning curve for BlueTrip CSS is extremely flat. It provides a background grid composed of 24 columns, which can be spanned across the web document in accordance with the requirements of a specific web page layout. From that point onward, it's possible to push and pull elements at will, as well as style headers, paragraphs, lists and so forth. Based on this simple design schema, I'm going to create the markup of a basic web page, which will use some of the spanning CSS classes that come with the framework.
That being said, here's the example web page, which will display the background grid. Take a look at the corresponding code sample:
<!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>Basic example on using BlueTrip</title>
</head>
<body>
<div class="container showgrid">
<div class="span-24">
<h1>BlueTrip CSS Grid example showing the grid</h1>
</div>
<div class="span-8">
<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">
<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">
<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">
<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">
<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>
If you have worked with BluePrint CSS before, then I'm sure that you'll grasp how the above markup works. Anyway, the first thing to notice is that all of the web page layout is wrapped within a general container, which has been assigned two CSS classes, called "container" and "showgrid" respectively.
As you may guess, the first of these classes is responsible for centering the contents of the whole web document, while the last one is tasked with displaying the background grid. It's that simple, really.
The rest of the markup is pretty self-explanatory. It uses a set of spanning classes, dubbed generically "span-x," where X is the number of columns that will be spanned by a specific div. In this example, I decided to create first one column for the header, then a body section comprised of three containers, and finally a footer area made up of two divs. It's valid to mention the use of the "span-x last" CSS class, which is utilized for locating the last column within the base grid.
At this point, you hopefully grasped the underlying logic that stands behind creating basic web page layouts with BlueTrip. So, I'm going to add to the previous web document the CSS files that will render the layout as expected.
This topic will be covered in detail in the section to come. Therefore, please click on the link below and keep reading.
Next: Adding the CSS files >>
More Style Sheets Articles
More By Alejandro Gervasio
