tangentlabs/django-oscar — pull request #1111 by informa (2013-12-31 06:43:51+00:00)
Title: 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

{% block breadcrumbs %}{% endblock %}

{% block column_left %}{% endblock %}

{% block content %}{% endblock %}

```

**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

{% block breadcrumbs %}{% endblock %}

{% block column_left %}{% endblock %}

{% block content %}{% endblock %}

```