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.
Using BlueTrip`s Success, Notice and Error CSS Classes - Displaying successful messages with BlueTrip (Page 2 of 4 )
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:
<!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 success class</h1>
</div>
<div class="span-8">
<h2 class="caps">Level 2 heading</h2>
<h3 class="caps">Level 3 heading</h3>
<p class="success">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="success">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="success">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>
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.
Style Sheets 
HTML5 Boilerplate Introduction
