STYLE SHEETS

Introducing the BlueTrip CSS Framework

If you're looking for a good CSS framework for CSS beginners, look no further. This multi-part series introduces you to the BlueTrip CSS framework. In this first part, I will explain how to develop a basic web page design by using the core CSS classes provided by the framework. As you'll soon see, this process is quite straightforward, even if you currently don’t have a strong CSS background.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

November 11, 2009

TABLE OF CONTENTS:

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">

<head>

<title>Basic example on using BlueTrip (showing the background grid)</title>

<!--[if IE]>

<![endif]-->

</head>

<body>

<h1>BlueTrip CSS Grid example showing the grid</h1>

</div>

<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>

</div>

</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 >>