Introducing the BlueTrip CSS Framework (By: Alejandro Gervasio)

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.

If you’ve been keeping up to date with the latest trends that rule the world of modern web design, then surely you’ll be aware of the growing popularity of CSS frameworks. Indeed, there’s a huge number of designers who use them extensively in their projects nowadays. Frameworks allow users to build complex web page layouts that will be rendered consistently across different browsers, without having to create web pages from scratch.

As with other pieces of software aimed at reducing development time, CSS frameworks have pros and cons that should be carefully evaluated. Of course, one of their most significant pitfalls is that the CSS classes included with them lack true semantic meaning. Some purist designers will refuse to use frameworks for that very reason, but for others, this side effect will simply be irrelevant.

On the other hand, good and well-trusted CSS frameworks, like BluePrint CSS for instance, include truly handy features, like proven styles reset capabilities and the ability to create web page layouts using a consistent grid. In short, regardless of the opinions you may have (or have heard) about them, CSS frameworks are here to stay, and some of the most powerful ones deserve a close look.

In this group of articles I’m going to explore in depth the BlueTrip CSS framework (http://bluetrip.org), which claims to put together the best features provided by the aforementioned BluePrint CSS and Tripoli, yet another popular contender in this dynamic terrain.

Personally, I’ve been using BlueTrip CSS for a few months for building grid-based web page designs and I found it very easy to learn. Plus, it comes with a neat group of reset, print and text styles that will make your life much easier, especially if you need to develop websites with a tight headline.

Thus, in the next few lines I’m going to introduce you as gently as possible to building web page layouts with the BlueTrip CSS framework, so you can quickly start using it within your own web projects.

Are you ready to begin this brand new educational journey? Then let’s jump in right now!

Introducing the BlueTrip CSS Framework – Using BlueTrip CSS to create a basic web page layout

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>

<div>

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

</div>

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

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

Introducing the BlueTrip CSS Framework – Adding the CSS files

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>

<div>

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

</div>

<div>

</div>

<div>

</div>

<div>

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

Introducing the BlueTrip CSS Framework – Hiding the background grid from view

In the previous segment, you saw how to build a simple web page layout where the background grid was visible. Logically, this grid should be used as a guide for positioning elements on the web document, while it should be hidden from view when used in production environments.

How can this be accomplished? Well, it’s really simple. Removing the “showgrid” CSS class from the main container will do the trick. The following example shows how to hide the background grid from display:

<!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 (hiding the background grid)</title>

<!--[if IE]>

<![endif]-->

</head>

<body>

<div>

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

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

If you try out the above (X)HTML file on your browser, then you’ll see that the background grid has been hidden from display, as the “showgrid” CSS class has been removed from the main wrapping div. I suggest you play with this example a bit, turning the grid on and off as you’re positioning elements across the web page, so you can produce two different versions of the layout being developed. It’ll be an instructive and fun experience.

Final thoughts

In this introductory chapter of the series, I explained how to develop a basic web page design by using the core CSS classes provided by the BlueTrip CSS framework. As you saw for yourself, this process was quite straightforward, even if you don’t currently have a strong CSS background.

In the next article, I’m going to discuss how to use the framework for adding gutters to columns of a web page, and borders as well. Thus, now that you’ve been warned about the topics that will be covered in the forthcoming tutorial, you can’t miss it!

Member Login or Register Here

Products & Services

Knowledgebase

Introducing the BlueTrip CSS Framework (By: Alejandro Gervasio)