STYLE SHEETS

Introducing the BlueTrip CSS Framework

If you're looking for a good CSS framework for CSS beginners, look no further. This multi-part series introduces you to the BlueTrip CSS framework. In this first part, I will explain how to develop a basic web page design by using the core CSS classes provided by the framework. As you'll soon see, this process is quite straightforward, even if you currently don’t have a strong CSS background.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

November 11, 2009

TABLE OF CONTENTS:

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

</div>

</div>

</div>

</body>

</html>

If you try out the above (X)HTML file on your browser, then you'll see that the background grid has been hidden from display, as the "showgrid" CSS class has been removed from the main wrapping div. I suggest you play with this example a bit, turning the grid on and off as you're positioning elements across the web page, so you can produce two different versions of the layout being developed. It'll be an instructive and fun experience.

Final thoughts

In this introductory chapter of the series, I explained how to develop a basic web page design by using the core CSS classes provided by the BlueTrip CSS framework. As you saw for yourself, this process was quite straightforward, even if you don't currently have a strong CSS background.

In the next article, I'm going to discuss how to use the framework for adding gutters to columns of a web page, and borders as well. Thus, now that you've been warned about the topics that will be covered in the forthcoming tutorial, you can't miss it!

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.