BearSols

A Two-Column Web Page Layout Based on the Rule of Thirds (By: Alejandro Gervasio)

anhnl — Tue, 31 Aug 2010 07:46:23 +0000

A Two-Column Web Page Layout Based on the Rule of Thirds

If you’re a self-taught web designer who wants to take your existing skills to the next level, then you should seriously consider learning some essential concepts of graphic design, such as the Golden Proportion and the Rule of Thirds, which surely will make your web sites look much more harmonious and aesthetically pleasant to visitors.

In this seven-part series of articles, you’ll learn not only the theory that stands behind using these popular design principles, but how to put them into practice with CSS/XHTML to create all sorts of web page layouts that will be in perfect harmony with a pattern that occurs very frequently in elements of nature.

Now that I have outlined the topics that are covered by this group of tutorials, it’s time to quickly summarize the concepts deployed in the previous one. In that part of the series, I explained how to build a fixed web page design using the Rule of Thirds. In this case, the design in question was comprised of three primary columns, aside from the classic header and footer sections.

Apart from practicing some basic techniques for working with floating divs on a web document, the most instructive aspect of the example was the approach used for applying the Rule Of Thirds in web page layout creation. Essentially, implementing this principle was accomplished by dividing the whole web document in thirds both vertically and horizontally, in this way constructing a simple background grid for aligning the corresponding columns.

Undeniably, creating a web page design like the one described above has a few concrete advantages. In general terms, it’ll look more appealing and attractive when filled with real content. However, it’s also possible to extend the implementation of the Rule Of Thirds a bit further, for instance, for building a design comprised of only two columns.

But how can this be done? You might be wondering. Well, once the web document has been divided into thirds, if you simply remove the middle third, and then you should end up with a web page made up of only a pair of columns, right? That’s exactly what I’m going to do in the next few lines, so let’s see how to use the Rule Of Thirds for creating a two-column web page design!

A Two-Column Web Page Layout Based on the Rule of Thirds – Designing a web page with the Rule Of Thirds

Before I show you how to create a two-column web page layout using the Rule of Thirds, it’d be useful to recall how this principle can be utilized for building a design comprised of three primary bars. To do this, I’m going to list the example file developed in the previous article, which demonstrated this process in a really simple fashion. Here’s how this file looked originally:

3-column web page layout using the Rule of Thirds

Subheading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Subheading

From the above example, it’s pretty clear to see how simple it is to implement the Rule Of Thirds via a basic combination of CSS and (X)HTML. In this case, a fixed width of 900px has been assigned to the main container div, and the corresponding columns have been created by dividing this value in thirds, so each of them will have a width of 300px. Not too hard to do the math, right?

Apart from examining in detail the code sample shown before, you may want to look at the following screen capture, which shows the visual appearance of this web page. Here it is:

Here you have it. Now that you’ve recalled how to build a three-column web page design using the Rule of Thirds, it’s time to learn how to apply this same principle to creating a layout that will contain a side bar and a content area as well.

This topic will be discussed in depth in the following section. Thus, to learn more about it, please click on the link that appear below and continue reading.

A Two-Column Web Page Layout Based on the Rule of Thirds – Building a fixed, two-column web page design

Once a web document has been divided in thirds, it’s quite easy to create a few handy variations of this initial layout by removing the middle third, which turns the original web page in a two-column design. Now let me show you how to implement this approach via CSS, so you can grasp its logic more easily.

The following CSS styles construct a basic web page layout composed of a side bar and a content section, by aligning the pertinent columns according to the Rule Of Thirds. Have a look at them, please:

body{

padding: 0;

margin: 0;

background: #eee;

}

#container{

width: 900px;

margin: 0 auto;

background: #ccc;

}

#header{

height: 100px;

padding: 10px;

background: #fc0;

}

#sidebar{

float: left;

width: 280px;

height: 400px;

padding: 10px;

}

#content{

margin-left: 300px;

height: 400px;

padding: 10px;

background: #fff;

}

#footer{

clear: both;

height: 100px;

padding: 10px;

background: #ffc;

}

h1,h2,p{

margin: 0;

}

As I expressed before, the above CSS code is responsible for building a web page design that’s made up of two columns. In this case, the main container has a width of 900px, and then the side bar is 300px wide, while the remaining content area has a value of 600px. From this simple calculation, it’s clear to see how easy it is to create a basic variation of the classic three-column schema while still applying the Rule of Thirds.

Having already coded the CSS styles required for building this web page layout comprised of a couple of columns, we now need to link the styles to the structural markup of the page in question.

This task will be performed in the last section of this tutorial. To get there, click on the link that appears below and read the next segment.

A Two-Column Web Page Layout Based on the Rule of Thirds – Creating a sample web page layout

In the prior segment, I coded the CSS styles required for creating a two-column web page design that follows the Rule Of Thirds. So, the only thing that remains undone is linking these styles to the markup of the web page. The (X)HTML file below does precisely that:

2-column web page layout using the Rule of Thirds

Subheading

Definitely, I’m not going to spend more time explaining how the above file functions, since that would be pretty useless. However, if you take a look at the following screen shot, it’s probable that you will get a better idea of how this file is displayed on the browser:

Of course, the best way to see how this sample design is rendered on screen is by testing it on your own browser, so I strongly encourage you to do this. Also, I suggest that you to add some content to the different sections of the web page and you’ll see how they flow in a truly harmonious way.

Final thoughts

Over this fifth installment of the series, I went through building a two-column web page layout by applying a basic variation of the Rule of Thirds. As you saw for yourself, this is a no-brainer process that requires removing one column from the original third-based design, and then adjusting the widths assigned to the remaining columns accordingly. That’s it.

In the following tutorial, I’m going to explain how to modify the layout that you learned previously to invert the positions of the respective columns, producing yet another variation of the typical three-column schema.

If you wish to learn how this will process will be accomplished in a simple fashion, don’t miss the next article!

Extending the Rule Of Thirds for Web Page Layouts (By: Alejandro Gervasio)

anhnl — Tue, 31 Aug 2010 07:11:14 +0000

Extending the Rule Of Thirds for Web Page Layouts

Welcome to the sixth part of a seven-part series that explains how to apply fundamental design principles to your web page layouts. In this article you’ll learn more about applying the Rule of Thirds to your designs.

From the old days, when most web sites were only a bunch of text-based documents to present, where the web is a multifaceted creature in constant evolution, many designers have created their web page layouts by using only an intuitive approach. You can attribute this to the self-taught nature of the web itself, but with all the design theory available nowadays, there are no valid excuses not to learn a couple of handy principles that permit you to build harmonious, visually appealing web sites in a truly simple manner.

In this specific case, I’m talking about he Golden Proportion and the Rule of Thirds, two popular design concepts that can be easily applied to creating aesthetically pleasant web page layouts. Naturally, if you’ve been patient enough and already read all of the articles that have preceded this one, then you probably have a clear idea of how to implement these two basic principles when developing both liquid and fixed designs.

And I’m saying this because in those tutorials, I explained how to use first the Golden Proportion and then the aforementioned Rule Of Thirds, to create some typical web page layouts, such as those comprised of two and three columns respectively. However, when it comes to working with The Rule Of Thirds, there’s plenty of room to experiment and build variations of these classic layouts. It’s possible not only to construct designs that include a left-placed side bar and a content area, but it’s perfectly feasible to swap out the positions of these elements very easily.

Based upon the intrinsic flexibility given by The Rule Of Thirds, in this sixth chapter of this series I’m going to demonstrate how to build a two-column web page layout whose side bar will be located to the right of the web document, thus producing an interesting variation of the design built in the previous article.

Now, it’s time to dispense with the preliminaries and continue exploring the Rule Of Thirds. Let’s jump in!

Extending the Rule Of Thirds for Web Page Layouts – Review: the Rule of Thirds with a two-column web page layout

Before I start explaining how to create a web page layout whose side bar will be placed to the right of the web document, first I’d like to reintroduce the example developed in the last article. It demonstrated how to produce a similar design, but in that particular case the side bar in question was positioned to the right instead.

This example was composed of only one simple (X)HTML file, which looked like this:

2-column web page layout using the Rule of Thirds

Subheading

As shown above, it’s fairly straightforward to build a web page design composed of two columns by using the Rule OF Thirds. In this specific situation, the left bar of the page has been assigned a width of 300px, while the content area now has a value of 600px, which fits perfectly into the 900px width specified for the main container.

Now that you understand how the previous layout was created by using the Rule Of Thirds, it’s time to see how to generate a similar design, but this time the side bar will be placed to the left of the web document. As you might have already guessed, this process has more to do with playing a bit with CSS styles rather than with the Rule Of Thirds itself, but it’s worthwhile to take a closer look at it.

In the following segment I’m going to write a new set of CSS styles, which will create the two-column web page layout mentioned a few moments ago. Thus, if you wish to learn how this will be done, please click on the link below and keep reading.

Extending the Rule Of Thirds for Web Page Layouts – Rule of Thirds variation: inverting column positions

Since I just quickly reviewed how to use the Rule Of Thirds to build a two-column web page layout whose side bar was placed to the left of the web document, it’s time to see how this same approach can be used for inverting the position of this bar to produce a design where it will be shifted to the right side instead.

Given that, here is the group of CSS styles that will generate this whole new layout. Take a look at them:

body{

padding: 0;

margin: 0;

background: #eee;

}

#container{

width: 900px;

margin: 0 auto;

background: #ccc;

}

#header{

height: 100px;

padding: 10px;

background: #fc0;

}

#sidebar{

float: right;

width: 280px;

height: 400px;

padding: 10px;

}

#content{

margin-right: 300px;

height: 400px;

padding: 10px;

background: #fff;

}

#footer{

clear: both;

height: 100px;

padding: 10px;

background: #ffc;

}

h1,h2,p{

margin: 0;

}

As you can see, the above CSS code is quite simple to follow. All it does is float the side bar to the right side of the web page, while the content area has been shifted to the left. Here, it’s clear to see how easy it is to generate a handy variation of the classic two-column design, while still maintaining the proportion dictated by the Rule Of Thirds.

Having already coded the CSS styles required for constructing this specific web page layout, I’m going to link the styles to the structural markup of the web document, in this way finishing the development of this practical example.

So, to see how this process will be accomplished, jump ahead and read the following section. It’s only one click away.

Extending the Rule Of Thirds for Web Page Layouts – Completing the sample web page layout

As I said in the section that you just read, the only thing that remains undone to get this web page layout complete is to link the CSS styles defined previously with the corresponding markup of the page in question. Thus, below I coded a new (X)HTML file, which gathers these two layers in one single place. Here’s how this file has been defined:

2-column web page layout using the Rule of Thirds

Subheading

It’s easy to understand the above (X)HTML file, so I’m not going to bore you with irrelevant explanations. Even so, you may want to have a look at the following screen shot, which depicts pretty accurately how this sample file is displayed on the browser:

At this moment, do you realize how easy it is to build several web page layouts using the Rule Of Thirds? I hope you do! And if you still have some doubts about the effectiveness of this approach, try to create your own layouts according to this design principle and start enjoying the benefits of a pattern that truly occurs in nature.

Final thoughts

Over the course of this sixth episode of the series, you learned how to produce yet another appealing two-column web page design by applying the Rule Of Thirds. As I explained a few moments ago, this process has to do mostly with tweaking the CSS styles of the page rather than dealing with the rule itself, but hopefully the experience has been instructive for you.

Moving forward, it’s time to talk about the topic that I plan to discuss in the last chapter of the series. So far, you may have noticed that all of the web page designs built using the Rule of Thirds were produced by calculating the correct widths for each column included in the document. This task can be pretty annoying when performed on a frequent basis.

It’s possible to simplify this process by using a technique called “background grid.” As its name suggests, this approach relies on creating a background grid image and assigning it to the element of a web page. In doing so, it’s much easier to position elements within the document, since there’s a reference grid that can be used as a quick visual reference.

This useful technique will be discussed in depth in the final part of the series, so if you want to put it to work for you, don’t miss the last tutorial!

Using a Background Grid to Assist Web Page Layout (By: Alejandro Gervasio)

anhnl — Tue, 31 Aug 2010 07:06:39 +0000

Using a Background Grid to Assist Web Page Layout

Welcome to the seventh and final installment of a series covering fundamental design principles as applied to web layout creation. This series uses numerous code samples to show you how to implement such design concepts as the Golden Ratio and the Rule of Thirds to construct several professional-looking web page designs that will be visually appealing to your visitors.

Provided that you’ve already read all of the tutorials that preceded this one, I should assume that at this point you have pretty clear idea of how to apply both the Golden Proportion and the Rule of Thirds to build different kinds of web page layouts, ranging from the classic three-column designs to those composed of only two columns.

As you learned before, assigning the proper dimensions to certain areas of a web document, either by using the Divine Proportion or the Rule of Thirds, helps to distribute the contents of web sites in a more harmonious way, simply because this distribution emulates a pattern that’s already present in nature.

However, it’s also fair to stress one important thing regarding the implementation of these two specific principles when creating web page designs: unless you have a calculator at hand or use some online tools like the Phiculator (http://www.thismanslife.co.uk/phiculator), you may find it quite hard to position elements on a web page without having a visual guide behind them.

Fortunately, this issue can be easily resolved by using a background grid. But you might be wondering how it works. Well, it’s possible, for instance, to design such a background grid in Photoshop, and then assign this image to the “” element of the web document via CSS, thus displaying a handy visual guide that can be used for quickly aligning web page elements according to the Golden Ratio and the Rule of Thirds.

So, in the next few lines I’m going to demonstrate how to use this approach, in this case for building a fixed design in accordance with the Rule of Thirds. Want to see how this will be accomplished? Then start reading now!

Using a Background Grid to Assist Web Page Layout – The background grid for a Rule of Thirds web page

As I said in the introduction, it’s ridiculously simple to create a background grid that can be used for aligning elements on a web page. This process can be completed quickly with any image editing software. I’m going to build our grid with Photoshop, but naturally you can use the program with which you feel most comfortable.

Essentially, the steps that need to be followed to create this grid are generally the same for any image edition program that you might utilize. Since my grid will stick to the Rule of Thirds, start out by opening a blank document of 900px X 100px and then create the grid by vertically dividing the document in thirds of 300px each. Don’t worry about creating horizontal grid lines, since they won’t be utilized in this example.

Finally, paint the image with a color that offers a good contrast with the elements that you’re planning to include in your web page. Once you’ve done this, simply export your graphic as a GIF or PNG to the folder that you’ll be using for storing the web document.

If everything has gone as expected, you should have created a background grid similar to this one:

Now that the grid is ready to be used as a background for the web document, it’s time to see how to assign it to the “ element with a few simple CSS styles. This way it can be displayed across the entire document.

This process will be discussed in depth in the following section. Thus, to learn more, please click on the link that appears below and keep reading.

Using a Background Grid to Assist Web Page Layout – Displaying the background grid on the web page

Before I start showing you how to transform the grid image created in the previous section into a visual guide that will be displayed on the web page, it’s fair to clarify that this approach isn’t mine. The idea of using an image as a background grid was originally conceived by Khoi Vinh and you may want to take a look at his site here (http://www.subtraction.com/2004/12/31/grid-computi) to see a nice usage of his grid.

Having said that, it’s time to code the corresponding CSS styles that will be responsible not only for creating a fixed three-column web page layout, but for assigning the grid image that you saw previously to the page’s element.

These CSS styles will be defined in the following way:

body{

padding: 0;

margin: 0;

background: #eee url(grid.gif) center top repeat-y;

}

#container{

width: 900px;

margin: 0 auto;

}

#header{

height: 100px;

padding: 0 10px 0 10px;

}

#sidebar{

float: left;

width: 280px;

padding: 0 10px 0 10px;

}

#extrabar{

float: right;

width: 280px;

padding: 0 10px 0 10px;

}

#content{

margin-left: 300px;

margin-right: 300px;

height: 302px;

padding: 0 10px 0 10px;

}

#footer{

clear: both;

height: 100px;

padding: 0 10px 0 10px;

}

h1,h2,p{

margin: 0;

}

As you can see, the set of CSS styles defined above are tasked with building a simple web page layout which is composed of three primary columns, identified as “sidebar,” “content” and “extrabar” respectively. Each of these columns has been assigned a width of 300px, aligning the whole design with the Rule Of Thirds. However, the most relevant thing to note here is the following rule:

body{

padding: 0;

margin: 0;

background: #eee url(grid.gif) center top repeat-y;

}

Despite its ease, this rule is truly powerful; it tells the browser to display the grid image created in the previous segment across the whole web page, as a background grid. Now it’s much easier to align elements on the page, since the background image acts like some of the grids available in any graphic editing program.

Pretty nice, right? At this point, you hopefully understand how to use a simple GIF or PNG image as a helpful background grid, which can be displayed on a web document for aligning purposes. However, the CSS styles coded above would be incomplete if they weren’t linked to the document’s markup.

Therefore, in the section to come I’ll be performing this task, so you can see more clearly how the background grid can be utilized for placing different elements within the web page in perfect harmony.

Now, click on the link below and read the following segment.

Using a Background Grid to Assist Web Page Layout – Completing the sample web page layout

To complete the development of this sample web page layout that uses a single image as a background grid, it’s necessary to link the CSS styles coded in the previous section to the corresponding markup of the page. To do that, I’m going to create a whole new (X)HTML file, which will render the layout along with the grid. Here’s how this file looks:

3-column web page layout using the Rule Of Thirds (uses background grid)

Subheading

See how simple it is now to include certain common elements, such as headers and paragraphs, into the web page by using the background grid as a visual guide? I hope you do! I decided to keep the markup of the previous web document rather basic so you can easily grasp the functionality provided by grid.

In addition, below you’ll see a screen capture that shows how the web page coded before is rendered on screen, including the background grid. Here it is:

From the above image it’s clear to see that using a background grid is truly a killer approach, particularly when it comes to aligning elements on a web page according either to the Golden Ratio or the Rule of Thirds. Finally, I encourage you to build your own design grid, so you can see how useful it can be for building harmonious, aesthetically appealing web page layouts.

Final thoughts

It’s hard to believe, but this is the end of the series. However, this shouldn’t make you feel sad at all, because you learned the theory that stands behind the Golden Ratio and the Rule of Thirds. Besides, you saw how easy it is to take these principles into the terrain of web design, which can be truly helpful for creating beautiful web sites.

See you in the next web development tutorial!

Introducing the BlueTrip CSS Framework (By: Alejandro Gervasio)

anhnl — Tue, 31 Aug 2010 03:53:57 +0000

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:

Basic example on using BlueTrip

BlueTrip CSS Grid example showing the grid

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.

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:

Basic example on using BlueTrip (showing the background grid)

BlueTrip CSS Grid example showing the grid

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:

Basic example on using BlueTrip (hiding the background grid)

BlueTrip CSS Grid example showing the grid

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!

Adding Borders to Web Page Columns with BlueTrip CSS (By: Alejandro Gervasio)

anhnl — Tue, 31 Aug 2010 03:26:57 +0000

Adding Borders to Web Page Columns with BlueTrip CSS

In this second part of a series introducing the BlueTrip CSS framework, I show you how to use some handy CSS classes that come with it to add borders to the columns of a web page and create truly fancy H2 headers.

Without a doubt, CSS frameworks help shorten the time required for developing web sites. As you may know, there are a few powerful contenders in this terrain that have gained considerable popularity over time. This is due to their handy features, such as the inclusion of well-trusted resetting capabilities, text and web form styling, complete printer-friendly style sheets and so forth.

Among the numerous CSS frameworks available nowadays that have become the preferred tool of many web designers, BlueTrip is quite possibly one of the most popular. It claims to put together the best features provided by the BluePrint CSS and Tripoli frameworks, and that seems to be more than a marketing trick.

So, if you’re interested in learning how to work with the BlueTrip CSS framework, then this series of articles might be what you’re looking for. If you’ve already read the introductory tutorial, then you know how to create basic web page layouts with BlueTrip.

In that specific article, I explained how to use the framework’s generic span-x CSS classes to build two simple web pages. In the first case, the background grid used to align element on the web document was displayed on screen, while in the second example the grid was hidden from view thanks to the manipulation of the “showgrid” CSS class, which was alternately assigned and removed from the markup.

However, I’m only scratching the surface of the useful capabilities offered by BlueTrip. In the next few lines I’m going to explain how to use some of its CSS classes to add borders to columns of a web page and to apply elegant styles to HTML headers.

Now, it’s time to continue discovering the numerous features that come packaged with the BlueTrip CSS framework. Let’s get going!

Adding Borders to Web Page Columns with BlueTrip CSS – Review: generic span-x CSS classes

Below I’ve reintroduced one of the examples I used in the previous article to show you how to use the BlueTrip CSS framework to build a simple web page layout. it works by using the framework’s generic “span-x” CSS classes. Here it is:

Basic example on using BlueTrip (showing the background grid)

BlueTrip CSS Grid example showing the grid

As shown above, creating a simple web page layout with BlueTrip is only a matter of utilizing the generic “span-x” and “last” CSS classes in accordance with the type of design that needs to be built. In this case, the previous web document uses an additional “showgrid” CSS class to display the background grid, but naturally in production environments it should be hidden from view.

Undoubtedly, understanding the logic that BlueTrip implements to create and position columns across a web page is very simple, even when the CSS classes used during this process lack a truly semantic meaning. So, assuming that you’re familiar with the basics of working with the previous “span-x” classes, it’s time to explore a few more features of the framework.

Thus, in consonance with the concepts deployed in the introduction, in the section to come I’m going to explain how to use another CSS class provided by BlueTrip for adding subtle borders to columns of a web page.

To learn the details of this process, click on the link below and keep reading.

Adding Borders to Web Page Columns with BlueTrip CSS – Adding borders to web page columns

As with every feature offered by BlueTrip, adding borders to the columns of a web page is reduced to assigning a generic CSS class, not surprisingly called “border,” to selected elements.

However, to understand more clearly how to add some subtle borders to certain containers, below I coded a whole new example that uses the CSS class to accomplish this task in a few simple steps:

Basic example on using BlueTrip (using the border class)

BlueTrip CSS Grid example using the border class

As you can see, the above example looks pretty similar to the one that you saw in the previous segment, with one slight difference: a couple of web page columns have been assigned the “border” CSS class, which adds a fancy border to the right of those elements, in this way making them look a bit more elegant.

In addition, here’s a simple screenshot that shows how the previous web document is rendered by the browser, after incorporating the borders. Here it is:

Now that you learned how to assign borders to columns on a web page using the “border” CSS class, I’m going to explain how to use another class provided by BlueTrip for building some fancy HTML headers.

Want to see how this will be done? Then click on the link below and read the following section.

Adding Borders to Web Page Columns with BlueTrip CSS – Assigning fancy CSS classes to HTML headers

In reality, the BlueTrip CSS framework comes equipped by default with some useful CSS classes that can be used for spicing up the look of different elements of a web document. In this particular case, I’m going to show you how to use one of these classes, called “fancy,” for giving an elegant style to text-based elements.

The example below demonstrates how to assign this class to all of the H2 headers included in a web page.

Basic example on using BlueTrip (using the fancy class)

BlueTrip CSS Grid example using the fancy class

Level 2 heading

From the above example, it’s clear to see how simple it is to turn boring H2 headers into elegant elements by using the “fancy” CSS class of BlueTrip. Since the code sample speaks for itself, I suggest you look at the following image, which shows how the previous web page is displayed on the browser:

Not too bad, huh? As you’ll possibly agree with me, BlueTrip makes it really easy to add “fancy” styles to HTML headers on a web document. In the above example, these styles were added to a few H2 elements, but naturally this process can be applied to other text-based elements, such as paragraphs and lists as well.

And with this last hands-on example, I’m finishing this second tutorial on working with the BlueTrip CSS framework. As always, feel free to edit all of the code samples shown in this article, so you can get a better understanding of using helpful CSS classes that come bundled with BlueTrip.

Final thoughts

In this second chapter of the series, I showed you how to use some handy CSS classes that come with the BlueTrip CSS framework to add borders to web page columns and create truly fancy H2 headers.

In the next episode, I’m going to explore a few more CSS classes provided by the framework, which will be used for displaying eye-catching variations of HTML headers. Don’t miss the upcoming part!

Using the BlueTrip CSS Framework`s Thin and Caps Classes (By: Alejandro Gervasio)

anhnl — Tue, 31 Aug 2010 03:07:31 +0000

Using the BlueTrip CSS Framework`s Thin and Caps Classes

In this third installment of a series on the BlueTrip CSS framework, I discuss the usage of the “thin” and “caps” CSS classes that come with it. These classes can be really useful for adding a more elegant touch to HTML headers, lists, and so forth.

In case you haven’t heard about it yet, BlueTrip is a powerful CSS framework that combines the best features provided by two popular contenders in this terrain, that is BluePrint CSS and Tripoli respectively. So, if you want to shorten the development time required for building your own web sites by using the BlueTrip CSS framework, then in this group or articles you’ll find a comprehensive guide that will show you how to work with its most relevant features. These include the ability to create complex web page layouts, as well as its numerous bundled CSS classes, handy for styling headers, paragraphs, lists, and so forth in a very quick and simple way.

Naturally, if you’ve been a patient reader and went through the two preceding tutorials of this series, you have a pretty solid background in building simple web page designs and styling H2 elements with BlueTrip. In those two tutorials I developed a few basic examples that demonstrated how to accomplish these tasks by means of the generic “span-x” and “fancy” CSS classes that come included by default in the framework.

Indeed, it’s extremely simple to provide HTML headers and other text-based web page elements with an elegant style by way of the CSS classes that come with BlueTrip. It’s also valid to stress, though, that the framework provides some other classes that permit you to turn headers and paragraphs into fancy elements.

So, based on this ability of BlueTrip, in the next few lines I’m going to take a closer look at its “thin” and “caps” CSS classes. These can be used for creating elegant variations of any text-based web page elements, including the ones mentioned before.

Are you ready to learn how to work with these new CSS classes? Then start reading now!

Using the BlueTrip CSS Framework`s Thin and Caps Classes – Review: the fancy CSS classes

Before I show you how to work with the “thin” and “caps” CSS classes offered by BlueTrip to style HTML headers, I’d like to reintroduce an example developed in the previous chapter of this series. It demonstrated how to add an elegant style to some H2 elements of a web document by utilizing the framework’s “fancy” CSS class. This particular example looked like this:

Basic example on using BlueTrip (using the fancy class)

BlueTrip CSS Grid example using the fancy class

Level 2 heading

As I mentioned before, in the above example the “fancy” CSS class that comes with BlueTrip has been assigned to some H2 elements of a basic web document, in this way turning them into more elegant headers. This is demonstrated by the image below:

While the example in question is rather simplistic, it shows how easy it is to produce interesting variations of a common HTML element by using only a single CSS class.

However, the BlueTrip framework also gives web designers the ability to use other CSS styles for providing certain text-based elements with a fancy look. In the next section I’m going to examine more closely a brand new CSS class called “thin,” which can be utilized to make selected web page elements a bit “thinner.”

This topic will be discussed in detail in the following segment, so click on the link below and keep reading.

Using the BlueTrip CSS Framework`s Thin and Caps Classes – Working with the thin CSS class

If you’re not completely satisfied with the visual appearance achieved when using the “fancy” CSS class that you learned before, the BlueTrip framework provides other classes that will produce useful variations of any text-based element included in a web document.

To demonstrate this concept more clearly, I’m going to develop a brand new example. It will assign another CSS class called “thin” to some H2 headers within a basic web page to make them look thinner. The example looks like this:

Basic example on using BlueTrip (using the thin class)

BlueTrip CSS Grid example using the thin class

Level 2 heading

As show before, the above sample web page not only creates a simple layout using the already familiar “span-x” CSS classes that you learned in previous chapters of this series, but it assigns the ”thin” CSS classes to a few H2 elements, making them look a bit more elegant. Of course, this particular class (and others, naturally) can be applied to any text-based element of the web page, so I suggest you do that as homework.

In addition to the above code sample, here’s a complementary image that shows how the H2 headers of the example page are displayed after assigning the “thin” CSS class to them. Here it is:

Not too bad, right? Undeniably, BlueTrip provides web designers with a solid foundation of CSS classes that permits you to change the look of HTML headers, paragraphs, lists and so forth very easily. And speaking of the visual appearance of text-based elements, what if you wish to make them be displayed entirely in upper case in the browser?

Well, thanks to the existence of another CSS class that comes with BlueTrip called “caps,” this process can be accomplished with minor hassles. I’d like to finish this tutorial by showing you a simple usage of this specific class.

Therefore, to learn how this will be utilized in a concrete example, read the upcoming section. It’s only one click away.

Using the BlueTrip CSS Framework`s Thin and Caps Classes – Using the caps CSS class

In reality, upper casing any text-based web page element with BlueTrip is reduced to assigning to the element a specific CSS class called “caps.” Since its usage is very similar to working with the “thin” and “fancy” classes discussed previously, in this particular case I’m only going to create a simple example, so you can see how it works.

That being said, here’s the code sample that shows how to use the “caps” CSS class. Look at it, please:

Basic example on using BlueTrip (using the caps class)

BlueTrip CSS Grid example using the caps class

Level 2 heading

Here you have it. As demonstrated above, the “caps” CSS class has been assigned in this specific case to all of the H2 headers of the previous web page. So, in consequence, these elements will be displayed in upper case on screen, as clearly illustrated by the following screen capture:

As I mentioned earlier, the BlueTrip CSS framework allows you to change the visual appearance of text-based elements in a very quick and simple fashion, while maintaining a stricter semantic meaning with reference to the CSS classes that it uses. This is not applicable when positioning columns across a web document. But as you know, everything in life comes at a cost, and this isn’t an exception.

So now you know how to use the “thin” and “caps” CSS classes provided by BlueTrip, to produce elegant variations of H2 headers. If you still have any doubts about how to work with these classes, I suggest you try assigning them to other text-based elements to see how they affect their visual appearance.

Final thoughts

And that’s all for the moment. In this third installment of the series, I discussed the usage of the “thin” and “caps” CSS classes that come with BlueTrip, which can be really useful for adding a more elegant touch to HTML headers, lists, and so forth.

In the upcoming chapter, I’m going to continue exploring the useful capabilities offered by BlueTrip, this time for displaying both ordered and unordered lists.

Don’t miss the next article!

Styling Unordered and Ordered HTML Lists with BlueTrip (By: Alejandro Gervasio)

anhnl — Tue, 31 Aug 2010 02:56:39 +0000

Styling Unordered and Ordered HTML Lists with BlueTrip

Welcome to the fourth part of a seven-part series on the BlueTrip CSS framework. In this part, I explain how to use the framework’s default styles to enhance the visual appearance of both ordered and unordered HTML lists. This is an easy and straightforward process.

If you ever wondered what makes a CSS framework a solid web design tool, then you may realize that it must provide a well-trusted set of style resetting classes and a clean background grid, plus the ability to quickly style common HTML elements in different ways, such as headers and paragraphs, lists and links, forms and tables, and so forth.

Fortunately, nowadays there’s a group of CSS frameworks that suit most of these requirements. This list includes BlueTrip, which claims to put together the best features offered by BluePrint CSS and Tripoli (hence its name). So, if you’re a web designer who’s searching for a comprehensive guide that shows you how to work with this popular CSS framework, then this group of articles might be the material that you need.

And now that you’ve been introduced to the main goal of this series, it’s a good time to review the topics that were covered in the last article. In that article I developed a few basic examples that demonstrated how to use the “thin” and “caps” CSS classes that come with BlueTrip to produce some elegant variations of H2 headers.

Nonetheless, when it comes to styling text-based web page elements quickly, BlueTrip offers numerous interesting and appealing possibilities. Thus, in this fourth part of this series I’m going to discuss how to style both ordered and unordered lists using the default CSS classes provided by BlueTrip.

Now, it’s time to take a closer look at the specific capabilities offered by the BlueTrip CSS framework.

Styling Unordered and Ordered HTML Lists with BlueTrip – Review: the thin and caps CSS classes

In the previous installment I explained how to assign the “thin” and “caps” CSS classes that come with BlueTrip to style some H2 headers on a basic web page. Below I reintroduced a couple of examples developed in that article that show how to accomplish this process in a simple manner. Here they are:

(example on using the ‘thin’ CSS class)

Basic example on using BlueTrip (using the thin class)

BlueTrip CSS Grid example using the thin class

Level 2 heading

(example on using the 'caps' CSS class)

Basic example on using BlueTrip (using the caps class)

BlueTrip CSS Grid example using the caps class

Level 2 heading

As you can see from the code samples shown above, it’s extremely easy to produce fancy variations of H2 headers and other text-based web page elements by means of the ”thin” and “caps” CSS classes. In the first case, the output generated by the browser will look similar to the following image:

While in the second example, the styled H2 headers will be displayed all upper cased, since that’s the purpose of the “caps” class. Here’s a complementary graphic that shows how these styles are rendered on screen:

Well, at this stage you’ll surely remember how to use the previous CSS classes in concrete cases. Thus, it’s time to explore other useful capabilities offered by BlueTrip.

As I expressed in the introduction, BlueTrip provides other default styles that will be automatically applied to other common web page elements such as unordered HTML lists. Therefore, in the next segment I’m going to code an example that will demonstrate how to accomplish this task.

To learn more on this topic, click on the link below and keep reading.

Styling Unordered and Ordered HTML Lists with BlueTrip – Styling unordered HTML lists

As with other CSS frameworks, BlueTrip allows you to set default styles for both unordered and ordered HTML lists. In this case, I’m going to create a whole new example for you, which will show how unordered lists are displayed on the browser when using the “screen.css” file of the framework.

That being explained, here’s how this new example looks:

Basic example on using BlueTrip (using unordered lists)

BlueTrip CSS Grid example using unordered lists

Level 2 heading

List Item 1

List Item 2

List Item 3
- Sub List Item 1
- Sub List Item 2
  - Sub List Item 1
  - Sub List Item 2
  - Sub List Item 3

Level 2 heading

True to form, the above code sample is very simple to follow. All it does is create a basic web page layout, where one of its containers includes a set of nested unordered HTML lists. So far, this is nothing unusual; however, things will become more interesting if you look at the following image, which shows how these lists are displayed on the browser. Here it is:

From the above picture, it’s clear to see how simple and quick styling unordered lists can be when using the BlueTrip CSS framework. Of course, it might not be the best style that can be assigned to these web page elements, but they do look quite elegant and professional.

Having explained briefly how to style unordered HTML lists with BlueTrip, I’m now going to show you how to do the same process with ordered lists. Naturally, I’ll cover this topic in the next section, so click on the link below and keep reading.

Styling Unordered and Ordered HTML Lists with BlueTrip – Styling ordered HTML lists

As I stated previously, the last example that I’m going to create for this tutorial will demonstrate how to style ordered lists with BlueTrip. As with unordered HTML lists, the framework provides a default style for these elements that make them look pretty polished.

The code sample below creates a basic web page in which some ordered lists have been included:

Basic example on using BlueTrip (using unordered lists)

BlueTrip CSS Grid example using ordered lists

Level 2 heading

List Item 1

List Item 2

List Item 3
1. Sub List Item 1
2. Sub List Item 2
  1. Sub List Item 1
  2. Sub List Item 2
  3. Sub List Item 3

Level 2 heading

Even though the above code sample looks very similar to the one developed in the previous segment, in this case it shows how an ordered HTML list is displayed with the BlueTrip styles applied to it. Of course, this example would be incomplete if I didn’t show the screen capture that depicts the browser’s output. Here it is:

Definitely, understanding how to work with ordered lists and BlueTrip is an extremely simple process, so I won’t spend more time explaining how the previous example works. However, I do encourage you to try including other HTML elements to see how they’re rendered using the default styles provided by the framework. It’ll be an educational experience, trust me.

Final thoughts

In this fourth part of the series, I explained how to use the default styles provided by BlueTrip to enhance the visual appearance of both ordered and unordered HTML lists. As you saw, this is a simple process, so you shouldn’t have major problems grasping its logic.

In the upcoming article, I’m going to discuss how to work with definition lists when using the BlueTrip CSS framework. Therefore, now that you’ve been warned about the topics that will be covered in the next tutorial, you can’t miss it!

Styling Definition Lists with the BlueTrip CSS Framework (By: Alejandro Gervasio)

anhnl — Tue, 31 Aug 2010 02:36:29 +0000

Styling Definition Lists with the BlueTrip CSS Framework

Welcome to the fifth part of a seven-part series on the BlueTrip CSS framework. In this part, you’ll learn how to style definition lists with BlueTrip and how to assign its default “fancy” CSS classes to a few H2 and H3 headers. You’ll see that this flexible framework allows you to apply different styles to web page elements in a quick and simple manner.

In the last few months, a new CSS framework has gained considerable popularity with many web designers due to its remarkable styling capabilities. These capabilities permit developers to create consistent web page layouts very quickly and with minor effort.

As you might have guessed, I’m talking about BlueTrip, an impressive framework that claims to gather in one single piece of software the best features provided by two other contending frameworks, BluePrint and Tripoli. Thus, if you feel intrigued and want to learn how to start using the BlueTrip CSS framework for developing your own web sites, then this series of articles might be what you need.

And now that you know what to expect from this group of tutorials, it’s time to review the topics that were covered in the last one. In that specific part of the series, I explained how to use the default styles provided by BlueTrip to polish the visual appearance of unordered and ordered HTML lists. It was an easy-to-grasp process.

As you may have realized, though, the BlueTrip CSS framework comes with many other default CSS classes that permit you to easily style other common HTML elements, such as forms, tables, definition lists and so forth.

Therefore, in this fifth chapter of this series I’m going to explain how to style definition lists with BlueTrip. Additionally, you’ll learn how to assign the “thin” CSS classes that you learned in the previous articles for other HTML headers.

Are you ready to continue exploring all of these useful features offered by the BlueTrip CSS framework? Then let’s get started.

Styling Definition Lists with the BlueTrip CSS Framework – Review: unordered and ordered lists

Before I show you how to give a more appealing appearance to definition lists using BlueTrip, I’d like to reintroduce a couple of examples created in the previous tutorial. These example demonstrated how to perform this task for both unordered and ordered lists.

That being clarified, here’s how these examples were developed originally:

(example on styling unordered lists)

Basic example on using BlueTrip (using unordered lists)

BlueTrip CSS Grid example using unordered lists

Level 2 heading

List Item 1

List Item 2

List Item 3
- Sub List Item 1
- Sub List Item 2
  - Sub List Item 1
  - Sub List Item 2
  - Sub List Item 3

Level 2 heading

(example on styling ordered lists)

Basic example on using BlueTrip (using unordered lists)

BlueTrip CSS Grid example using ordered lists

Level 2 heading

List Item 1

List Item 2

List Item 3
1. Sub List Item 1
2. Sub List Item 2
  1. Sub List Item 1
  2. Sub List Item 2
  3. Sub List Item 3

Level 2 heading

Undeniably, the two code samples shown above are extremely simple to follow. All they do is put a few basic unordered and ordered HTML lists on a couple of web pages, something that you’ve done hundreds of times before.

Nonetheless, the most important facet of these examples is the output that they produce, since they use the CSS styles provided by default by BlueTrip. The following images show how the lists are displayed on the browser:

So far, everything looks good, as at this point you hopefully recalled how to style HTML lists with BlueTrip. Therefore, I’m going to demonstrate how this same process can be accomplished by using definition lists.

To learn more about how this procedure will be performed, you’ll have to click on the below link and read the following section.

Styling Definition Lists with the BlueTrip CSS Framework – Quickly styling definition lists with BlueTrip

In reality, the process of styling definition lists by using the default CSS styles given by BlueTrip doesn’t differ too much from using ordered and unordered HTML lists. All that is needed in this case is to include the definition lists in a web page; BlueTrip will simply do the rest automatically.

To clarify how BlueTrip deals with definition lists, here’s another code sample that incorporates these elements into a simple web page. Look at it, please:

Basic example on using BlueTrip (using definition lists)

BlueTrip CSS Grid example using definition lists

Level 2 heading

Definition list title 1: Description list 1
Definition list title 2: Description list 1; Description list 2

Level 2 heading

As you can see, the above web document includes a simple definition list with a few items. Now here’s where things get really interesting; if you try out this example on your browser, then you’ll get an output very similar to the one below:

Not too bad, right? In this case, BlueTrip has done its job, and the definition list mentioned previously has been provided with a decent appearance. Of course, it’s always possible to enhance the styles assigned to different HTML elements by default by the framework, but for now this will be left as homework for you.

So far, so good. Now that I’ve discussed how to style definition lists, it’s time to explore some other capabilities provided by the framework. With that idea in mind, in the last section of this tutorial I’m going to explain how to assign the “fancy” CSS classes that you learned in previous tutorials of the series to H2 and H3 HTML headers.

To see how this will be accomplished, click on the link below and read the next few lines.

Styling Definition Lists with the BlueTrip CSS Framework – Styling different HTML headers

In a previous chapter of the series I explained briefly how to assign the “fancy” CSS class provided by BlueTrip to a few H1 elements. Now it’s time to show you how to perform this task with H2 and h3 headers as well.

The code sample below does that:

Basic example on using BlueTrip (using h2 and h3 heading levels with fancy class)

BlueTrip CSS Grid example using h2 and h3 heading levels with fancy class

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

The above code sample demonstrates how to assign the ”fancy” CSS class to all of the h2 and h3 headers included in the pertinent web document. Since the code speaks for itself, I suggest you look at the following image, which shows the output generated by the browser:

Here you have it. At this point, you learned how to turn h2 and h3 headers into truly elegant elements by using the handy “fancy” CSS class packaged with BlueTrip. As usual, feel free to edit all of the code samples created in this article, so you can get a more solid background in the numerous features offered by this popular CSS framework.

Final thoughts

In this fifth chapter of this series, you learned how to style definition lists with BlueTrip and how to assign its default “fancy” CSS classes to a few H2 and H3 headers. From the examples developed earlier, it’s clear to see that the framework allows you to apply different styles to web page elements in a quick and simple manner.

In the forthcoming part, I’m going to discuss how to assign the “thin” and “caps” CSS classes reviewed in previous articles to H2 and H3 elements as well. So here’s my suggestion: don’t miss the next tutorial!

More Uses for the Thin and Caps CSS Classes in BlueTrip (By: Alejandro Gervasio)

anhnl — Tue, 31 Aug 2010 02:27:29 +0000

More Uses for the Thin and Caps CSS Classes in BlueTrip

In this sixth part of a seven-part series on the BlueTrip CSS framework, you will learn how to assign the “thin” and “caps” CSS classes to H2 and H3 elements of a web page. The use of these classes makes the elements look more elegant and visually appealing.

If you’re a web designer who wants to shorten the time required to create the page layouts used with your own web sites, then you may want to take a closer look at the BlueTrip CSS framework. It’s a solid library that will let you build all sorts of appealing designs using only a few handy CSS classes for positioning elements on a web document and giving them an elegant visual appearance.

Naturally, if you’ve read the preceding chapters of this series, then you now have a solid foundation in how to take advantage of the most relevant features offered by BlueTrip. In those tutorials I explained not only how to create basic web page layouts using its default CSS classes, but how to style different types of HTML lists in a quick and easy manner.

And speaking of the default CSS classes provided by BlueTrip, you’ll surely recall that in a previous article I discussed the use of the ones called “fancy,” “thin” and “caps” respectively. In that particular case they were assigned to all of the H2 elements included in a sample web page.

However, it’s also possible to assign these classes to other text-based HTML elements in the same effortless fashion. So, in this sixth episode of this series I’m going to explain how to apply the “thin” and “caps” classes to H3 headers, thus expanding your background in using BlueTrip even more.

Now that you know what to expect from this article, it’s time to see how to turn boring H3 HTML headers into fancy elements, thanks to the magic of BlueTrip. Let’s get started!

More Uses for the Thin and Caps CSS Classes in BlueTrip – Review: styling definition lists with BlueTrip

Just in case you haven’t read the previous article, where I discussed how to style definition lists by means of the default CSS styles given by BlueTrip, below I included an example which shows how to accomplish this task in a few simple steps.

Basic example on using BlueTrip (using definition lists)

BlueTrip CSS Grid example using definition lists

Level 2 heading

Definition list title 1: Description list 1
Definition list title 2: Description list 1; Description list 2

Level 2 heading

From the above example, it’s clear how simple it is to style definition lists by using the CSS classes provided by default by BlueTrip. In this case, the code of the previous (X)HTML file is very easy to follow, so skip over it and pay attention to the following image, which shows the corresponding output generated by the browser:

Well, now that you’ve recalled how to style definition HTML lists with the BlueTrip CSS framework, it’s time to explore some of its other handy features. In the next section I’m going to discuss how to assign the already familiar “thin” CSS classes to the H3 elements of a basic web page.

The whole styling process will be really interesting, trust me. To learn more about it, click on the link that appears below and read the following segment.

More Uses for the Thin and Caps CSS Classes in BlueTrip – Tying thin CSS classes to H3 elements

As I expressed in the section that you just read, it’s possible to assign the “thin” CSS class provided by default by BlueTrip to any text-based HTML element. In a previous tutorial of the series, I explained how to use the class with H2 headers, but in this particular case I’d like you to see how this same process can be applied to H3 headers as well.

Basically, the code sample that performs this task is as follows:

Basic example on using BlueTrip (using h2 and h3 heading levels with thin class)

BlueTrip CSS Grid example using h2 and h3 heading levels with fancy class

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

As shown above, it’s extremely simple to turn H2 and H3 elements into thinner ones, by assigning to them the “thin” CSS class. What’s more, the following image should give you a clear idea of how these elements are rendered on the browser after being styled:

Pretty nice, huh? It’s clear to see how easy it is to create a fully-styled web page layout with BlueTrip. But there’s more to come. It’s also feasible to convert text-base HTML elements to their upper case versions by means of the “caps” CSS class that you learned in a preceding article of this series.

With this idea in mind, in the section to come I’m going to develop another example similar to the one that you just saw, but this time the H2 and H3 headers will be styled with the “caps” class.

To learn the full details of this styling process, click on the link below and read the following segment.

More Uses for the Thin and Caps CSS Classes in BlueTrip – Assigning caps CSS classes to H2 and H3 elements

In reality, turning H2 and H3 headers into upper case elements in only a matter of assigning to them the “caps” BlueTrip CSS class, and nothing else. The following example demonstrates the use of this class with both H2 and H3 headers. Here it is:

Basic example on using BlueTrip (using h2 and h3 heading levels with caps class)

BlueTrip CSS Grid example using h2 and h3 heading levels with caps class

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Here you have it. From the above code sample, it’s clear to see that upper-casing H2 and H3 headers is a truly straightforward process that can be tackled with minor effort.

Considering that the previous example is indeed way too easy to follow, you should look at the following screen shot, which shows how these HTML headers are displayed on screen after being styled with the “caps” CSS class:

As you might have guessed, it’s also possible to upper case all of the text-based HTML elements of a web document by using the “caps” class. In this particular case I decided to perform this task only with H2 and H3 headers, but you can try it out with lists, paragraphs, and so forth. The possibilities are endless.

And finally, feel free to edit all of the code samples shown in this article to help you build a better background in using the most relevant styles that come packaged by default with the BlueTrip CSS framework. The experience will be educational and why not, also fun!

Final thoughts

In this sixth episode of the series, you learned how to assign the “thin” and “caps” CSS classes provided by BlueTrip to H2 and H3 elements of a web page. As you saw in the complementary images that accompanied each of the previous code samples, the use of these classes makes the elements look more elegant and visually appealing.

Moving forward, in the last installment I’m going to demonstrate how to work with three useful classes that come with this framework, called “success,” “warning” and “error” respectively. As their names suggest, they can be used for informing users in a visual and clean way when some of these events occur.

Don’t miss the last part of the series!

Using BlueTrip`s Success, Notice and Error CSS Classes (By: Alejandro Gervasio)

anhnl — Mon, 30 Aug 2010 09:35:16 +0000

Using BlueTrip`s Success, Notice and Error CSS Classes

Welcome to the final installment of a series on the BlueTrip CSS framework. Made up of seven comprehensive tutorials, this series shows you how to master the main CSS classes that come bundled with BlueTrip through a decent variety of code samples.

Among the numerous CSS frameworks available nowadays, BlueTrip is definitely one of the most popular with web designers. It comes with a set of remarkable features that allow programmers to create all sorts of web page layouts in a truly effortless way. Therefore, if you’re interested in learning how to put this CSS library to work for you by means of an approachable guide, then you should start reading this article right now.

And now that you’ve been introduced to the mail goal of this article series, it’s time to review the topics that were discussed in the last tutorial. In that part of the series, I explained how to convert H2 and H3 HTML headers into elegant elements by assigning to them the “thin” and “caps” CSS classes provided by default by BlueTrip.

Logically, this process was demonstrated for example purposes, since you’re free to apply these classes to all of the text-based elements of a web page, not just a few HTML headers. It’s valid to stress, though, that BlueTrip also comes with a handy set of three predefined classes, called “success,” “notice” and “error” respectively, for informing users about the occurrence of these specific events in a visual and appealing manner.

In most cases, these classes should be applied to divs, either for displaying errors and warning messages, or when a determined process has completed successfully. But naturally, they can be tied to any other HTML elements available as well.

In summary, in this last part of the series I’m going to take a close look at these CSS classes and at how to use them in concrete cases. Now, let’s get rid of the preliminaries and conclude this educational study of the BlueTrip CSS framework. Let’s go!

Using BlueTrip`s Success, Notice and Error CSS Classes – Displaying successful messages with BlueTrip

As I expressed in the beginning, BlueTrip provides three predefined CSS classes that can be utilized for displaying errors, notices and successful messages with ease. First, I’m going to create a simple example that will demonstrate how to work with the “success” CSS class. In this particular case, the class will be assigned to a paragraph; the code sample that does that is the following:

Basic example on using BlueTrip (using success class)

BlueTrip CSS Grid example using success class

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

As seen in the above example, the “success” CSS class has been assigned to some paragraphs, which admittedly is nothing spectacular. Nevertheless, if you take a look at the following image, you’ll get a better idea of how this class can be used for displaying all sorts of confirmation messages:

As you can see, the “success” CSS class assigns a soft green background color to the selected paragraphs, thus indicating to users that any action taken by them has been accomplished successfully. Most likely you’ll want to use other styles to display this kind of message to your visitors, but the default “success ” CSS class might be worth a look.

Now that you hopefully learned how to work with this handy BlueTrip’s CSS class, it’s time to take a close look at another one, intended to be used for displaying notices and warnings in general. This class is called, not surprisingly, “notice,” and it’ll be analyzed in detail in the following section.

Using BlueTrip`s Success, Notice and Error CSS Classes – Showing notices and warnings with BlueTrip

Showing notices and warnings: working with the “notice” CSS class

As its name implies, the “notice” CSS class provided by BlueTrip is used for displaying notices and warnings. That’s it. So what is the difference between this one and the “successful” class discussed in the previous section? Well, not much really, since when an element is styled with the “notice” class, it’ll be assigned a yellow background color.

The code sample below shows how to use this CSS class with a few paragraphs:

Basic example on using BlueTrip (using notice class)

BlueTrip CSS Grid example using notice class

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

If you examine the above example, you’ll realize that it looks nearly identical to the one created in the preceding segment, except for one subtle difference: there are three paragraphs that have been assigned the “notice” CSS class.

Logically, the code sample itself won’t tell you much about how these paragraphs look, but the following image should dissipate any possible doubts that you might have:

As you can see, the “notice” CSS class should be utilized for displaying some kind of warning on a web site in the appropriate cases, and it can be easily enhanced by adding custom styles as well.

So far, so good. Now that you’ve grasped the logic that stands behind applying “notice” CSS classes to elements of a web document, it’s time to examine another default CSS class bundled with BlueTrip. In this case, I’m talking about the “error” class, which should be used for displaying error messages on a web page.

This topic will be discussed in depth in the last section of this article.

Using BlueTrip`s Success, Notice and Error CSS Classes – Displaying errors

The last example that I’m going to code in this article will be aimed at illustrating how to work with the “error” CSS class bundled with BlueTrip. As you may guess, this class should be used for displaying several kinds of error messages, and a simple demonstration of its usage is shown in the code sample below:

Basic example on using BlueTrip (using error class)

BlueTrip CSS Grid example using error class

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

Level 2 heading

Level 3 heading

In this case, the “error” CSS class again has been assigned to some paragraphs to make them stand out from the rest of the elements that compose the web page. Naturally, the best way to understand how this CSS class does its business is by means of an illustrative image, so below I’ve included one for you:

As you can see above, each paragraph that has been assigned the “error” CSS class now has a red background color, which makes it ideal for displaying information related to failures in general.

And with this last example, I’m concluding the final tutorial of this series on the capabilities of the BlueTrip CSS framework. As usual, feel free to edit all of the code samples included in this article, so you can acquire more practice using this useful CSS library. Happy styling!

Final thoughts

It’s hard to believe, but we’ve come to the end of this series. Hopefully the whole experience has been instructive for you, since in this group of articles you were provided with an approachable guide to mastering the main features that come with the BlueTrip CSS framework.

As with other popular frameworks, the major drawback of BlueTrip is that it uses CSS classes that aren’t semantically meaningful. From a purist point of view, this is a serious down side. On the other hand, if you need to shorten the amount of time it takes to design your web sites, BlueTrip is a good option to consider.

See you in the next web development tutorial!

BearSols

A Two-Column Web Page Layout Based on the Rule of Thirds (By: Alejandro Gervasio)

Header

Subheading

Subheading

Subheading

Subheading

Header

Subheading

Subheading

Subheading

Extending the Rule Of Thirds for Web Page Layouts (By: Alejandro Gervasio)

Header

Subheading

Subheading

Subheading

Header

Subheading

Subheading

Subheading

Using a Background Grid to Assist Web Page Layout (By: Alejandro Gervasio)

Header

Subheading

Subheading

Subheading

Subheading

Introducing the BlueTrip CSS Framework (By: Alejandro Gervasio)

BlueTrip CSS Grid example showing the grid

BlueTrip CSS Grid example showing the grid

BlueTrip CSS Grid example showing the grid

Adding Borders to Web Page Columns with BlueTrip CSS (By: Alejandro Gervasio)

BlueTrip CSS Grid example showing the grid

BlueTrip CSS Grid example using the border class

BlueTrip CSS Grid example using the fancy class

Level 2 heading

Level 2 heading

Level 2 heading

Level 2 heading

Level 2 heading

Using the BlueTrip CSS Framework`s Thin and Caps Classes (By: Alejandro Gervasio)

BlueTrip CSS Grid example using the fancy class

Level 2 heading

Level 2 heading

Level 2 heading

Level 2 heading

Level 2 heading

BlueTrip CSS Grid example using the thin class

Level 2 heading

Level 2 heading

Level 2 heading

Level 2 heading

Level 2 heading

BlueTrip CSS Grid example using the caps class

Level 2 heading

Level 2 heading

Level 2 heading

Level 2 heading

Level 2 heading

Styling Unordered and Ordered HTML Lists with BlueTrip (By: Alejandro Gervasio)

BlueTrip CSS Grid example using the thin class

Level 2 heading

Level 2 heading

Level 2 heading

Level 2 heading

Level 2 heading

BlueTrip CSS Grid example using the caps class

Level 2 heading

Level 2 heading

Level 2 heading

Level 2 heading

Level 2 heading

BlueTrip CSS Grid example using unordered lists

Level 2 heading

Level 2 heading

Level 2 heading

Level 2 heading

Level 2 heading

BlueTrip CSS Grid example using ordered lists

Level 2 heading

Level 2 heading