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.
Using the BlueTrip CSS Framework`s Thin and Caps Classes - Review: the fancy CSS classes (Page 2 of 4 )
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">
<h1 class="fancy">BlueTrip CSS Grid example using the fancy class</h1>
</div>
<div class="span-8">
<h2 class="fancy">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 class="span-8">
<h2 class="fancy">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 class="span-8 last">
<h2 class="fancy">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 class="span-16">
<h2 class="fancy">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 class="span-8 last">
<h2 class="fancy">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>
</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.
Style Sheets 
HTML5 Boilerplate Introduction
