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:

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

<head>

<title>Basic example on using BlueTrip</title>

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

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