A few weeks ago we were doing a bit of surfing and came across a new CSS framework called the 960 Grid System. After playing about with it for a while we quickly saw its potential. In order train ourselves on the framework we decided to see how we could change our site. You are now looking at the result.
We use the framework by giving each of our div tags classes based on its width and its parent/child relationship. The amount of time saved in creating the 'bones' of the site was considerable. The only drawback being an extra 4k download per site. I think we can allow for that!
This page, for example, is built using the grid structure indicated to your right. Six divs with a class attributed to them. The framework does the rest of the layout for you. Here is the code:
Job Done. If you desire to change the height of the divs you can give the div an id and add a height property in your own stypesheet.
If you look at my code however, I've wrapped the divs in other divs, this was to allow me to sort images on different layers on the page, but the essence is exactly the same.
This learning experience, if you can call it that, has convinced us this will be a valuable tool for future projects.
We use the framework by giving each of our div tags classes based on its width and its parent/child relationship. The amount of time saved in creating the 'bones' of the site was considerable. The only drawback being an extra 4k download per site. I think we can allow for that!
This page, for example, is built using the grid structure indicated to your right. Six divs with a class attributed to them. The framework does the rest of the layout for you. Here is the code:<body>
<div class="container_16">
<div id="header" class="grid_10">
</div>
<div class="grid_6">
</div>
<div class="grid_16">
</div>
<div id="news" class="grid_12">
</div>
<div id="links" class="grid_4">
</div>
<div id="footer" class="grid_16">
</div>
</div>
</body>
Job Done. If you desire to change the height of the divs you can give the div an id and add a height property in your own stypesheet.
If you look at my code however, I've wrapped the divs in other divs, this was to allow me to sort images on different layers on the page, but the essence is exactly the same.
This learning experience, if you can call it that, has convinced us this will be a valuable tool for future projects.