Skip to content

Instantly share code, notes, and snippets.

@moesoha
Forked from rachelbaker/baseline-css
Created December 19, 2017 01:17
Show Gist options
  • Save moesoha/638adf549a045417544acb190b63aae3 to your computer and use it in GitHub Desktop.
Save moesoha/638adf549a045417544acb190b63aae3 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%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment