The ability to reuse blocks of code is a blessing and a time saver to programmers everywhere. Web sites are too distinctive to allow you to do very much of this, right? Wrong. You can build a CSS framework to give you the flexibility you need, and use the time you save for the parts of your project that matter most. This five-part series shows you how.
Building a Simple CSS Framework - Defining a CSS file for creating liquid web page layouts (Page 3 of 4 )
In the previous section, you learned how to build a basic reset CSS file for assigning default styles to certain common elements of a web document. Since this file is the first module of the CSS framework that I’m currently developing, it’s time to create its second component. It comprises a CSS file that will be tasked with building several liquid web page layouts.
Of course, there are many approaches that can be implemented for building these types of layouts pretty quickly. In this case I’m going to use a basic schema that will allow us to define generic containing areas, title sections and logically primary columns across a web document with extreme ease.
Now that I have explained how this second CSS file is going to function, please take a close look at its definition, which is shown below:
font: normal 8pt Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0 0 18px 0;
}
Now that you have seen how the above layout CSS file has been created, things are getting much more interesting. As you can see, the file in question not only redefines the style of common web page elements, like paragraphs and headers, but it declares a few basic CSS classes that can be used for creating a liquid two-column layout in a straightforward way.
The respective side and main columns of the web document have been styled via the “#leftbar” and “#centerbar” selectors, but aside from these, there are three additional classes, called “title,” “box” and “content” respectively, that allow you to build entire containing boxes and title sections pretty easily.
Of course, as I mentioned before, there are many other approaches that can be utilized for building generic containers for a concrete web page; however, the file that I defined above is quite simple to code and read, even for inexperienced web designers.
At this stage, assuming that you have already grasped how the previous CSS file does its thing, it’s time to set up an introductory example to test the capabilities of this CSS framework, which is now composed of two source files.
The purpose of the example in question will be demonstrating how simple it can be to create a two-column liquid web page layout by using the two CSS files coded previously.
You can learn the complete details of this brand new example if you read the next few lines. It’s only one click away.
Style Sheets 
/ 9 
HTML5 Boilerplate Introduction
