Can CSS frames (ex: 960gs or Blueprintcss) be used without margins?
I see no point in using http://960.gs or http://blueprintcss.org if they apply margins other than small magazine / promotional brochure layouts. Is there a way that I can use them to meet certain design requirements like a navbar that can actually touch / wrap around the header? Any input to use these borderless frameworks (as they provide browser compatibility with developers below the CSS guru level) would be ideal. (Note: we are using JSF, this is also a development store, not a website store at all)
a source to share
I use this technique as my latest CSS layout technique:
http://www.codeofficer.com/blog/entry/css_grid_frameworks_960gs_without_margins/
I had the same problem once, and since I use this one, all headaches have marginalized gone. I am using ! Important 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>
CSS:
.c_12 .g_9, .c_16 .g_12 { width: 720px; } /* 960-full.css */
.content_main { width: 700px !important; margin-left: 15px;} /* style.css */
a source to share
You don't need to use grid classes for every div in your site. If you want a header, you don't need to follow the grid layout, then create your own header styles. You can also skip the grid entirely and just use the form and typography markup. Structures are an attempt to bring some consistency into your designs.
I'm using the main content outline, but the header area has its own custom layout.
a source to share