Building a System for Spacing and Typography Using a Modular Scale

Building a System for Spacing and Typography Using a Modular Scale

Overview:
Dealing with space in a web application is one of the most difficult areas to maintain consistency. Margin, padding, and positioning are the properties that are used the most outside of color. In this session we'll review:

Five Things Audience Members Will Learn:
1. Concepts around spacing
2. The various values that can be used now (vw, vh, rem, calc())
3. How to build a modular spacing scale using a bit of Sass
4. How to apply a similar scale when defining font sizes
5. And how to turn all of this into a reusable system that enforces consistent spacing throughout an interface

7559f6cff1f5efc2d210965febd4d71c?s=128

Bermon Painter

May 10, 2018
Tweet

Transcript

  1. Building a System for Spacing and Typography Using a Modular

    Scale @bermonpainter | Front-End Design Meetup
  2. Grids

  3. None
  4. None
  5. None
  6. None
  7. Spacing Concepts

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

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

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

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

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

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

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

  15. Modular Scale

  16. None
  17. Examples

  18. Fonts

  19. // --------------------------------------------------------------- // 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
  20. // --------------------------------------------------------------- // 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
  21. // --------------------------------------------------------------- // 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
  22. // --------------------------------------------------------------- // 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
  23. Margin / Padding

  24. // --------------------------------------------------------------- // 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
  25. // --------------------------------------------------------------- // 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
  26. // --------------------------------------------------------------- // 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
  27. Color

  28. // 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
  29. $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.
  30. In Practice

  31. Questions

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