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
  • Save davepoon/4950522 to your computer and use it in GitHub Desktop.
Save davepoon/4950522 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bootstrap-grid.css
/*
* Grid Overlay for Twitter Bootstrap
* Assumes a 1.692em baseline grid (22px/13px)
*/
@media (min-width: 1200px) {
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-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-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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment