Skip to content

Instantly share code, notes, and snippets.

@chrislloyd

chrislloyd/gist:24d4e23c350fe3e833d4

Created June 10, 2015 20:25
Show Gist options
  • Save chrislloyd/24d4e23c350fe3e833d4 to your computer and use it in GitHub Desktop.
Save chrislloyd/24d4e23c350fe3e833d4 to your computer and use it in GitHub Desktop.
Download ZIP
whitespace.css
Raw
gistfile1.txt
/*
This file was autogenerated from Meta's CSS. I tried getting
postcss-for working but it turns out it's a massive PITA. /shrug
~ @chrislloyd
*/
@media (--breakpoint-sm) {
.sm-m0 { margin: 0 }
.sm-mt0 { margin-top: 0 }
.sm-mr0 { margin-right: 0 }
.sm-mb0 { margin-bottom: 0 }
.sm-ml0 { margin-left: 0 }
.sm-mxn0 { margin-right: 0; margin-left: 0 }
.sm-p0 { padding: 0 }
.sm-px0 { padding-left: 0; padding-right: 0 }
.sm-py0 { padding-top: 0; padding-bottom: 0 }
.sm-m1 { margin: var(--space-1) }
.sm-mt1 { margin-top: var(--space-1) }
.sm-mr1 { margin-right: var(--space-1) }
.sm-mb1 { margin-bottom: var(--space-1) }
.sm-ml1 { margin-left: var(--space-1) }
.sm-mxn1 { margin-right: calc(0 - var(--space-1)); margin-left: calc(0 - var(--space-1)) }
.sm-p1 { padding: var(--space-1) }
.sm-px1 { padding-left: var(--space-1); padding-right: var(--space-1) }
.sm-py1 { padding-top: var(--space-1); padding-bottom: var(--space-1) }
.sm-m2 { margin: var(--space-2) }
.sm-mt2 { margin-top: var(--space-2) }
.sm-mr2 { margin-right: var(--space-2) }
.sm-mb2 { margin-bottom: var(--space-2) }
.sm-ml2 { margin-left: var(--space-2) }
.sm-mxn2 { margin-right: calc(0 - var(--space-2)); margin-left: calc(0 - var(--space-2)) }
.sm-p2 { padding: var(--space-2) }
.sm-px2 { padding-left: var(--space-2); padding-right: var(--space-2) }
.sm-py2 { padding-top: var(--space-2); padding-bottom: var(--space-2) }
.sm-m3 { margin: var(--space-3) }
.sm-mt3 { margin-top: var(--space-3) }
.sm-mr3 { margin-right: var(--space-3) }
.sm-mb3 { margin-bottom: var(--space-3) }
.sm-ml3 { margin-left: var(--space-3) }
.sm-mxn3 { margin-right: calc(0 - var(--space-3)); margin-left: calc(0 - var(--space-3)) }
.sm-p3 { padding: var(--space-3) }
.sm-px3 { padding-left: var(--space-3); padding-right: var(--space-3) }
.sm-py3 { padding-top: var(--space-3); padding-bottom: var(--space-3) }
.sm-m4 { margin: var(--space-4) }
.sm-mt4 { margin-top: var(--space-4) }
.sm-mr4 { margin-right: var(--space-4) }
.sm-mb4 { margin-bottom: var(--space-4) }
.sm-ml4 { margin-left: var(--space-4) }
.sm-mxn4 { margin-right: calc(0 - var(--space-4)); margin-left: calc(0 - var(--space-4)) }
.sm-p4 { padding: var(--space-4) }
.sm-px4 { padding-left: var(--space-4); padding-right: var(--space-4) }
.sm-py4 { padding-top: var(--space-4); padding-bottom: var(--space-4) }
}
@media (--breakpoint-md) {
.md-m0 { margin: 0 }
.md-mt0 { margin-top: 0 }
.md-mr0 { margin-right: 0 }
.md-mb0 { margin-bottom: 0 }
.md-ml0 { margin-left: 0 }
.md-mxn0 { margin-right: 0; margin-left: 0 }
.md-p0 { padding: 0 }
.md-px0 { padding-left: 0; padding-right: 0 }
.md-py0 { padding-top: 0; padding-bottom: 0 }
.md-m1 { margin: var(--space-1) }
.md-mt1 { margin-top: var(--space-1) }
.md-mr1 { margin-right: var(--space-1) }
.md-mb1 { margin-bottom: var(--space-1) }
.md-ml1 { margin-left: var(--space-1) }
.md-mxn1 { margin-right: calc(0 - var(--space-1)); margin-left: calc(0 - var(--space-1)) }
.md-p1 { padding: var(--space-1) }
.md-px1 { padding-left: var(--space-1); padding-right: var(--space-1) }
.md-py1 { padding-top: var(--space-1); padding-bottom: var(--space-1) }
.md-m2 { margin: var(--space-2) }
.md-mt2 { margin-top: var(--space-2) }
.md-mr2 { margin-right: var(--space-2) }
.md-mb2 { margin-bottom: var(--space-2) }
.md-ml2 { margin-left: var(--space-2) }
.md-mxn2 { margin-right: calc(0 - var(--space-2)); margin-left: calc(0 - var(--space-2)) }
.md-p2 { padding: var(--space-2) }
.md-px2 { padding-left: var(--space-2); padding-right: var(--space-2) }
.md-py2 { padding-top: var(--space-2); padding-bottom: var(--space-2) }
.md-m3 { margin: var(--space-3) }
.md-mt3 { margin-top: var(--space-3) }
.md-mr3 { margin-right: var(--space-3) }
.md-mb3 { margin-bottom: var(--space-3) }
.md-ml3 { margin-left: var(--space-3) }
.md-mxn3 { margin-right: calc(0 - var(--space-3)); margin-left: calc(0 - var(--space-3)) }
.md-p3 { padding: var(--space-3) }
.md-px3 { padding-left: var(--space-3); padding-right: var(--space-3) }
.md-py3 { padding-top: var(--space-3); padding-bottom: var(--space-3) }
.md-m4 { margin: var(--space-4) }
.md-mt4 { margin-top: var(--space-4) }
.md-mr4 { margin-right: var(--space-4) }
.md-mb4 { margin-bottom: var(--space-4) }
.md-ml4 { margin-left: var(--space-4) }
.md-mxn4 { margin-right: calc(0 - var(--space-4)); margin-left: calc(0 - var(--space-4)) }
.md-p4 { padding: var(--space-4) }
.md-px4 { padding-left: var(--space-4); padding-right: var(--space-4) }
.md-py4 { padding-top: var(--space-4); padding-bottom: var(--space-4) }
}
@media (--breakpoint-lg) {
.lg-m0 { margin: 0 }
.lg-mt0 { margin-top: 0 }
.lg-mr0 { margin-right: 0 }
.lg-mb0 { margin-bottom: 0 }
.lg-ml0 { margin-left: 0 }
.lg-mxn0 { margin-right: 0; margin-left: 0 }
.lg-p0 { padding: 0 }
.lg-px0 { padding-left: 0; padding-right: 0 }
.lg-py0 { padding-top: 0; padding-bottom: 0 }
.lg-m1 { margin: var(--space-1) }
.lg-mt1 { margin-top: var(--space-1) }
.lg-mr1 { margin-right: var(--space-1) }
.lg-mb1 { margin-bottom: var(--space-1) }
.lg-ml1 { margin-left: var(--space-1) }
.lg-mxn1 { margin-right: calc(0 - var(--space-1)); margin-left: calc(0 - var(--space-1)) }
.lg-p1 { padding: var(--space-1) }
.lg-px1 { padding-left: var(--space-1); padding-right: var(--space-1) }
.lg-py1 { padding-top: var(--space-1); padding-bottom: var(--space-1) }
.lg-m2 { margin: var(--space-2) }
.lg-mt2 { margin-top: var(--space-2) }
.lg-mr2 { margin-right: var(--space-2) }
.lg-mb2 { margin-bottom: var(--space-2) }
.lg-ml2 { margin-left: var(--space-2) }
.lg-mxn2 { margin-right: calc(0 - var(--space-2)); margin-left: calc(0 - var(--space-2)) }
.lg-p2 { padding: var(--space-2) }
.lg-px2 { padding-left: var(--space-2); padding-right: var(--space-2) }
.lg-py2 { padding-top: var(--space-2); padding-bottom: var(--space-2) }
.lg-m3 { margin: var(--space-3) }
.lg-mt3 { margin-top: var(--space-3) }
.lg-mr3 { margin-right: var(--space-3) }
.lg-mb3 { margin-bottom: var(--space-3) }
.lg-ml3 { margin-left: var(--space-3) }
.lg-mxn3 { margin-right: calc(0 - var(--space-3)); margin-left: calc(0 - var(--space-3)) }
.lg-p3 { padding: var(--space-3) }
.lg-px3 { padding-left: var(--space-3); padding-right: var(--space-3) }
.lg-py3 { padding-top: var(--space-3); padding-bottom: var(--space-3) }
.lg-m4 { margin: var(--space-4) }
.lg-mt4 { margin-top: var(--space-4) }
.lg-mr4 { margin-right: var(--space-4) }
.lg-mb4 { margin-bottom: var(--space-4) }
.lg-ml4 { margin-left: var(--space-4) }
.lg-mxn4 { margin-right: calc(0 - var(--space-4)); margin-left: calc(0 - var(--space-4)) }
.lg-p4 { padding: var(--space-4) }
.lg-px4 { padding-left: var(--space-4); padding-right: var(--space-4) }
.lg-py4 { padding-top: var(--space-4); padding-bottom: var(--space-4) }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment