Save Time Using CSS Frameworks.

Ever spent hours coding HTML and CSS trying to get your layout to look the way you want across all browsers? CSS frameworks can cut your time coding in half as well as look correct in newer and older web browsers. This framework uses the idea of a grid layout so everything will line up perfectly, it will also virtually cut all your time coding CSS for layout.

Blueprint CSS

Blueprint CSS is the first CSS framework I have used and my favorite. You start by structuring your HTML with a container that holds are of you columns, inside the columns you setup your divisions. If you look at the screen.css and scroll until you see the .span-(x) where x is a number. These are the division widths you will be using. If you look at some of the test pages on the site and view the source you will get an idea just how these divisions work.

So in these examples they use a total width of 950px… Again if you look at the screen.css you will see a list of widths, the total width of the content area in their example is 950px and they call it with the class .span-24. 24 is the key number here, this is the number you want all your columns to add up to for each row. For example, if you want 3 columns a sidebar, a content area and another side bar you would use: .span-4, .span-16 and .span-4 in that order. Notice how these add up to 24? The 24 in this example will always be 950px. There are many variations you can do with this, you can nest columns inside your span-(x) as long as in the end each row adds up to the outer container.

So I know what you are thinking, hey I dont want it to be set at 950px… What if I want a width of 1000px or 850px? Well your in luck, check this page out here, this is a blueprint css framework generator. Mess around with the numbers until you find your goal.

960 Grid CSS

I downloaded and messed around with 960 grid CSS framework and it seems to be pretty much the same concept as blueprint CSS. Check out the page I messed with.

For first example the grid has 12 columns and you declare the outermost container like so: container_12, then inside you just declare the divisions such as grid_2, grid_8 and grid_2 to add up to the 12. After each row you must declare a clear class since the columns are being floated.

960 Grid also has a grid generator on there website for your custom applications just like blueprint has theirs.

This is the basic structure of CSS frameworks, my advice to you is go to the one of the sites and check out the source, download the code and mess around with it. Once you get the hang of the setup you wont believe how much faster your coding will flow, and how clean everything will look.

Do you use CSS Frameworks?

Please add comments and feedback in the comments and let us know if you have used either of these methods.  This post was written by Mario Edgar, co-founder of m2volt.

Tags: , , , , , ,

© 2010 M2Volt all rights reseved

back to top