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

Transcript

1. Building a System for Spacing and Typography Using a Modular Scale @bermonpainter | Front-End Design Meetup
2. Grids
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
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