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

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:

<!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 (using the fancy class)</title>

<!--[if IE]>

<![endif]-->

</head>

<body>

<div>

<h1>BlueTrip CSS Grid example using the fancy class</h1>

</div>

<div>

<h2>Level 2 heading</h2>

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

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

</body>

</html>

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:

<!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 (using the thin class)</title>

<!--[if IE]>

<![endif]-->

</head>

<body>

<div>

<h1>BlueTrip CSS Grid example using the thin class</h1>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

</body>

</html>

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:

<!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 (using the caps class)</title>

<!--[if IE]>

<![endif]-->

</head>

<body>

<div>

<h1>BlueTrip CSS Grid example using the caps class</h1>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

</body>

</html>

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!

Member Login or Register Here

Products & Services

Knowledgebase

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