Created
April 4, 2012 22:58
-
-
Save mirisuzanne/2306353 to your computer and use it in GitHub Desktop.
Suggested syntax for responsive Susy layouts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // --------------------------------------------------------------------------- | |
| // 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).'; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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).'; | |
| } |
@Anahkiasen I now allow for max-only (with layout) as described above:
https://github.com/ericam/compass-susy-plugin/commit/36b6a0b085981ddc1628982c2f58b4c368439b13
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
+fullAnd 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.
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...
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).
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.
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
Currently you don't. That doesn't give you quite as much flexibility, but it allows the mixin to be a lot more robust.
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 as60em 8 30em- if we get two lengths, we still compare them)30em 60em= $min: 30em, $layout: auto, $max: 60em. (same as60em 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...