Using BlueTrip`s Success, Notice and Error CSS Classes - Displaying errors (Page 4 of 4 )
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Basic example on using BlueTrip (using error class)</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection">
<![endif]-->
</head>
<body>
<div class="container">
<div class="span-24">
<h1 class="caps">BlueTrip CSS Grid example using error class</h1>
</div>
<div class="span-8">
<h2 class="caps">Level 2 heading</h2>
<h3 class="caps">Level 3 heading</h3>
<p class="error">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>
<h3 class="caps">Level 3 heading</h3>
<p class="error">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>
<h3 class="caps">Level 3 heading</h3>
<p class="error">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>
<h3 class="caps">Level 3 heading</h3>
<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>
<h3 class="caps">Level 3 heading</h3>
<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>
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!
Style Sheets 
HTML5 Boilerplate Introduction