guardian/guss-layout — pull request #5 by kaelig (2014-06-04 17:49:03+00:00)
Title: Add per-breakpoint fallbacks for columns without support for CSS3

- Remove support for column rules as it was not used in any product
- Add per-breakpoint fallbacks for columns without support for CSS3:

### Sass
```scss
@include guss-columns(
$base-class: '.advanced-test',
$css3-columns-support: false, // Because buggy in some versions of WebKit
$columns-fallback-width: (
tablet: 720px,
desktop: 940px
),
$columns-fallback-columns: (
tablet: 2,
desktop: 4
)
);
```

Outputs:

### CSS

```css

.advanced-test {
margin-left: -10px;
margin-left: -1rem;
margin-right: -10px;
margin-right: -1rem;
zoom: 1;
}
.advanced-test:after, .advanced-test:before {
content: '';
display: table;
}
.advanced-test:after {
clear: both;
}

.advanced-test__item {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
float: left;
width: 100%;
height: 100%;
margin-left: 10px;
margin-left: 1rem;
margin-right: 10px;
margin-right: 1rem;
}
@media all and (min-width: 46.25em) {
.advanced-test__item {
width: 350px;
width: 35rem;
}
}
@media all and (min-width: 61.25em) {
.advanced-test__item {
width: 220px;
width: 22rem;
}
}
```

It allows us to fix a couple of bugs with these patterns on these theguardian.com beta patterns, while keeping the same markup and almost the exact same mixins configuration:
![screen shot 2014-06-04 at 18 47 53](https://cloud.githubusercontent.com/assets/85783/3177457/6cd048e8-ec10-11e3-9f6e-9f5bb7391879.PNG)
![screen shot 2014-06-04 at 18 47 47](https://cloud.githubusercontent.com/assets/85783/3177458/6ea37d48-ec10-11e3-885c-cf2e6c5ccd37.PNG)

![ ](http://media.giphy.com/media/u6pW4jDDpGQmY/giphy.gif)