I don't see the point of using either http://960.gs or http://blueprintcss.org if they enforce margins other than for pretty magazine layouts/marketing-esq brochures. Is there a way I can use these to meet certain design requirements such as a navbar that can actually touch/wrap-around to the header? Any input to use these frameworks without margins (as they enforce browser compatability onto the less CSS guru level developers) would be ideal. (Note: we are using JSF, this is also a development shop not a web shop at all)
A:
You don't have to use the grid classes for every div on your site. If you're header doesn't need to follow the grid layout then create your own styles for the header. You can also skip the grid completely and just use the form & typography markups. The frameworks are an attempt to bring a bit of consistency to your projects.
I'm using blueprint for the main content but the header area has it's own custom layout.
Todd Smith
2009-05-14 21:10:38
+1
A:
I use this technique as my ultimate CSS layout technique:
http://www.codeofficer.com/blog/entry/css_grid_frameworks_960gs_without_margins/
I had the same issue once, and since I use that one, all the margin headaches has dissapear. I use !important overide when I need to use custom width/height.
The Code:
<div class="g_9 content_main">
This div should actually have 720px in width.
But I overide it using another class so now the width has become 700px,
and just in case it needs custom margin, we can always set it in the css :)
</div>
The CSS:
.c_12 .g_9, .c_16 .g_12 { width: 720px; } /* 960-full.css */
.content_main { width: 700px !important; margin-left: 15px;} /* style.css */
Adrian Liem
2009-06-25 05:25:35
A:
Here's a mod I wrote that works with the 960gs to help you create elements that touch, without rewriting the framework.