CFPro - ColdFusion Developer

I have been asked to show how I have used the 960Grid CSS framework in my Mango Blog skin. If you understand the 960Grid principles then it is really quite easy.
960Grid is only a framework for laying out content, it is not going to style your site or blog for you.

Here are the basics.

You start with a container Div, give it the class of the grid columns you want. You can choose from 12, 16 or 24. For a 12 column grid (like I am using here), the class you would use is be "container_12". The container Div is always made to 960px wide which is perfect for 1024 screen or bigger. If you want a fluid design then I am afraid you are going to have to look elsewhere! I believe there are a few around but may not be as quick and easy as 960Grid.

Anything contained within the container Div can now be put into the grid format.

To get a 2 column layout you would use something like:

<div class='container_12'>
  <div class="grid_9">...</div>
  <div class="grid_3">....</div>
  <div class="clear"></div>
</div>

Where “grid_9” sits on the left and is 9 columns and 700px wide. “grid_3” is next (and last) as is 3 columns and 220px wide. Each grid has a 10px margin on the left and right.
Take a look at http://960.gs/demo.html for a better idea of how the columns work. When you reach the end of the grid row you must clear all floating elements to start the next row.

To put the framework into my Mango Blog skin I added the stylesheets that are downloadable from their site and have used the code below:

Link to the stylesheets:

<link rel="stylesheet" href="<mango:Blog skinurl />assets/styles/960css/960.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<mango:Blog skinurl />assets/styles/960css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<mango:Blog skinurl />assets/styles/960css/text.css" type="text/css" media="screen" />

Add the classes to your layout:

<mango:Event name="beforeHtmlBodyStart" />
<div id="container" class="container_12">

    <cfinclude template="header.cfm">

    <div id="content_box">
    
     <div id="content" class="posts grid_9">
        <!--- Mango Blog code for the page --->
     </div>

     <div id="sidebar" class="grid_3">
       <ul class="sidebar_list">
          <!--- Mango Blog code for the sidebar. --->
       </ul>
     </div>    


    </div>
    <!--- footer.cfm includes a <div class="clear"></div> to start a new row --->
    <cfinclude template="footer.cfm">
</div>
<mango:Event name="beforeHtmlBodyEnd" />

At some point I may release the skin, but until then I hope this helps some people start building their own skins with 960Grid.