Creating a Three-Column Liquid Layout with a CSS Framework
(Page 1 of 4 )
Web-based frameworks are very popular these days. They provide programmers with a set of reusable components, usually packaged in the form of classes and functions, which allow them to build complex web applications very quickly and with minor efforts. In these tutorials you’ll find an approachable guide to how to build a simple CSS framework that will let you create some typical web page layouts in a very short time, using only a few basic style sheets.
Introduction
On the server side, solid frameworks like Zend, Code Igniter, Rails and Fusebox, to cite a few, are the preferred tools of many developers nowadays (including myself), particularly when it comes to creating full-featured database-driven programs. However, it’s fair to say that the “framework” concept can also be applied successfully to the client-side area, and more specifically in the terrain dominated by CSS.
It’s perfectly possible to create a CSS framework that permits you to build several types of web page layouts without having to code multiple style sheets over and over again. That's the subject of this series of articles. Of course, here I’m not planning to develop a large CSS framework like Yahoo! Grid CSS, because that would be pretty useless, and it’s out of the scope of this series. No, we're going to build something small but useful.
In the initial chapter of the series, I coded a couple of CSS files, where the first one was used to assign default styles to common elements of a web document, and the second one was utilized for constructing a classical liquid design, composed of two main columns.
In addition, the framework included some additional CSS classes that I used specifically for constructing generic containers and title sections across a web document, in this way abstracting this styling procedure.
This instructive journey has just started, though, since in this second installment of the series, I’ll be discussing how to build a three-column web page layout, by means of this CSS framework.
So, are you ready to learn this topic? Then start reading now!
Next: Review: the source files of the initial CSS framework >>
More Style Sheets Articles
More By Alejandro Gervasio
