Skip to content

Instantly share code, notes, and snippets.

@rachelbaker
Created October 28, 2011 18:21
Show Gist options
  • Save rachelbaker/1322975 to your computer and use it in GitHub Desktop.
Save rachelbaker/1322975 to your computer and use it in GitHub Desktop.
Baseline CSS: Graph paper like background for easier alignment of elements
html {
font-size: 93.8%;
background-color: #f1f2f3;
background-image:
-webkit-linear-gradient(0deg, transparent .05em, rgba(0,0,0,.05) .05em, rgba(0,0,0,.05) .125000em, transparent .125000em),
-webkit-linear-gradient(rgba(0,0,0,.05) .062500em, transparent .062500em);
background-image:
-moz-linear-gradient(0deg, transparent .05em, rgba(0,0,0,.05) .05em, rgba(0,0,0,.05) .125000em, transparent .125000em),
-moz-linear-gradient(rgba(0,0,0,.05) .062500em, transparent .062500em);
background-image:
-ms-linear-gradient(0deg, transparent .05em, rgba(0,0,0,.05) .05em, rgba(0,0,0,.05) .125000em, transparent .125000em),
-ms-linear-gradient(rgba(0,0,0,.05) .062500em, transparent .062500em);
background-image:
-o-linear-gradient(0deg, transparent .05em, rgba(0,0,0,.05) .05em, rgba(0,0,0,.05) .125000em, transparent .125000em),
-o-linear-gradient(rgba(0,0,0,.05) .062500em, transparent .062500em);
background-image:
linear-gradient(0deg, transparent .05em, rgba(0,0,0,.05) .05em, rgba(0,0,0,.05) .125000em, transparent .125000em),
inear-gradient(rgba(0,0,0,.05) .062500em, transparent .062500em);
background-size: .75em .75em;
background-position: 0 -0.5em;
}
@media screen and (min-width: 600px) {
html {
font-size: 100%;
}
}
@media screen and (min-width: 800px) {
html {
font-size: 125%;
}
}
@TWolverson
Copy link

Did exactly what I was after, apart from being a little too faint, but that's easy to change - thanks!

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