As we move away from YUI grids, it would be helpful if we could consistently add some classes to the primary sections of the page. That would allow us to style elements differently based on their container's class. I've already begun adding a "main" class to the <div> which is the primary "container" for the Bootstrap grid. It typically looks like this: <div class="main container-fluid"> <div class="row"> <div class="col-sm-5 col-md-4"> I would like to add an additional container that wraps the primary content region for the page. This container should have no style attached to it (as it might interfere with grid layout), but can serve as a context for styles within it. ----------------------------------------------- * .main * * ------------------------------------------- * * * * .main-content * * * * * * * * * .sidebar * -------------------------- * * * * * * * * * * * * * .row * * * * * * * .col-* * * * * * * * ...etc. * * * * * * -------------------------- * * * * * * * * ------------------------------------------- * * * ----------------------------------------------- The use I have right away is to style forms differently based on whether they are in the sidebar or the main-content area. Right now we have some CSS which depends on YUI grid classes, and we need to replace that which isn't dependent on the grid system we choose.
My diagram needs some tweaks -- it was off the top of my head. The .sidebar div is contained within the primary .row div, so .main-content will have to be moved.
+1
Hi Owen, as we had a lot of changes since - do we still want to keep this open?