Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne

mirisuzanne/1_index.html

Created April 4, 2012 22:58
Show Gist options
  • Star 15 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save mirisuzanne/2306353 to your computer and use it in GitHub Desktop.
Save mirisuzanne/2306353 to your computer and use it in GitHub Desktop.
Download ZIP
Suggested syntax for responsive Susy layouts
Raw
1_index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="stylesheets/screen.css">
</head>
<body>
<div class="container c1"></div>
<div class="container c2"></div>
<div class="container c3"></div>
<div class="container c4"></div>
</body>
</html>
Raw
2_screen.scss
// ---------------------------------------------------------------------------
// IMPORTS
@import "compass";
@import "compass/reset";
@import "susy";
@import "layout";
// ---------------------------------------------------------------------------
// TOOLS
//
// These styles aren't part of the demo, they just make it easier to see what is being done.
// +show-container is simply a wrapper for +container, +susy-grid-background, and some helpful text.
// give our containers some shape and visibility.
.container {
@include rhythm(1,2,2,1);
background: #ddf;
text-align: center;
}
// this is how we'll show what's going on at each step
@mixin show-container($text:false) {
@include container();
@include susy-grid-background();
@if $text { &::before { content: $text; display: block; } }
overflow: hidden;
}
// ---------------------------------------------------------------------------
// DEMO STARTS HERE
//
// In order to quickly demo all the available features,
// I haven't made much effort to demo a unified use-case over-all.
// Look at each change as it's own demonstration of a feature.
// There are three main features to note:
// +layout : Creates a new layout context ($total-cols).
// +at-breakpoint : Creates a new layout context at a given min-width breakpoint (with optional max-width and ie fallback).
// +container : now accepts arguments, as a shortcut for creating multiple layouts at different breakpoints.
// Let's start with a default layout of 4 columns (mobile-first style).
$total-cols: 4;
// CONTAINER #1
.c1 {
@include show-container('The default 4-column grid.');
@include at-breakpoint(30em 8) {
@include show-container('At 30em, we switch to an 8-column grid.');
}
@include at-breakpoint(60em ie) {
@include show-container('At 60em we switch to the nearest grid larger (12 columns == 61em) with ie fallback.');
}
}
// CONTAINER #2
.c2 {
@include layout(6) {
@include show-container('Override the default grid with 6 columns.');
}
@include at-breakpoint(10 ie) {
@include show-container('When we have room for 10 columns, we switch to that layout (with ie fallback).');
}
}
// CONTAINER #3
.c3 {
@include show-container('The default 4-column grid.');
@include at-breakpoint(30em 60em) {
@include show-container('Between 30em and 60em, we use the nearest grid larger than 30em.');
}
}
// CONTAINER #4
// There is a shortcut for quickly setting one container to mulitple breakpoints and layouts.
// but, for now at least, there is no way to show the grid...
.c4 {
// Apply it all at once!
@include container(4,40em ie,12);
// And the rest is just so you can see what's happening.
background: #ffb;
&::before {
content: 'shortcut for 4-col, 40em (8-col, ie fallback), and 12-col (61em).';
}
}
Raw
3_screen.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
.container {
margin-top: 1.5em;
padding-top: 3em;
padding-bottom: 3em;
margin-bottom: 1.5em;
background: #ddf;
text-align: center;
}
.c1 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 21em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(4.762%, rgba(0, 0, 0, 0)), color-stop(4.762%, rgba(100, 100, 225, 0.25)), color-stop(23.81%, rgba(100, 100, 225, 0.25)), color-stop(23.81%, rgba(0, 0, 0, 0)), color-stop(28.571%, rgba(0, 0, 0, 0)), color-stop(28.571%, rgba(100, 100, 225, 0.25)), color-stop(47.619%, rgba(100, 100, 225, 0.25)), color-stop(47.619%, rgba(0, 0, 0, 0)), color-stop(52.381%, rgba(0, 0, 0, 0)), color-stop(52.381%, rgba(100, 100, 225, 0.25)), color-stop(71.429%, rgba(100, 100, 225, 0.25)), color-stop(71.429%, rgba(0, 0, 0, 0)), color-stop(76.19%, rgba(0, 0, 0, 0)), color-stop(76.19%, rgba(100, 100, 225, 0.25)), color-stop(95.238%, rgba(100, 100, 225, 0.25)), color-stop(95.238%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.c1:after {
content: "";
display: table;
clear: both;
}
.c1::before {
content: "The default 4-column grid.";
display: block;
}
@media (min-width: 30em) {
.c1 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 41em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(2.439%, rgba(0, 0, 0, 0)), color-stop(2.439%, rgba(100, 100, 225, 0.25)), color-stop(12.195%, rgba(100, 100, 225, 0.25)), color-stop(12.195%, rgba(0, 0, 0, 0)), color-stop(14.634%, rgba(0, 0, 0, 0)), color-stop(14.634%, rgba(100, 100, 225, 0.25)), color-stop(24.39%, rgba(100, 100, 225, 0.25)), color-stop(24.39%, rgba(0, 0, 0, 0)), color-stop(26.829%, rgba(0, 0, 0, 0)), color-stop(26.829%, rgba(100, 100, 225, 0.25)), color-stop(36.585%, rgba(100, 100, 225, 0.25)), color-stop(36.585%, rgba(0, 0, 0, 0)), color-stop(39.024%, rgba(0, 0, 0, 0)), color-stop(39.024%, rgba(100, 100, 225, 0.25)), color-stop(48.78%, rgba(100, 100, 225, 0.25)), color-stop(48.78%, rgba(0, 0, 0, 0)), color-stop(51.22%, rgba(0, 0, 0, 0)), color-stop(51.22%, rgba(100, 100, 225, 0.25)), color-stop(60.976%, rgba(100, 100, 225, 0.25)), color-stop(60.976%, rgba(0, 0, 0, 0)), color-stop(63.415%, rgba(0, 0, 0, 0)), color-stop(63.415%, rgba(100, 100, 225, 0.25)), color-stop(73.171%, rgba(100, 100, 225, 0.25)), color-stop(73.171%, rgba(0, 0, 0, 0)), color-stop(75.61%, rgba(0, 0, 0, 0)), color-stop(75.61%, rgba(100, 100, 225, 0.25)), color-stop(85.366%, rgba(100, 100, 225, 0.25)), color-stop(85.366%, rgba(0, 0, 0, 0)), color-stop(87.805%, rgba(0, 0, 0, 0)), color-stop(87.805%, rgba(100, 100, 225, 0.25)), color-stop(97.561%, rgba(100, 100, 225, 0.25)), color-stop(97.561%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 2.439%, rgba(100, 100, 225, 0.25) 2.439%, rgba(100, 100, 225, 0.25) 12.195%, rgba(0, 0, 0, 0) 12.195%, rgba(0, 0, 0, 0) 14.634%, rgba(100, 100, 225, 0.25) 14.634%, rgba(100, 100, 225, 0.25) 24.39%, rgba(0, 0, 0, 0) 24.39%, rgba(0, 0, 0, 0) 26.829%, rgba(100, 100, 225, 0.25) 26.829%, rgba(100, 100, 225, 0.25) 36.585%, rgba(0, 0, 0, 0) 36.585%, rgba(0, 0, 0, 0) 39.024%, rgba(100, 100, 225, 0.25) 39.024%, rgba(100, 100, 225, 0.25) 48.78%, rgba(0, 0, 0, 0) 48.78%, rgba(0, 0, 0, 0) 51.22%, rgba(100, 100, 225, 0.25) 51.22%, rgba(100, 100, 225, 0.25) 60.976%, rgba(0, 0, 0, 0) 60.976%, rgba(0, 0, 0, 0) 63.415%, rgba(100, 100, 225, 0.25) 63.415%, rgba(100, 100, 225, 0.25) 73.171%, rgba(0, 0, 0, 0) 73.171%, rgba(0, 0, 0, 0) 75.61%, rgba(100, 100, 225, 0.25) 75.61%, rgba(100, 100, 225, 0.25) 85.366%, rgba(0, 0, 0, 0) 85.366%, rgba(0, 0, 0, 0) 87.805%, rgba(100, 100, 225, 0.25) 87.805%, rgba(100, 100, 225, 0.25) 97.561%, rgba(0, 0, 0, 0) 97.561%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 2.439%, rgba(100, 100, 225, 0.25) 2.439%, rgba(100, 100, 225, 0.25) 12.195%, rgba(0, 0, 0, 0) 12.195%, rgba(0, 0, 0, 0) 14.634%, rgba(100, 100, 225, 0.25) 14.634%, rgba(100, 100, 225, 0.25) 24.39%, rgba(0, 0, 0, 0) 24.39%, rgba(0, 0, 0, 0) 26.829%, rgba(100, 100, 225, 0.25) 26.829%, rgba(100, 100, 225, 0.25) 36.585%, rgba(0, 0, 0, 0) 36.585%, rgba(0, 0, 0, 0) 39.024%, rgba(100, 100, 225, 0.25) 39.024%, rgba(100, 100, 225, 0.25) 48.78%, rgba(0, 0, 0, 0) 48.78%, rgba(0, 0, 0, 0) 51.22%, rgba(100, 100, 225, 0.25) 51.22%, rgba(100, 100, 225, 0.25) 60.976%, rgba(0, 0, 0, 0) 60.976%, rgba(0, 0, 0, 0) 63.415%, rgba(100, 100, 225, 0.25) 63.415%, rgba(100, 100, 225, 0.25) 73.171%, rgba(0, 0, 0, 0) 73.171%, rgba(0, 0, 0, 0) 75.61%, rgba(100, 100, 225, 0.25) 75.61%, rgba(100, 100, 225, 0.25) 85.366%, rgba(0, 0, 0, 0) 85.366%, rgba(0, 0, 0, 0) 87.805%, rgba(100, 100, 225, 0.25) 87.805%, rgba(100, 100, 225, 0.25) 97.561%, rgba(0, 0, 0, 0) 97.561%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 2.439%, rgba(100, 100, 225, 0.25) 2.439%, rgba(100, 100, 225, 0.25) 12.195%, rgba(0, 0, 0, 0) 12.195%, rgba(0, 0, 0, 0) 14.634%, rgba(100, 100, 225, 0.25) 14.634%, rgba(100, 100, 225, 0.25) 24.39%, rgba(0, 0, 0, 0) 24.39%, rgba(0, 0, 0, 0) 26.829%, rgba(100, 100, 225, 0.25) 26.829%, rgba(100, 100, 225, 0.25) 36.585%, rgba(0, 0, 0, 0) 36.585%, rgba(0, 0, 0, 0) 39.024%, rgba(100, 100, 225, 0.25) 39.024%, rgba(100, 100, 225, 0.25) 48.78%, rgba(0, 0, 0, 0) 48.78%, rgba(0, 0, 0, 0) 51.22%, rgba(100, 100, 225, 0.25) 51.22%, rgba(100, 100, 225, 0.25) 60.976%, rgba(0, 0, 0, 0) 60.976%, rgba(0, 0, 0, 0) 63.415%, rgba(100, 100, 225, 0.25) 63.415%, rgba(100, 100, 225, 0.25) 73.171%, rgba(0, 0, 0, 0) 73.171%, rgba(0, 0, 0, 0) 75.61%, rgba(100, 100, 225, 0.25) 75.61%, rgba(100, 100, 225, 0.25) 85.366%, rgba(0, 0, 0, 0) 85.366%, rgba(0, 0, 0, 0) 87.805%, rgba(100, 100, 225, 0.25) 87.805%, rgba(100, 100, 225, 0.25) 97.561%, rgba(0, 0, 0, 0) 97.561%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 2.439%, rgba(100, 100, 225, 0.25) 2.439%, rgba(100, 100, 225, 0.25) 12.195%, rgba(0, 0, 0, 0) 12.195%, rgba(0, 0, 0, 0) 14.634%, rgba(100, 100, 225, 0.25) 14.634%, rgba(100, 100, 225, 0.25) 24.39%, rgba(0, 0, 0, 0) 24.39%, rgba(0, 0, 0, 0) 26.829%, rgba(100, 100, 225, 0.25) 26.829%, rgba(100, 100, 225, 0.25) 36.585%, rgba(0, 0, 0, 0) 36.585%, rgba(0, 0, 0, 0) 39.024%, rgba(100, 100, 225, 0.25) 39.024%, rgba(100, 100, 225, 0.25) 48.78%, rgba(0, 0, 0, 0) 48.78%, rgba(0, 0, 0, 0) 51.22%, rgba(100, 100, 225, 0.25) 51.22%, rgba(100, 100, 225, 0.25) 60.976%, rgba(0, 0, 0, 0) 60.976%, rgba(0, 0, 0, 0) 63.415%, rgba(100, 100, 225, 0.25) 63.415%, rgba(100, 100, 225, 0.25) 73.171%, rgba(0, 0, 0, 0) 73.171%, rgba(0, 0, 0, 0) 75.61%, rgba(100, 100, 225, 0.25) 75.61%, rgba(100, 100, 225, 0.25) 85.366%, rgba(0, 0, 0, 0) 85.366%, rgba(0, 0, 0, 0) 87.805%, rgba(100, 100, 225, 0.25) 87.805%, rgba(100, 100, 225, 0.25) 97.561%, rgba(0, 0, 0, 0) 97.561%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 2.439%, rgba(100, 100, 225, 0.25) 2.439%, rgba(100, 100, 225, 0.25) 12.195%, rgba(0, 0, 0, 0) 12.195%, rgba(0, 0, 0, 0) 14.634%, rgba(100, 100, 225, 0.25) 14.634%, rgba(100, 100, 225, 0.25) 24.39%, rgba(0, 0, 0, 0) 24.39%, rgba(0, 0, 0, 0) 26.829%, rgba(100, 100, 225, 0.25) 26.829%, rgba(100, 100, 225, 0.25) 36.585%, rgba(0, 0, 0, 0) 36.585%, rgba(0, 0, 0, 0) 39.024%, rgba(100, 100, 225, 0.25) 39.024%, rgba(100, 100, 225, 0.25) 48.78%, rgba(0, 0, 0, 0) 48.78%, rgba(0, 0, 0, 0) 51.22%, rgba(100, 100, 225, 0.25) 51.22%, rgba(100, 100, 225, 0.25) 60.976%, rgba(0, 0, 0, 0) 60.976%, rgba(0, 0, 0, 0) 63.415%, rgba(100, 100, 225, 0.25) 63.415%, rgba(100, 100, 225, 0.25) 73.171%, rgba(0, 0, 0, 0) 73.171%, rgba(0, 0, 0, 0) 75.61%, rgba(100, 100, 225, 0.25) 75.61%, rgba(100, 100, 225, 0.25) 85.366%, rgba(0, 0, 0, 0) 85.366%, rgba(0, 0, 0, 0) 87.805%, rgba(100, 100, 225, 0.25) 87.805%, rgba(100, 100, 225, 0.25) 97.561%, rgba(0, 0, 0, 0) 97.561%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.c1:after {
content: "";
display: table;
clear: both;
}
.c1::before {
content: "At 30em, we switch to an 8-column grid.";
display: block;
}
}
@media (min-width: 60em) {
.c1 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 61em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(1.639%, rgba(0, 0, 0, 0)), color-stop(1.639%, rgba(100, 100, 225, 0.25)), color-stop(8.197%, rgba(100, 100, 225, 0.25)), color-stop(8.197%, rgba(0, 0, 0, 0)), color-stop(9.836%, rgba(0, 0, 0, 0)), color-stop(9.836%, rgba(100, 100, 225, 0.25)), color-stop(16.393%, rgba(100, 100, 225, 0.25)), color-stop(16.393%, rgba(0, 0, 0, 0)), color-stop(18.033%, rgba(0, 0, 0, 0)), color-stop(18.033%, rgba(100, 100, 225, 0.25)), color-stop(24.59%, rgba(100, 100, 225, 0.25)), color-stop(24.59%, rgba(0, 0, 0, 0)), color-stop(26.23%, rgba(0, 0, 0, 0)), color-stop(26.23%, rgba(100, 100, 225, 0.25)), color-stop(32.787%, rgba(100, 100, 225, 0.25)), color-stop(32.787%, rgba(0, 0, 0, 0)), color-stop(34.426%, rgba(0, 0, 0, 0)), color-stop(34.426%, rgba(100, 100, 225, 0.25)), color-stop(40.984%, rgba(100, 100, 225, 0.25)), color-stop(40.984%, rgba(0, 0, 0, 0)), color-stop(42.623%, rgba(0, 0, 0, 0)), color-stop(42.623%, rgba(100, 100, 225, 0.25)), color-stop(49.18%, rgba(100, 100, 225, 0.25)), color-stop(49.18%, rgba(0, 0, 0, 0)), color-stop(50.82%, rgba(0, 0, 0, 0)), color-stop(50.82%, rgba(100, 100, 225, 0.25)), color-stop(57.377%, rgba(100, 100, 225, 0.25)), color-stop(57.377%, rgba(0, 0, 0, 0)), color-stop(59.016%, rgba(0, 0, 0, 0)), color-stop(59.016%, rgba(100, 100, 225, 0.25)), color-stop(65.574%, rgba(100, 100, 225, 0.25)), color-stop(65.574%, rgba(0, 0, 0, 0)), color-stop(67.213%, rgba(0, 0, 0, 0)), color-stop(67.213%, rgba(100, 100, 225, 0.25)), color-stop(73.77%, rgba(100, 100, 225, 0.25)), color-stop(73.77%, rgba(0, 0, 0, 0)), color-stop(75.41%, rgba(0, 0, 0, 0)), color-stop(75.41%, rgba(100, 100, 225, 0.25)), color-stop(81.967%, rgba(100, 100, 225, 0.25)), color-stop(81.967%, rgba(0, 0, 0, 0)), color-stop(83.607%, rgba(0, 0, 0, 0)), color-stop(83.607%, rgba(100, 100, 225, 0.25)), color-stop(90.164%, rgba(100, 100, 225, 0.25)), color-stop(90.164%, rgba(0, 0, 0, 0)), color-stop(91.803%, rgba(0, 0, 0, 0)), color-stop(91.803%, rgba(100, 100, 225, 0.25)), color-stop(98.361%, rgba(100, 100, 225, 0.25)), color-stop(98.361%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.c1:after {
content: "";
display: table;
clear: both;
}
.c1::before {
content: "At 60em we switch to the nearest grid larger (12 columns == 61em) with ie fallback.";
display: block;
}
}
.ie .c1 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 61em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(1.639%, rgba(0, 0, 0, 0)), color-stop(1.639%, rgba(100, 100, 225, 0.25)), color-stop(8.197%, rgba(100, 100, 225, 0.25)), color-stop(8.197%, rgba(0, 0, 0, 0)), color-stop(9.836%, rgba(0, 0, 0, 0)), color-stop(9.836%, rgba(100, 100, 225, 0.25)), color-stop(16.393%, rgba(100, 100, 225, 0.25)), color-stop(16.393%, rgba(0, 0, 0, 0)), color-stop(18.033%, rgba(0, 0, 0, 0)), color-stop(18.033%, rgba(100, 100, 225, 0.25)), color-stop(24.59%, rgba(100, 100, 225, 0.25)), color-stop(24.59%, rgba(0, 0, 0, 0)), color-stop(26.23%, rgba(0, 0, 0, 0)), color-stop(26.23%, rgba(100, 100, 225, 0.25)), color-stop(32.787%, rgba(100, 100, 225, 0.25)), color-stop(32.787%, rgba(0, 0, 0, 0)), color-stop(34.426%, rgba(0, 0, 0, 0)), color-stop(34.426%, rgba(100, 100, 225, 0.25)), color-stop(40.984%, rgba(100, 100, 225, 0.25)), color-stop(40.984%, rgba(0, 0, 0, 0)), color-stop(42.623%, rgba(0, 0, 0, 0)), color-stop(42.623%, rgba(100, 100, 225, 0.25)), color-stop(49.18%, rgba(100, 100, 225, 0.25)), color-stop(49.18%, rgba(0, 0, 0, 0)), color-stop(50.82%, rgba(0, 0, 0, 0)), color-stop(50.82%, rgba(100, 100, 225, 0.25)), color-stop(57.377%, rgba(100, 100, 225, 0.25)), color-stop(57.377%, rgba(0, 0, 0, 0)), color-stop(59.016%, rgba(0, 0, 0, 0)), color-stop(59.016%, rgba(100, 100, 225, 0.25)), color-stop(65.574%, rgba(100, 100, 225, 0.25)), color-stop(65.574%, rgba(0, 0, 0, 0)), color-stop(67.213%, rgba(0, 0, 0, 0)), color-stop(67.213%, rgba(100, 100, 225, 0.25)), color-stop(73.77%, rgba(100, 100, 225, 0.25)), color-stop(73.77%, rgba(0, 0, 0, 0)), color-stop(75.41%, rgba(0, 0, 0, 0)), color-stop(75.41%, rgba(100, 100, 225, 0.25)), color-stop(81.967%, rgba(100, 100, 225, 0.25)), color-stop(81.967%, rgba(0, 0, 0, 0)), color-stop(83.607%, rgba(0, 0, 0, 0)), color-stop(83.607%, rgba(100, 100, 225, 0.25)), color-stop(90.164%, rgba(100, 100, 225, 0.25)), color-stop(90.164%, rgba(0, 0, 0, 0)), color-stop(91.803%, rgba(0, 0, 0, 0)), color-stop(91.803%, rgba(100, 100, 225, 0.25)), color-stop(98.361%, rgba(100, 100, 225, 0.25)), color-stop(98.361%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 1.639%, rgba(100, 100, 225, 0.25) 1.639%, rgba(100, 100, 225, 0.25) 8.197%, rgba(0, 0, 0, 0) 8.197%, rgba(0, 0, 0, 0) 9.836%, rgba(100, 100, 225, 0.25) 9.836%, rgba(100, 100, 225, 0.25) 16.393%, rgba(0, 0, 0, 0) 16.393%, rgba(0, 0, 0, 0) 18.033%, rgba(100, 100, 225, 0.25) 18.033%, rgba(100, 100, 225, 0.25) 24.59%, rgba(0, 0, 0, 0) 24.59%, rgba(0, 0, 0, 0) 26.23%, rgba(100, 100, 225, 0.25) 26.23%, rgba(100, 100, 225, 0.25) 32.787%, rgba(0, 0, 0, 0) 32.787%, rgba(0, 0, 0, 0) 34.426%, rgba(100, 100, 225, 0.25) 34.426%, rgba(100, 100, 225, 0.25) 40.984%, rgba(0, 0, 0, 0) 40.984%, rgba(0, 0, 0, 0) 42.623%, rgba(100, 100, 225, 0.25) 42.623%, rgba(100, 100, 225, 0.25) 49.18%, rgba(0, 0, 0, 0) 49.18%, rgba(0, 0, 0, 0) 50.82%, rgba(100, 100, 225, 0.25) 50.82%, rgba(100, 100, 225, 0.25) 57.377%, rgba(0, 0, 0, 0) 57.377%, rgba(0, 0, 0, 0) 59.016%, rgba(100, 100, 225, 0.25) 59.016%, rgba(100, 100, 225, 0.25) 65.574%, rgba(0, 0, 0, 0) 65.574%, rgba(0, 0, 0, 0) 67.213%, rgba(100, 100, 225, 0.25) 67.213%, rgba(100, 100, 225, 0.25) 73.77%, rgba(0, 0, 0, 0) 73.77%, rgba(0, 0, 0, 0) 75.41%, rgba(100, 100, 225, 0.25) 75.41%, rgba(100, 100, 225, 0.25) 81.967%, rgba(0, 0, 0, 0) 81.967%, rgba(0, 0, 0, 0) 83.607%, rgba(100, 100, 225, 0.25) 83.607%, rgba(100, 100, 225, 0.25) 90.164%, rgba(0, 0, 0, 0) 90.164%, rgba(0, 0, 0, 0) 91.803%, rgba(100, 100, 225, 0.25) 91.803%, rgba(100, 100, 225, 0.25) 98.361%, rgba(0, 0, 0, 0) 98.361%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.ie .c1:after {
content: "";
display: table;
clear: both;
}
.ie .c1::before {
content: "At 60em we switch to the nearest grid larger (12 columns == 61em) with ie fallback.";
display: block;
}
.c2 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 31em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(3.226%, rgba(0, 0, 0, 0)), color-stop(3.226%, rgba(100, 100, 225, 0.25)), color-stop(16.129%, rgba(100, 100, 225, 0.25)), color-stop(16.129%, rgba(0, 0, 0, 0)), color-stop(19.355%, rgba(0, 0, 0, 0)), color-stop(19.355%, rgba(100, 100, 225, 0.25)), color-stop(32.258%, rgba(100, 100, 225, 0.25)), color-stop(32.258%, rgba(0, 0, 0, 0)), color-stop(35.484%, rgba(0, 0, 0, 0)), color-stop(35.484%, rgba(100, 100, 225, 0.25)), color-stop(48.387%, rgba(100, 100, 225, 0.25)), color-stop(48.387%, rgba(0, 0, 0, 0)), color-stop(51.613%, rgba(0, 0, 0, 0)), color-stop(51.613%, rgba(100, 100, 225, 0.25)), color-stop(64.516%, rgba(100, 100, 225, 0.25)), color-stop(64.516%, rgba(0, 0, 0, 0)), color-stop(67.742%, rgba(0, 0, 0, 0)), color-stop(67.742%, rgba(100, 100, 225, 0.25)), color-stop(80.645%, rgba(100, 100, 225, 0.25)), color-stop(80.645%, rgba(0, 0, 0, 0)), color-stop(83.871%, rgba(0, 0, 0, 0)), color-stop(83.871%, rgba(100, 100, 225, 0.25)), color-stop(96.774%, rgba(100, 100, 225, 0.25)), color-stop(96.774%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.c2:after {
content: "";
display: table;
clear: both;
}
.c2::before {
content: "Override the default grid with 6 columns.";
display: block;
}
@media (min-width: 51em) {
.c2 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 51em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(1.961%, rgba(0, 0, 0, 0)), color-stop(1.961%, rgba(100, 100, 225, 0.25)), color-stop(9.804%, rgba(100, 100, 225, 0.25)), color-stop(9.804%, rgba(0, 0, 0, 0)), color-stop(11.765%, rgba(0, 0, 0, 0)), color-stop(11.765%, rgba(100, 100, 225, 0.25)), color-stop(19.608%, rgba(100, 100, 225, 0.25)), color-stop(19.608%, rgba(0, 0, 0, 0)), color-stop(21.569%, rgba(0, 0, 0, 0)), color-stop(21.569%, rgba(100, 100, 225, 0.25)), color-stop(29.412%, rgba(100, 100, 225, 0.25)), color-stop(29.412%, rgba(0, 0, 0, 0)), color-stop(31.373%, rgba(0, 0, 0, 0)), color-stop(31.373%, rgba(100, 100, 225, 0.25)), color-stop(39.216%, rgba(100, 100, 225, 0.25)), color-stop(39.216%, rgba(0, 0, 0, 0)), color-stop(41.176%, rgba(0, 0, 0, 0)), color-stop(41.176%, rgba(100, 100, 225, 0.25)), color-stop(49.02%, rgba(100, 100, 225, 0.25)), color-stop(49.02%, rgba(0, 0, 0, 0)), color-stop(50.98%, rgba(0, 0, 0, 0)), color-stop(50.98%, rgba(100, 100, 225, 0.25)), color-stop(58.824%, rgba(100, 100, 225, 0.25)), color-stop(58.824%, rgba(0, 0, 0, 0)), color-stop(60.784%, rgba(0, 0, 0, 0)), color-stop(60.784%, rgba(100, 100, 225, 0.25)), color-stop(68.627%, rgba(100, 100, 225, 0.25)), color-stop(68.627%, rgba(0, 0, 0, 0)), color-stop(70.588%, rgba(0, 0, 0, 0)), color-stop(70.588%, rgba(100, 100, 225, 0.25)), color-stop(78.431%, rgba(100, 100, 225, 0.25)), color-stop(78.431%, rgba(0, 0, 0, 0)), color-stop(80.392%, rgba(0, 0, 0, 0)), color-stop(80.392%, rgba(100, 100, 225, 0.25)), color-stop(88.235%, rgba(100, 100, 225, 0.25)), color-stop(88.235%, rgba(0, 0, 0, 0)), color-stop(90.196%, rgba(0, 0, 0, 0)), color-stop(90.196%, rgba(100, 100, 225, 0.25)), color-stop(98.039%, rgba(100, 100, 225, 0.25)), color-stop(98.039%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.c2:after {
content: "";
display: table;
clear: both;
}
.c2::before {
content: "When we have room for 10 columns, we switch to that layout (with ie fallback).";
display: block;
}
}
.ie .c2 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 51em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(1.961%, rgba(0, 0, 0, 0)), color-stop(1.961%, rgba(100, 100, 225, 0.25)), color-stop(9.804%, rgba(100, 100, 225, 0.25)), color-stop(9.804%, rgba(0, 0, 0, 0)), color-stop(11.765%, rgba(0, 0, 0, 0)), color-stop(11.765%, rgba(100, 100, 225, 0.25)), color-stop(19.608%, rgba(100, 100, 225, 0.25)), color-stop(19.608%, rgba(0, 0, 0, 0)), color-stop(21.569%, rgba(0, 0, 0, 0)), color-stop(21.569%, rgba(100, 100, 225, 0.25)), color-stop(29.412%, rgba(100, 100, 225, 0.25)), color-stop(29.412%, rgba(0, 0, 0, 0)), color-stop(31.373%, rgba(0, 0, 0, 0)), color-stop(31.373%, rgba(100, 100, 225, 0.25)), color-stop(39.216%, rgba(100, 100, 225, 0.25)), color-stop(39.216%, rgba(0, 0, 0, 0)), color-stop(41.176%, rgba(0, 0, 0, 0)), color-stop(41.176%, rgba(100, 100, 225, 0.25)), color-stop(49.02%, rgba(100, 100, 225, 0.25)), color-stop(49.02%, rgba(0, 0, 0, 0)), color-stop(50.98%, rgba(0, 0, 0, 0)), color-stop(50.98%, rgba(100, 100, 225, 0.25)), color-stop(58.824%, rgba(100, 100, 225, 0.25)), color-stop(58.824%, rgba(0, 0, 0, 0)), color-stop(60.784%, rgba(0, 0, 0, 0)), color-stop(60.784%, rgba(100, 100, 225, 0.25)), color-stop(68.627%, rgba(100, 100, 225, 0.25)), color-stop(68.627%, rgba(0, 0, 0, 0)), color-stop(70.588%, rgba(0, 0, 0, 0)), color-stop(70.588%, rgba(100, 100, 225, 0.25)), color-stop(78.431%, rgba(100, 100, 225, 0.25)), color-stop(78.431%, rgba(0, 0, 0, 0)), color-stop(80.392%, rgba(0, 0, 0, 0)), color-stop(80.392%, rgba(100, 100, 225, 0.25)), color-stop(88.235%, rgba(100, 100, 225, 0.25)), color-stop(88.235%, rgba(0, 0, 0, 0)), color-stop(90.196%, rgba(0, 0, 0, 0)), color-stop(90.196%, rgba(100, 100, 225, 0.25)), color-stop(98.039%, rgba(100, 100, 225, 0.25)), color-stop(98.039%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 1.961%, rgba(100, 100, 225, 0.25) 1.961%, rgba(100, 100, 225, 0.25) 9.804%, rgba(0, 0, 0, 0) 9.804%, rgba(0, 0, 0, 0) 11.765%, rgba(100, 100, 225, 0.25) 11.765%, rgba(100, 100, 225, 0.25) 19.608%, rgba(0, 0, 0, 0) 19.608%, rgba(0, 0, 0, 0) 21.569%, rgba(100, 100, 225, 0.25) 21.569%, rgba(100, 100, 225, 0.25) 29.412%, rgba(0, 0, 0, 0) 29.412%, rgba(0, 0, 0, 0) 31.373%, rgba(100, 100, 225, 0.25) 31.373%, rgba(100, 100, 225, 0.25) 39.216%, rgba(0, 0, 0, 0) 39.216%, rgba(0, 0, 0, 0) 41.176%, rgba(100, 100, 225, 0.25) 41.176%, rgba(100, 100, 225, 0.25) 49.02%, rgba(0, 0, 0, 0) 49.02%, rgba(0, 0, 0, 0) 50.98%, rgba(100, 100, 225, 0.25) 50.98%, rgba(100, 100, 225, 0.25) 58.824%, rgba(0, 0, 0, 0) 58.824%, rgba(0, 0, 0, 0) 60.784%, rgba(100, 100, 225, 0.25) 60.784%, rgba(100, 100, 225, 0.25) 68.627%, rgba(0, 0, 0, 0) 68.627%, rgba(0, 0, 0, 0) 70.588%, rgba(100, 100, 225, 0.25) 70.588%, rgba(100, 100, 225, 0.25) 78.431%, rgba(0, 0, 0, 0) 78.431%, rgba(0, 0, 0, 0) 80.392%, rgba(100, 100, 225, 0.25) 80.392%, rgba(100, 100, 225, 0.25) 88.235%, rgba(0, 0, 0, 0) 88.235%, rgba(0, 0, 0, 0) 90.196%, rgba(100, 100, 225, 0.25) 90.196%, rgba(100, 100, 225, 0.25) 98.039%, rgba(0, 0, 0, 0) 98.039%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.ie .c2:after {
content: "";
display: table;
clear: both;
}
.ie .c2::before {
content: "When we have room for 10 columns, we switch to that layout (with ie fallback).";
display: block;
}
.c3 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 21em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(4.762%, rgba(0, 0, 0, 0)), color-stop(4.762%, rgba(100, 100, 225, 0.25)), color-stop(23.81%, rgba(100, 100, 225, 0.25)), color-stop(23.81%, rgba(0, 0, 0, 0)), color-stop(28.571%, rgba(0, 0, 0, 0)), color-stop(28.571%, rgba(100, 100, 225, 0.25)), color-stop(47.619%, rgba(100, 100, 225, 0.25)), color-stop(47.619%, rgba(0, 0, 0, 0)), color-stop(52.381%, rgba(0, 0, 0, 0)), color-stop(52.381%, rgba(100, 100, 225, 0.25)), color-stop(71.429%, rgba(100, 100, 225, 0.25)), color-stop(71.429%, rgba(0, 0, 0, 0)), color-stop(76.19%, rgba(0, 0, 0, 0)), color-stop(76.19%, rgba(100, 100, 225, 0.25)), color-stop(95.238%, rgba(100, 100, 225, 0.25)), color-stop(95.238%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 4.762%, rgba(100, 100, 225, 0.25) 4.762%, rgba(100, 100, 225, 0.25) 23.81%, rgba(0, 0, 0, 0) 23.81%, rgba(0, 0, 0, 0) 28.571%, rgba(100, 100, 225, 0.25) 28.571%, rgba(100, 100, 225, 0.25) 47.619%, rgba(0, 0, 0, 0) 47.619%, rgba(0, 0, 0, 0) 52.381%, rgba(100, 100, 225, 0.25) 52.381%, rgba(100, 100, 225, 0.25) 71.429%, rgba(0, 0, 0, 0) 71.429%, rgba(0, 0, 0, 0) 76.19%, rgba(100, 100, 225, 0.25) 76.19%, rgba(100, 100, 225, 0.25) 95.238%, rgba(0, 0, 0, 0) 95.238%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.c3:after {
content: "";
display: table;
clear: both;
}
.c3::before {
content: "The default 4-column grid.";
display: block;
}
@media (min-width: 30em) and (max-width: 60em) {
.c3 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 31em;
max-width: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(3.226%, rgba(0, 0, 0, 0)), color-stop(3.226%, rgba(100, 100, 225, 0.25)), color-stop(16.129%, rgba(100, 100, 225, 0.25)), color-stop(16.129%, rgba(0, 0, 0, 0)), color-stop(19.355%, rgba(0, 0, 0, 0)), color-stop(19.355%, rgba(100, 100, 225, 0.25)), color-stop(32.258%, rgba(100, 100, 225, 0.25)), color-stop(32.258%, rgba(0, 0, 0, 0)), color-stop(35.484%, rgba(0, 0, 0, 0)), color-stop(35.484%, rgba(100, 100, 225, 0.25)), color-stop(48.387%, rgba(100, 100, 225, 0.25)), color-stop(48.387%, rgba(0, 0, 0, 0)), color-stop(51.613%, rgba(0, 0, 0, 0)), color-stop(51.613%, rgba(100, 100, 225, 0.25)), color-stop(64.516%, rgba(100, 100, 225, 0.25)), color-stop(64.516%, rgba(0, 0, 0, 0)), color-stop(67.742%, rgba(0, 0, 0, 0)), color-stop(67.742%, rgba(100, 100, 225, 0.25)), color-stop(80.645%, rgba(100, 100, 225, 0.25)), color-stop(80.645%, rgba(0, 0, 0, 0)), color-stop(83.871%, rgba(0, 0, 0, 0)), color-stop(83.871%, rgba(100, 100, 225, 0.25)), color-stop(96.774%, rgba(100, 100, 225, 0.25)), color-stop(96.774%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 3.226%, rgba(100, 100, 225, 0.25) 3.226%, rgba(100, 100, 225, 0.25) 16.129%, rgba(0, 0, 0, 0) 16.129%, rgba(0, 0, 0, 0) 19.355%, rgba(100, 100, 225, 0.25) 19.355%, rgba(100, 100, 225, 0.25) 32.258%, rgba(0, 0, 0, 0) 32.258%, rgba(0, 0, 0, 0) 35.484%, rgba(100, 100, 225, 0.25) 35.484%, rgba(100, 100, 225, 0.25) 48.387%, rgba(0, 0, 0, 0) 48.387%, rgba(0, 0, 0, 0) 51.613%, rgba(100, 100, 225, 0.25) 51.613%, rgba(100, 100, 225, 0.25) 64.516%, rgba(0, 0, 0, 0) 64.516%, rgba(0, 0, 0, 0) 67.742%, rgba(100, 100, 225, 0.25) 67.742%, rgba(100, 100, 225, 0.25) 80.645%, rgba(0, 0, 0, 0) 80.645%, rgba(0, 0, 0, 0) 83.871%, rgba(100, 100, 225, 0.25) 83.871%, rgba(100, 100, 225, 0.25) 96.774%, rgba(0, 0, 0, 0) 96.774%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
overflow: hidden;
}
.c3:after {
content: "";
display: table;
clear: both;
}
.c3::before {
content: "Between 30em and 60em, we use the nearest grid larger than 30em.";
display: block;
}
}
.c4 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 21em;
max-width: 100%;
background: #ffb;
}
.c4:after {
content: "";
display: table;
clear: both;
}
@media (min-width: 40em) {
.c4 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 41em;
max-width: 100%;
}
.c4:after {
content: "";
display: table;
clear: both;
}
}
.ie .c4 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 41em;
max-width: 100%;
}
.ie .c4:after {
content: "";
display: table;
clear: both;
}
@media (min-width: 61em) {
.c4 {
*zoom: 1;
margin-left: auto;
margin-right: auto;
width: 61em;
max-width: 100%;
}
.c4:after {
content: "";
display: table;
clear: both;
}
}
.c4::before {
content: 'shortcut for 4-col, 40em (8-col, ie fallback), and 12-col (61em).';
}
@mirisuzanne
Copy link
Author

@scottdavis this is ready for any hacking you want to do on the new "responsive" branch: https://github.com/ericam/compass-susy-plugin/tree/responsive

@scottdavis
Copy link

if sass only had hashes ...

@scottdavis
Copy link

also @ericam @anthonyshort was working on a media selector thing for compass maybe it would be wise to drag him into this (i just did).

@ry5n
Copy link

ry5n commented Apr 6, 2012

@ericam @scottdavis Although I won’t have time soon to hack on it, I have been trying to think big-picture. Roughly, the goal is “for this [named] viewport width, use this [named] susy grid”. The latest syntax idea comes really close. Nice and simple.

That said, I’d like one more chance to bikeshed :) I’m worried about calling the mixin at-media: these proposed Susy mixins output a specific type of media query, and querying for viewport width is of course not the only thing media queries can do. It may be a good idea to leave at-media open to be used (by Compass?) as a general purpose @⁠media helper. at-min-width or at-width might be apt (at-breakpoint or at-break still work I think).

[edit for clarity]

@mirisuzanne
Copy link
Author

@ry5n Can you call it bikeshedding when you derail discussions of public API syntax to discuss... public API syntax? :)

I think you have the goal right, but here's my remaining conflict (this time assuming at-breakpoint):

// option 1: single argument allows you to associate a breakpoint with a layout and call them both together:
$small: 30em 8;
@include at-breakpoint($small) {...}

// option 2: dual arguments allow you to keep your breakpoints and layouts decoupled, and call them more explicitly.
$small-breakpoint: 30em;
$small-layout: 8;
@include at-breakpoint($small-breakpoint, $small-layout) {...}

// Is this worth the extra clutter? Is it possible to allow both, or is that too complex?

@mirisuzanne
Copy link
Author

oh, you can have both with option #1. So never mind all that. :)

// just remove the comma. doh.
$small-breakpoint: 30em;
$small-layout: 8;
@include at-breakpoint($small-breakpoint $small-layout) {...}

@ry5n
Copy link

ry5n commented Apr 6, 2012

Perfect! That looks like the way to do it.

One point of clarification (not about the syntax at all): your examples look like they’d be specifying the medium layout, since they apply for widths 30em and up. Confirming a real-world scenario would look like:

// Named layouts, with breakpoints between
$small-grid: 3;
$medium-width: 30em;
$medium-grid: 7;

// Default (small-screen-first) layout
@include layout($small-layout) {
  …
}

// Medium layout applied at $medium-width and up
@include at-breakpoint($medium-width, $medium-layout) {
  …
}

@mirisuzanne
Copy link
Author

Yeah, or mine are right and the 3-column layout is called $tiny. :)

Which is worth pointing out, because it's infinitely flexible.

@ry5n
Copy link

ry5n commented Apr 6, 2012

Oops I added a comma in the second mixin. It would be +at-breakpoint($medium-width $medium-layout) instead.

@ry5n
Copy link

ry5n commented Apr 6, 2012

Yes, you could, and it is!

@mirisuzanne
Copy link
Author

pushed a new syntax, and updated the gist to reflect it.

still working to add:

  • [edit: done]flexibility (pass the values in either order)
  • [edit: done]fallbacks (what happens if you only pass one or the other? can/do we automate something?)
  • [edit: done]errors (how do we help you out when we cant automate a fallback position?)

@mirisuzanne
Copy link
Author

Done. Someone please play with this and tell me where I went wrong.

@mirisuzanne
Copy link
Author

Updated to demo the current state of things.

To compile screen.scss for yourself you will need the latest 'responsive' branch of Susy. To see the demo in action, simply load index.html in your browser, with the stylesheet link pointing to screen.css. Slowly explore browser sizes, and compare.

This is not exactly a quick/simple demo. It's a more in-depth proof of each feature. I tried to document it all, but it still may take some exploring to see what all is happening.

[update: done]I still need to add support for ie < 9...

@Anahkiasen
Copy link

Currently with the WIP syntax, you can do :

+at-breakpoint(900px)          min-width(900px)
+at-breakpoint(400px 900px)    min-width(400px) and max-width(900px)

How do you get only max-width ?

@mirisuzanne
Copy link
Author

Currently you don't. That doesn't give you quite as much flexibility, but it allows the mixin to be a lot more robust.

  • From a min-width alone we can determine a reasonable new layout.
  • From a layout alone we can determine a reasonable min-width.
  • From a max-width alone... we know absolutely nothing.

Since the point of at-breakpoint (as opposed to any other media-query mixin) is that we always provide both a breakpoint (or range) and a layout - you would be required to pass a layout along with any max-width, because we couldn't determine one automatically. I suppose we can do that if we take order into account ($min $layout $max) and have logic something like this:

  • 30em 8 60em = $min: 30em, $layout: 8, $max: 60em. (same as 60em 8 30em - if we get two lengths, we still compare them)
  • 30em 60em = $min: 30em, $layout: auto, $max: 60em. (same as 60em 30em)
  • 60em = $min: 60em, $layout: auto.
  • 8 = $min: auto, $layout: 8.
  • 60em 8 = $min: 60em, $layout: 8. (if we only get one length, with a layout, we determine min/max by position)
  • 8 60em = $layout: 8, $max: 60em. (this is the new logic we would need to account for)

How does that look? I should be able to code it this afternoon...

@mirisuzanne
Copy link
Author

@Anahkiasen I now allow for max-only (with layout) as described above:

https://github.com/ericam/compass-susy-plugin/commit/36b6a0b085981ddc1628982c2f58b4c368439b13

@Anahkiasen
Copy link

Perfect for the case I was stuck in as far as I'm concerned. Still as powerful. I mean yesterday I wrote the following piece of Sass, it still amazes me how easy that was.

.susy-container
    +container

$layouts: 4 6 8 12
@each $l in $layouts
    +at-breakpoint($l)
        .susy-container
            width: columns-width()

        .susy-articles
            @if $l >= 8
                +columns(4)
                +reset-full

                &:first-child
                    +alpha
                &:last-child
                    +omega
            @else
                +full

And there. That's a responsive CSS in ten lines. It's not a great one admittedly, but it's simple to read and more important, easy to modify, which is something I've kind of never seen in media queries because of the way they fragment layouts and separate different styles about a same item. I think if one day we have a way to store properties in SASS, with say associative lists then it would be even better but we're not there yet.

@mirisuzanne
Copy link
Author

This is a problem: http://stackoverflow.com/questions/4568738/make-css-media-query-use-the-em-size-of-the-html-document-rather-than-the-browse

Media-queries are based on the browser's default font size (usually 16em). Susy grids would be based on the current font size (set by the designer). Those aren't always the same. I wonder if we can make that conversion using a comparison of $browser-default-font-size and $base-font-size when em units are used...

@mirisuzanne
Copy link
Author

Well that's an interesting problem. It's solved now: IF you set $base-font-size and IF you establish your base font size in relative units, which establish-baseline currently does not (Compass/compass#843).

@Anahkiasen
Copy link

Could we have something in those waters ?

@function proportion($width, $round: 'floor')
    $width: $total-cols * $width
    @if $round == 'floor'
        @return floor($width)
    @else
        @return ceil($width)

@mixin proportion($width, $round: 'floor')
    @include columns(proportion($width, $round))

With the introduction of the new responsive Susy, I find myself juggling with several layouts. Each with a different number of columns, and since Susy can now guess that number from a min and max width, the actual number of columns in a layout is becoming more and more abstract to me. That way by working in terms of proportions, you could define the following :

#content
    +proportion(.7, 'ceil')

#sidebar
    +proportion(.3)

And no matter where you'd put that piece of code, it would always adapt to the current layout and number of columns. The ceil and floor precision avoiding rounding errors and helping determine a "master" block. Anyway, just thought I'd throw this out there.

@mirisuzanne
Copy link
Author

With the amount of rounding we would have to do, I don't really see that being easier to understand. I would rather push people to pay attention to their column count, and know what is actually happening with their layout.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment