search

nathansmith / unsemantic

Fluid grid for mobile, tablet, and desktop.
http://unsemantic.com
MIT License
1.38k stars 161 forks source link

100% wide container #37

Closed jkuss closed 10 years ago

jkuss commented 10 years ago

This is very low priority but I've found myself needing a wrapper for grid-container that will go 100% wide to apply a background image to a "band" or section of content.

See here: http://www.fieldscriptsifs.com/Pages/default.aspx (css .section wrapping grid-containers)

Is there anything you'd suggest or that could be easily added to this framework that stays in the spirit of unsemantic to accomplish this beyond adding it in to my CSS every time?

nathansmith commented 10 years ago

What you've suggested is pretty much what I do, when I need something to be 100% but also have a grid inside it…

<div class="background-goes-here">
  <div class="grid-container">
    ...
  </div>
</div>

Or, if for a site's header…

<header role="banner">
  <div class="grid-container">
    ...
  </div>
</header>

I don't really think there needs to be a framework level class="…" for this, because its sole purpose is to have a background color/image.

Or, in the case of the header, it is semantically describing what it does for the page via the ARIA role="banner".

More on ARIA roles and styling here…

http://adactio.com/journal/4267/