Semantic grid for oscar.

## Semantic grid for oscar.

This is a **possible** feature to oscar, in an attempt to clean up / remove the bootstrap grid classes from the markup in favour of semantic class wrappers that utilise Bootstrap mixin grid -- ie .makeFluidRow(); .makeFluidCol(3);.

```css
// Two/Three column layout use this wrapper .site-content-wrapper
// Two columns layout used on home,browse,search results and account pages
.site-content-wrapper {
    // 100% and clearfix
    .makeFluidRow();
}
.site-content-aside,
.site-content-left,
.site-content-right {
    .makeFluidCol(3);
}
// If two column layout Main content is smaller
.site-content-aside + .site-content-main {
    .makeFluidCol(9);
}
```

```css
// Login / register grid
.site-login-wrapper {
    .makeFluidRow();
}
.site-login,
.site-register {
    .makeFluidCol(6);
}
```

Bootstrap 2.3 grid classes ie, row-fluid, span1-12 are used to give page/layout structure but they also are non semantic and are not useful as css content wrappers.

**Other notes**

It is possible that this is more of a **discussion point** than a pull request, as there are so many template changes. But I think utilising bootstrap mixins is a better way to go forward for a default setup as people may have their own preferred grid system or css style guide pre built, making theming oscar easier.

### Reasons to keep/remove the grid.

**Keep:**

+ span1-12 easily stack responsively without additional code.
+ Bootstrap documentation makes it easy to add markup.

example:
 ```html
<div class="container-fluid page">
    <div class="page_inner">
        {% block breadcrumbs %}{% endblock %}
        <div class="row-fluid">

            <aside class="sidebar span3">
                {% block column_left %}{% endblock %}
            </aside>

            <div class="span9">
                {% block content %}{% endblock %}
            </div>

        </div><!-- /row-fluid -->
    </div><!-- /page_inner -->
</div><!-- /container-fluid -->
 ```

**Remove:**

+ Using bootstrap mixins on semantic classes makes it easier to upgrade bootstrap because class name changes won't affect the markup
+ Semantic classes will hopefully decrease overriding oscar templates for markup changes by increase flexibility to the css with semantic class wrappers making it easier to theme.

example:
```html
<div class="site-container">
    <div class="site-spacing">
        {% block breadcrumbs %}{% endblock %}
        <div class="site-content-wrapper">

            <aside class="site-content-aside">
                {% block column_left %}{% endblock %}
            </aside>

            <div class="site-content-main">
                {% block content %}{% endblock %}
            </div>

        </div><!-- /site-content-wrapper -->
    </div><!-- /site-spacing -->
</div><!-- /site-container -->
 ```