Building a System for Spacing and Typography Using a Modular Scale @bermonpainter | Front-End Design Meetup

Grids

No content

No content

No content

No content

Spacing Concepts

https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

Modular Scale

No content

Examples

Fonts

// --------------------------------------------------------------- // Font Scale Map // key: (font-size, line-height) // --------------------------------------------------------------- $font-scale: ( xs: (13px, 1.5), s: (14px, 1.3), m:(16px, 1.5), xm:(18px, 1.4), l: (20px, 1.3), xl: (24px, 1.3), xxl: (30px, 1.2), xxxl: (48px, 1.1) ); // --------------------------------------------------------------- // Font Scale Function // Iterates through the map // --------------------------------------------------------------- @function font-scale($scale) { @return map-get($font-scale, $scale); } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. Sass

// --------------------------------------------------------------- // Base Font Size // These effect the modular scale of the relative font sizes // --------------------------------------------------------------- $base-font-size-desktop: 16px; $base-font-size-mobile: 16px; // --------------------------------------------------------------- // Convert px based font to em // Usage: // em(px, base-size) // --------------------------------------------------------------- @function em($pixels, $base: $base-font-size-desktop) { @if (unitless($pixels)) { $pixels: $pixels * 1px; } @if (unitless($base)) { $base: $base * 1px; } @return $pixels / $base * 1em; } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. Sass

// --------------------------------------------------------------- // Font Scale Mixin // Mixing to easily apply the correct font scale size // // Usage: // @include font-scale(xl); // --------------------------------------------------------------- @mixin font-scale($scale, $important:null) { @if type-of(font-scale($scale))=="list" { font-size: em(nth(font-scale($scale), 1)) #{$important}; @if (length(font-scale($scale)) > 1) { line-height: nth(font-scale($scale), 2) #{$important}; } } @else { font-size: em(font-scale($scale)) #{$important}; } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. Sass

// --------------------------------------------------------------- // Base Font Size // These effect the modular scale of the relative font sizes // --------------------------------------------------------------- $base-font-size-desktop: 16px; $base-font-size-mobile: 14px; body { background-color: brand-color(muted, base); color: brand-color(grey, base); font-weight: normal; font-size: $base-font-size-desktop; letter-spacing: .375px; line-height: 1.5; -webkit-font-smoothing: antialiased; @include breakpoint(s){ font-size: $base-font-size-mobile; letter-spacing: .4px; } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. Sass

Margin / Padding

// --------------------------------------------------------------- // Spacing Scale Map // Modular scale with a base of 1, 3, 6, 12, 24, 48, 96 // --------------------------------------------------------------- $spacing-scale: ( auto: auto, zero: 0px, xxs: 1px, xs: 3px, s: 6px, m: 12px, l: 24px, xl: 48px, xxl: 96px ); 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. Sass

// --------------------------------------------------------------- // Spacing Scale Function // Iterates through the spacing scale map // Usage: // spacing(xl); // --------------------------------------------------------------- @function spacing($scale) { $is-negative: str-slice($scale, 1, 1); @if $is-negative == '-' { // Get the length of the scale // that includes the '-' value $scale-length: str-length($scale); // Slice the scale to remove the '-' value $scale-slice: str-slice($scale, 2, $scale-length); // Get the value from the map $scale-value: map-get($spacing-scale, $scale-slice); @return (-$scale-value); // Return the negative value from the map } @else { @return map-get($spacing-scale, $scale); // Return the positive value from the map } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. Sass

// --------------------------------------------------------------- // Helper spacing mixins` //——————————————————————————————— // Usage: @include equal-spacing(margin, s); @mixin equal-spacing($type, $value) { #{$type} : spacing($value); } // Usage: @include offset-spacing(margin, zero, auto); @mixin offset-spacing($type, $top-bottom, $left-right) { #{$type} : spacing($top-bottom) spacing($left-right); } // Usage: @include stack(xl); @mixin stack($bottom-margin) { margin-bottom: spacing($bottom-margin); } // Usage: (right-margin) @include inline(xs); @mixin inline($right-margin) { margin-right: spacing($right-margin); 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. Sass

Color

// Blues $blue: #005984; $dark-blue: #014464; // Teals $teal: #067799; $light-teal: #a7e1ea; $x-light-teal: #e0f6fb; $xx-light-teal: #f3fbfd; // Grays $x-dark-gray: #4c4c4c; $dark-gray: #999999; $gray: #696969; $light-gray: #dfe4e4; $x-light-gray: #f2f4f4; $xx-light-grey: #dfe4e4; // Alerts $green: #00853f; $red: #9d2235; $yellow: #ffd200; // Misc $white: #fff; 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. Sass

$colors: ( primary: ( base: $blue, light: $light-blue, x-light: $x-light-blue, dark: $dark-blue, x-dark: $x-dark-blue, ), secondary: ( base: $teal, light: $light-teal, dark: $dark-teal, ), gray: ( base: $gray, light: $light-gray, x-light: $x-light-gray, dark: $dark-gray, x-dark: $x-dark-gray, ), 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. Sass alert: ( info: $gray, success: $green, warning: $yellow, danger: $red ) ); 21. 22. 23. 24. 25. 26. 27.

In Practice

Questions

Fin @bermonpainter | https://officehours.io/people/bermonpainter