Created
December 13, 2016 03:39
-
-
Save simonswiss/93a9ccf6db8d7428ff130193cb74454d to your computer and use it in GitHub Desktop.
Tachyons spacing module with extra scale steps and mixins
This file contains 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
| // Converted Variables | |
| $spacing-none: 0 !default; | |
| $spacing-extra-small: .25rem !default; | |
| $spacing-small: .5rem !default; | |
| $spacing-small-plus: .75rem !default; // custom | |
| $spacing-medium: 1rem !default; | |
| $spacing-medium-plus: 1.5rem !default; // custom | |
| $spacing-large: 2rem !default; | |
| $spacing-large-plus: 3rem !default; // custom | |
| $spacing-extra-large: 4rem !default; | |
| $spacing-extra-large-plus: 6rem !default; // custom | |
| $spacing-extra-extra-large: 8rem !default; | |
| $spacing-extra-extra-extra-large: 16rem !default; | |
| // Custom Media Query Variables | |
| /* Variables */ | |
| /* | |
| SPACING - CUSTOMIZED | |
| Docs: http://tachyons.io/docs/layout/spacing/ | |
| An eight step powers of two scale ranging from 0 to 16rem. | |
| Base: | |
| p = padding | |
| m = margin | |
| Modifiers: | |
| a = all | |
| h = horizontal | |
| v = vertical | |
| t = top | |
| r = right | |
| b = bottom | |
| l = left | |
| 0 = none | |
| 1 = 1st step in spacing scale | |
| 2 = 2nd step in spacing scale | |
| 3 = 3rd step in spacing scale | |
| 4 = 4th step in spacing scale | |
| 5 = 5th step in spacing scale | |
| 6 = 6th step in spacing scale | |
| 7 = 7th step in spacing scale | |
| Media Query Extensions: | |
| -ns = not-small | |
| -m = medium | |
| -l = large | |
| */ | |
| $map: ( | |
| '0': $spacing-none, | |
| '1': $spacing-extra-small, | |
| '2': $spacing-small, | |
| '2-plus': $spacing-small-plus, | |
| '3': $spacing-medium, | |
| '3-plus': $spacing-medium-plus, | |
| '4': $spacing-large, | |
| '4-plus': $spacing-large-plus, | |
| '5': $spacing-extra-large, | |
| '5-plus': $spacing-extra-large-plus, | |
| '6': $spacing-extra-extra-large, | |
| '7': $spacing-extra-extra-extra-large | |
| ); | |
| @each $class, $size in $map { | |
| // padding | |
| .pa#{$class} { padding: $size; } | |
| .pl#{$class} { padding-left: $size; } | |
| .pr#{$class} { padding-right: $size; } | |
| .pt#{$class} { padding-top: $size; } | |
| .pb#{$class} { padding-bottom: $size; } | |
| .pv#{$class} { padding-top: $size; padding-bottom: $size; } | |
| .ph#{$class} { padding-left: $size; padding-right: $size; } | |
| // margins | |
| .ma#{$class} { margin: $size; } | |
| .ml#{$class} { margin-left: $size; } | |
| .mr#{$class} { margin-right: $size; } | |
| .mt#{$class} { margin-top: $size; } | |
| .mb#{$class} { margin-bottom: $size; } | |
| .mv#{$class} { margin-top: $size; margin-bottom: $size; } | |
| .mh#{$class} { margin-left: $size; margin-right: $size; } | |
| } | |
| @media #{$breakpoint-not-small} { | |
| @each $class, $size in $map { | |
| // padding | |
| .pa#{$class}-ns { padding: $size; } | |
| .pl#{$class}-ns { padding-left: $size; } | |
| .pr#{$class}-ns { padding-right: $size; } | |
| .pt#{$class}-ns { padding-top: $size; } | |
| .pb#{$class}-ns { padding-bottom: $size; } | |
| .pv#{$class}-ns { padding-top: $size; padding-bottom: $size; } | |
| .ph#{$class}-ns { padding-left: $size; padding-right: $size; } | |
| // margins | |
| .ma#{$class}-ns { margin: $size; } | |
| .ml#{$class}-ns { margin-left: $size; } | |
| .mr#{$class}-ns { margin-right: $size; } | |
| .mt#{$class}-ns { margin-top: $size; } | |
| .mb#{$class}-ns { margin-bottom: $size; } | |
| .mv#{$class}-ns { margin-top: $size; margin-bottom: $size; } | |
| .mh#{$class}-ns { margin-left: $size; margin-right: $size; } | |
| } | |
| } | |
| @media #{$breakpoint-medium} { | |
| @each $class, $size in $map { | |
| // padding | |
| .pa#{$class}-m { padding: $size; } | |
| .pl#{$class}-m { padding-left: $size; } | |
| .pr#{$class}-m { padding-right: $size; } | |
| .pt#{$class}-m { padding-top: $size; } | |
| .pb#{$class}-m { padding-bottom: $size; } | |
| .pv#{$class}-m { padding-top: $size; padding-bottom: $size; } | |
| .ph#{$class}-m { padding-left: $size; padding-right: $size; } | |
| // margins | |
| .ma#{$class}-m { margin: $size; } | |
| .ml#{$class}-m { margin-left: $size; } | |
| .mr#{$class}-m { margin-right: $size; } | |
| .mt#{$class}-m { margin-top: $size; } | |
| .mb#{$class}-m { margin-bottom: $size; } | |
| .mv#{$class}-m { margin-top: $size; margin-bottom: $size; } | |
| .mh#{$class}-m { margin-left: $size; margin-right: $size; } | |
| } | |
| } | |
| @media #{$breakpoint-large} { | |
| @each $class, $size in $map { | |
| // padding | |
| .pa#{$class}-l { padding: $size; } | |
| .pl#{$class}-l { padding-left: $size; } | |
| .pr#{$class}-l { padding-right: $size; } | |
| .pt#{$class}-l { padding-top: $size; } | |
| .pb#{$class}-l { padding-bottom: $size; } | |
| .pv#{$class}-l { padding-top: $size; padding-bottom: $size; } | |
| .ph#{$class}-l { padding-left: $size; padding-right: $size; } | |
| // margins | |
| .ma#{$class}-l { margin: $size; } | |
| .ml#{$class}-l { margin-left: $size; } | |
| .mr#{$class}-l { margin-right: $size; } | |
| .mt#{$class}-l { margin-top: $size; } | |
| .mb#{$class}-l { margin-bottom: $size; } | |
| .mv#{$class}-l { margin-top: $size; margin-bottom: $size; } | |
| .mh#{$class}-l { margin-left: $size; margin-right: $size; } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment