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 - Using the caps CSS class (Page 4 of 4 )
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">
<h1 class="caps">BlueTrip CSS Grid example using the caps class</h1>
</div>
<div class="span-8">
<h2 class="caps">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="caps">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="caps">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="caps">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="caps">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>
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!
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
Style Sheets 
HTML5 Boilerplate Introduction
