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).';
}
@ry5n
Copy link

ry5n commented Apr 5, 2012

Whoa. This looks amazing. Anywhere I can read up on background or roadmap? nm – found your Susy Goals gist :)

One thing: for a few seconds I was confused by the naming of the break() mixin. Because layouts are 'things' and breakpoints are decision points (the first are associated with style rules, the second with @media rules) I wonder if break() should be named something like at-break or at-breakpoint?

@include at-break(2) {
  .container {
    @include container;
  }
}

@ry5n
Copy link

ry5n commented Apr 5, 2012

One other thought (yes, I’m excited): it might be nice to be able to associate a name with a layout:

$total-cols: 4 8 12;
$layout-names: narrow medium wide;

// Arbitrary layout
.layout-element {
  @include layout(medium) {
    @include container;
  }
}

@mirisuzanne
Copy link
Author

@ry5n I see what you are saying about, but 'break' still makes sense to me because it creates a breakpoint, and allows you to assign a layout to that breakpoint. I'm open to more suggestions and arguments, though.

I also considered the naming idea, but coupling lists together feels like a hack to me. It adds a mental complexity that I want to avoid. I wonder if we could add them inline instead, with nested lists?

$total-cols: 4 small, 8 medium, 12 wide;

I could parse the list first for layouts, and then parse each layout (as a list) for name/columns. I'll try that out tomorrow.

@ry5n
Copy link

ry5n commented Apr 5, 2012

@ericam Right – that’s true: the break mixin can create breakpoints on the fly too… so that does make sense, that it does create breakpoints.

Still, for readability, even once I understood what the mixin does, somehow (at least my brain) has to do a split-second of extra thinking to remember that +break(1) doesn’t mean “include one break” or “break once” but rather “include the following style rules after the first breakpoint”. It’s a natural-language thing (if that makes sense)… if I read a media query out loud, I would say “at-media 500px and…”). So the form at-breakpoint($index) to me has the following advantages:

  • at-breakpoint implies a functional relationship to @media, which is acccurate;
  • at-breakpoint implies a conditional (when x then…), and @content is required for it; break does not remind me to provide mixin content;
  • at-breakpoint still makes sense to me when creating ad-hoc breakpoints: +at-breakpoint(500px) { //@content }.

As for named layouts, I like your approach better than my idea; decoupling the names and column numbers into two variables does seem more error-prone and hacky.

@edwardoriordan
Copy link

Looks great!

I do like the idea of inline named lists and also the use of at-breakpoint (or at-break?) as the mixin name. When I was scanning the code the first associations I was making with break(2) was with columns(), prefix(), suffix(). That being said I never had a problem with full() which takes an argument of a different sort.

@mirisuzanne
Copy link
Author

Good points. I'll play with at-breakpoint.

Here's another thought. It seems like using index for breakpoints may be confusing. What if I eliminate $break-points all together, and let the user create their own variables to manage break-points however they like. You could do:

$total-cols: 4 narrow, 8 medium, 12 wide;
$medium: 30em;
$wide: 60em;

@include at-breakpoint($medium, medium) {
  ...
}

That reads more clearly than using indexes anywhere.

@scottdavis
Copy link

eric if you need help implementing i would love to use this soon

@mirisuzanne
Copy link
Author

@scottdavis thanks! If I get a moment to clean it up today, I'll push what I have. I think it's actually pretty close, but I'm happy to get input from anyone who wants to play with it and hack on it. I'd love to have a beta out this weekend. I'll post here when it's online to play with.

@mirisuzanne
Copy link
Author

Here are some other syntax ideas:

Call the mixin at-media()?

Now I wonder about ditching all need for indexes. What if you could pass any break-point/layout combination without changing how $total-cols is used or adding any new per-defined variables? This would actually simplify implementation, and might also be more clear:

// either of these would create a break-point at 30em, with an 8-column grid
@include at-media(30em 8) {...}

$small: 30em 8;
@include at-media($small) {...}

// +layout would also take a column-number argument rather than an index
@include layout(8) {...}

$small-layout: 8;
@include layout($small-layout) {...}

In that scenario, $total-cols simply remains the number of columns in your default grid.

@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