Skip to content

Instantly share code, notes, and snippets.

@davepoon

davepoon/bootstrap-grid.css

Forked from abitgone/bootstrap-grid.css
Created February 14, 2013 03:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save davepoon/4950522 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save davepoon/4950522 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @abitgone abitgone revised this gist May 2, 2012. 1 changed file with 42 additions and 85 deletions.
    127 changes: 42 additions & 85 deletions bootstrap-grid.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,93 +3,50 @@
    * Assumes a 1.692em baseline grid (22px/13px)
    */
    @media (min-width: 1200px) {
    body {
    background: -webkit-linear-gradient(
    90deg,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.05) 4.545%,
    rgba(0,0,0,0) 4.545%,
    rgba(0,0,0,0) 100%
    ),
    -webkit-linear-gradient(
    0deg,
    rgba(0,0,0,0),
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,0.05) 35%,
    rgba(0,0,0,0.05) 36%,
    rgba(0,0,0,0) 36%,
    rgba(0,0,0,0) 65%,
    rgba(0,0,0,0.05) 65%,
    rgba(0,0,0,0.05) 66%,
    rgba(0,0,0,0) 66%,
    rgba(0,0,0,0) 100%
    );
    background-size: 1.692em 1.692em, 7.692em 7.692em; /* 7.692 - 2.308 = 5.384 */
    background-position: left top, center top;
    }
    body {
    background: -webkit-gradient(linear, top left, bottom left, color-stop(0%, rgba(0, 0, 0, 0.05)), color-stop(4.545%, rgba(0, 0, 0, 0.05)), color-stop(4.545%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, top left, top right, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(35%, rgba(0, 0, 0, 0)), color-stop(35%, rgba(0, 0, 0, 0.05)), color-stop(36%, rgba(0, 0, 0, 0.05)), color-stop(36%, rgba(0, 0, 0, 0)), color-stop(65%, rgba(0, 0, 0, 0)), color-stop(65%, rgba(0, 0, 0, 0.05)), color-stop(66%, rgba(0, 0, 0, 0.05)), color-stop(66%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, top left, top right, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(0.085%, rgba(0, 0, 0, 0.1)), color-stop(0.085%, rgba(0, 0, 0, 0)));
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.05) 36%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.05) 65%, rgba(0, 0, 0, 0.05) 66%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0.085%, rgba(0, 0, 0, 0) 0.085%);
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.05) 36%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.05) 65%, rgba(0, 0, 0, 0.05) 66%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0.085%, rgba(0, 0, 0, 0) 0.085%);
    background: -ms-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.05) 36%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.05) 65%, rgba(0, 0, 0, 0.05) 66%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0.085%, rgba(0, 0, 0, 0) 0.085%);
    background: -o-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.05) 36%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.05) 65%, rgba(0, 0, 0, 0.05) 66%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0.085%, rgba(0, 0, 0, 0) 0.085%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.05) 36%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.05) 65%, rgba(0, 0, 0, 0.05) 66%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0.085%, rgba(0, 0, 0, 0) 0.085%);
    background-size: 1.692em 1.692em, 7.692em 7.692em, 90em 90em;
    background-position: left top, center top, center top;
    }
    }
    @media (max-width: 1199px) and (min-width: 980px) {
    body {
    background: -webkit-linear-gradient(
    90deg,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.05) 4.545%,
    rgba(0,0,0,0) 4.545%,
    rgba(0,0,0,0) 100%
    ),
    -webkit-linear-gradient(
    0deg,
    rgba(0,0,0,0),
    rgba(0,0,0,0) 37.5%,
    rgba(0,0,0,0.05) 37.5%,
    rgba(0,0,0,0.05) 38.75%,
    rgba(0,0,0,0) 38.75%,
    rgba(0,0,0,0) 62.5%,
    rgba(0,0,0,0.05) 62.5%,
    rgba(0,0,0,0.05) 63.75%,
    rgba(0,0,0,0) 63.75%,
    rgba(0,0,0,0) 100%
    );
    background-size: 1.692em 1.692em, 6.154em 6.154em;
    background-position: left top, center top;
    }
    body {
    background: -webkit-gradient(linear, top left, bottom left, color-stop(0%, rgba(0, 0, 0, 0.05)), color-stop(4.545%, rgba(0, 0, 0, 0.05)), color-stop(4.545%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 37.5%, rgba(0, 0, 0, 0.05) 37.5%, rgba(0, 0, 0, 0.05) 38.75%, rgba(0, 0, 0, 0) 38.75%, rgba(0, 0, 0, 0) 62.5%, rgba(0, 0, 0, 0.05) 62.5%, rgba(0, 0, 0, 0.05) 63.75%, rgba(0, 0, 0, 0) 63.75%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0.106%, rgba(0, 0, 0, 0) 0.106%);
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 37.5%, rgba(0, 0, 0, 0.05) 37.5%, rgba(0, 0, 0, 0.05) 38.75%, rgba(0, 0, 0, 0) 38.75%, rgba(0, 0, 0, 0) 62.5%, rgba(0, 0, 0, 0.05) 62.5%, rgba(0, 0, 0, 0.05) 63.75%, rgba(0, 0, 0, 0) 63.75%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0.106%, rgba(0, 0, 0, 0) 0.106%);
    background: -ms-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 37.5%, rgba(0, 0, 0, 0.05) 37.5%, rgba(0, 0, 0, 0.05) 38.75%, rgba(0, 0, 0, 0) 38.75%, rgba(0, 0, 0, 0) 62.5%, rgba(0, 0, 0, 0.05) 62.5%, rgba(0, 0, 0, 0.05) 63.75%, rgba(0, 0, 0, 0) 63.75%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0.106%, rgba(0, 0, 0, 0) 0.106%);
    background: -o-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 37.5%, rgba(0, 0, 0, 0.05) 37.5%, rgba(0, 0, 0, 0.05) 38.75%, rgba(0, 0, 0, 0) 38.75%, rgba(0, 0, 0, 0) 62.5%, rgba(0, 0, 0, 0.05) 62.5%, rgba(0, 0, 0, 0.05) 63.75%, rgba(0, 0, 0, 0) 63.75%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0.106%, rgba(0, 0, 0, 0) 0.106%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 37.5%, rgba(0, 0, 0, 0.05) 37.5%, rgba(0, 0, 0, 0.05) 38.75%, rgba(0, 0, 0, 0) 38.75%, rgba(0, 0, 0, 0) 62.5%, rgba(0, 0, 0, 0.05) 62.5%, rgba(0, 0, 0, 0.05) 63.75%, rgba(0, 0, 0, 0) 63.75%, rgba(0, 0, 0, 0) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0.106%, rgba(0, 0, 0, 0) 0.106%);
    background-size: 1.692em 1.692em, 6.154em 6.154em, 72.308em 72.308em;
    background-position: left top, center top, center top;
    }
    }
    @media (max-width: 979px) and (min-width: 761px) {
    body {
    background: -webkit-linear-gradient(
    90deg,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.05) 4.545%,
    rgba(0,0,0,0) 4.545%,
    rgba(0,0,0,0) 100%
    ),
    -webkit-linear-gradient(
    0deg,
    rgba(0,0,0,0),
    rgba(0,0,0,0) 32.25%,
    rgba(0,0,0,0.05) 32.25%,
    rgba(0,0,0,0.05) 33.87%,
    rgba(0,0,0,0) 33.87%,
    rgba(0,0,0,0) 64.52%,
    rgba(0,0,0,0.05) 64.52%,
    rgba(0,0,0,0.05) 66.13%,
    rgba(0,0,0,0) 66.13%,
    rgba(0,0,0,0) 100%
    );
    background-size: 1.692em 1.692em, 4.769em 4.769em;
    background-position: left top, center top;
    }
    body {
    background: -webkit-gradient(linear, top left, bottom left, color-stop(0%, rgba(0, 0, 0, 0.05)), color-stop(4.545%, rgba(0, 0, 0, 0.05)), color-stop(4.545%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, top left, top right, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(32.25%, rgba(0, 0, 0, 0)), color-stop(32.25%, rgba(0, 0, 0, 0.05)), color-stop(33.87%, rgba(0, 0, 0, 0.05)), color-stop(33.87%, rgba(0, 0, 0, 0)), color-stop(64.52%, rgba(0, 0, 0, 0)), color-stop(64.52%, rgba(0, 0, 0, 0.05)), color-stop(66.13%, rgba(0, 0, 0, 0.05)), color-stop(66.13%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, top left, top right, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(0.138%, rgba(0, 0, 0, 0.1)), color-stop(0.138%, rgba(0, 0, 0, 0)));
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 32.25%, rgba(0, 0, 0, 0.05) 32.25%, rgba(0, 0, 0, 0.05) 33.87%, rgba(0, 0, 0, 0) 33.87%, rgba(0, 0, 0, 0) 64.52%, rgba(0, 0, 0, 0.05) 64.52%, rgba(0, 0, 0, 0.05) 66.13%, rgba(0, 0, 0, 0) 66.13%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0.138%, rgba(0, 0, 0, 0) 0.138%);
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 32.25%, rgba(0, 0, 0, 0.05) 32.25%, rgba(0, 0, 0, 0.05) 33.87%, rgba(0, 0, 0, 0) 33.87%, rgba(0, 0, 0, 0) 64.52%, rgba(0, 0, 0, 0.05) 64.52%, rgba(0, 0, 0, 0.05) 66.13%, rgba(0, 0, 0, 0) 66.13%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0.138%, rgba(0, 0, 0, 0) 0.138%);
    background: -ms-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 32.25%, rgba(0, 0, 0, 0.05) 32.25%, rgba(0, 0, 0, 0.05) 33.87%, rgba(0, 0, 0, 0) 33.87%, rgba(0, 0, 0, 0) 64.52%, rgba(0, 0, 0, 0.05) 64.52%, rgba(0, 0, 0, 0.05) 66.13%, rgba(0, 0, 0, 0) 66.13%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0.138%, rgba(0, 0, 0, 0) 0.138%);
    background: -o-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 32.25%, rgba(0, 0, 0, 0.05) 32.25%, rgba(0, 0, 0, 0.05) 33.87%, rgba(0, 0, 0, 0) 33.87%, rgba(0, 0, 0, 0) 64.52%, rgba(0, 0, 0, 0.05) 64.52%, rgba(0, 0, 0, 0.05) 66.13%, rgba(0, 0, 0, 0) 66.13%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0.138%, rgba(0, 0, 0, 0) 0.138%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 32.25%, rgba(0, 0, 0, 0.05) 32.25%, rgba(0, 0, 0, 0.05) 33.87%, rgba(0, 0, 0, 0) 33.87%, rgba(0, 0, 0, 0) 64.52%, rgba(0, 0, 0, 0.05) 64.52%, rgba(0, 0, 0, 0.05) 66.13%, rgba(0, 0, 0, 0) 66.13%, rgba(0, 0, 0, 0) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 0.138%, rgba(0, 0, 0, 0) 0.138%);
    background-size: 1.692em 1.692em, 4.769em 4.769em, 55.692em 55.692px;
    background-position: left top, center top, center top;
    }
    }
    @media (max-width: 760px) {
    body {
    background: -webkit-gradient(linear, top left, bottom left, color-stop(0%, rgba(0, 0, 0, 0.05)), color-stop(4.545%, rgba(0, 0, 0, 0.05)), color-stop(4.545%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%);
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%);
    background: -ms-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%);
    background: -o-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 4.545%, rgba(0, 0, 0, 0) 4.545%, rgba(0, 0, 0, 0) 100%);
    background-size: 1.692em 1.692em;
    background-position: left top;
    }
    }
    @media (max-width: 760px){
    body {
    background: -webkit-linear-gradient(
    90deg,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.05) 4.545%,
    rgba(0,0,0,0) 4.545%,
    rgba(0,0,0,0) 100%
    );
    background-size: 1.692em 1.692em;
    background-position: left top;
    }
    }
  2. @abitgone abitgone revised this gist Mar 2, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion bootstrap-grid.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    * Assumes a 1.692em baseline grid (22px/13px)
    */
    @media (min-width: 1200px) {
    body {
    body {
    background: -webkit-linear-gradient(
    90deg,
    rgba(0,0,0,0.05),
  3. @abitgone abitgone created this gist Feb 29, 2012.
    95 changes: 95 additions & 0 deletions bootstrap-grid.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,95 @@
    /*
    * Grid Overlay for Twitter Bootstrap
    * Assumes a 1.692em baseline grid (22px/13px)
    */
    @media (min-width: 1200px) {
    body {
    background: -webkit-linear-gradient(
    90deg,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.05) 4.545%,
    rgba(0,0,0,0) 4.545%,
    rgba(0,0,0,0) 100%
    ),
    -webkit-linear-gradient(
    0deg,
    rgba(0,0,0,0),
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,0.05) 35%,
    rgba(0,0,0,0.05) 36%,
    rgba(0,0,0,0) 36%,
    rgba(0,0,0,0) 65%,
    rgba(0,0,0,0.05) 65%,
    rgba(0,0,0,0.05) 66%,
    rgba(0,0,0,0) 66%,
    rgba(0,0,0,0) 100%
    );
    background-size: 1.692em 1.692em, 7.692em 7.692em; /* 7.692 - 2.308 = 5.384 */
    background-position: left top, center top;
    }
    }
    @media (max-width: 1199px) and (min-width: 980px) {
    body {
    background: -webkit-linear-gradient(
    90deg,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.05) 4.545%,
    rgba(0,0,0,0) 4.545%,
    rgba(0,0,0,0) 100%
    ),
    -webkit-linear-gradient(
    0deg,
    rgba(0,0,0,0),
    rgba(0,0,0,0) 37.5%,
    rgba(0,0,0,0.05) 37.5%,
    rgba(0,0,0,0.05) 38.75%,
    rgba(0,0,0,0) 38.75%,
    rgba(0,0,0,0) 62.5%,
    rgba(0,0,0,0.05) 62.5%,
    rgba(0,0,0,0.05) 63.75%,
    rgba(0,0,0,0) 63.75%,
    rgba(0,0,0,0) 100%
    );
    background-size: 1.692em 1.692em, 6.154em 6.154em;
    background-position: left top, center top;
    }
    }
    @media (max-width: 979px) and (min-width: 761px) {
    body {
    background: -webkit-linear-gradient(
    90deg,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.05) 4.545%,
    rgba(0,0,0,0) 4.545%,
    rgba(0,0,0,0) 100%
    ),
    -webkit-linear-gradient(
    0deg,
    rgba(0,0,0,0),
    rgba(0,0,0,0) 32.25%,
    rgba(0,0,0,0.05) 32.25%,
    rgba(0,0,0,0.05) 33.87%,
    rgba(0,0,0,0) 33.87%,
    rgba(0,0,0,0) 64.52%,
    rgba(0,0,0,0.05) 64.52%,
    rgba(0,0,0,0.05) 66.13%,
    rgba(0,0,0,0) 66.13%,
    rgba(0,0,0,0) 100%
    );
    background-size: 1.692em 1.692em, 4.769em 4.769em;
    background-position: left top, center top;
    }
    }
    @media (max-width: 760px){
    body {
    background: -webkit-linear-gradient(
    90deg,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.05) 4.545%,
    rgba(0,0,0,0) 4.545%,
    rgba(0,0,0,0) 100%
    );
    background-size: 1.692em 1.692em;
    background-position: left top;
    }
    }