Introducing the BlueTrip CSS Framework - Adding the CSS files
(Page 3 of 4 )
In the previous section, I built the bare bones structure of a basic web page layout, so you can quickly familiarize yourself with using the core CSS classes provided by the BluePrint CSS framework. However, in its current state, the page in question doesn't load any CSS files required for rendering the layout correctly.
So it's time to fix that right now. Basically, the framework comes with three core style sheets. The first one is tasked with providing the styles that will be used with computer screens; the second one will be utilized for printing; and the last CSS file is a set of hacks that address some incompatibilities related to Internet Explorer (does this sounds familiar to you?).
Given that, here's the complete definition of the (X)HTML file created previously, this time including the aforementioned CSS files:
<!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 (showing the background grid)</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection">
<![endif]-->
</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>
Here you have it. If you try out the above sample file on your own browser, then you should get the following output:
Even though I have to admit that this sample web page layout is rather simplistic, it's useful for demonstrating how a CSS framework like this one can help you with implementing different kinds of web designs very quickly. If the semantic meaning of divs is not a big concern for you (it should be, however), then BlueTrip CSS should be definitely be a good alternative worth examining.
Now that you've learned how to create a basic web page layout with BlueTrip CSS, I'm going to end this introductory chapter of the series by showing you another sample file, which will hide the background grid from display.
Therefore, please read the following segment. It's only one click away.
Next: Hiding the background grid from view >>
More Style Sheets Articles
More By Alejandro Gervasio
