Last active
August 29, 2015 14:09
-
-
Save peterscottsa/3d115e50038906ad2c75 to your computer and use it in GitHub Desktop.
Gist for responsive spacing based on bootstrap breakpoints.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*===================== | |
| Quick spacing | |
| Helpers for quickly adding spacing to markup. | |
| - By default, hooks into bootstrap breakpoints | |
| =====================*/ | |
| $mq: ( | |
| xs: $screen-xs, | |
| sm: $screen-sm, | |
| md: $screen-md, | |
| lg: $screen-lg | |
| ); | |
| @each $screen, $value in $mq { | |
| @media (min-width: $value) { | |
| @for $i from 1 through 8 { | |
| $gutter: $i * 10; | |
| // Margins | |
| .m-top-#{$screen}-#{$gutter} { | |
| margin-top: $gutter+px!important; | |
| } | |
| .m-bottom-#{$screen}-#{$gutter} { | |
| margin-bottom: $gutter+px!important; | |
| } | |
| .m-right-#{$screen}-#{$gutter} { | |
| margin-right: $gutter+px!important; | |
| } | |
| .m-left-#{$screen}-#{$gutter} { | |
| margin-left: $gutter+px!important; | |
| } | |
| .m-sides-#{$screen}-#{$gutter} { | |
| margin-right: $gutter+px!important; | |
| margin-left: $gutter+px!important; | |
| } | |
| .m-vert-#{$screen}-#{$gutter} { | |
| margin-top: $gutter+px!important; | |
| margin-bottom: $gutter+px!important; | |
| } | |
| // Padding | |
| .p-top-#{$screen}-#{$gutter} { | |
| padding-top: $gutter+px!important; | |
| } | |
| .p-bottom-#{$screen}-#{$gutter} { | |
| padding-bottom: $gutter+px!important; | |
| } | |
| .p-right-#{$screen}-#{$gutter} { | |
| padding-right: $gutter+px!important; | |
| } | |
| .p-left-#{$screen}-#{$gutter} { | |
| padding-left: $gutter+px!important; | |
| } | |
| .p-sides-#{$screen}-#{$gutter} { | |
| padding-right: $gutter+px!important; | |
| padding-left: $gutter+px!important; | |
| } | |
| .p-vert-#{$screen}-#{$gutter} { | |
| padding-top: $gutter+px!important; | |
| padding-bottom: $gutter+px!important; | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment