Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Under the Hood of Modern CSS Frameworks

Under the Hood of Modern CSS Frameworks

Talk I gave at DjangoCon 2016.

343be50df57075055b61a622443584d4?s=128

Michael Trythall

July 18, 2016
Tweet

Transcript

  1. UNDER THE HOOD OF MODERN CSS FRAMEWORKS DJANGOCON US 2016

  2. I build CSS frameworks for people.

  3. Some background.

  4. UNDER THE HOOD OF MODERN CSS FRAMEWORKS FRAMEWORKS I EVALUATED

    ▸ Bootstrap - getbootstrap.com ▸ Foundation - foundation.zurb.com ▸ Semantic UI - semantic-ui.com ▸ PURE - purecss.io ▸ 5 years worth of projects for NTI.org, smithsonian.com, 
 and 3-4 other projects.
  5. What’s in a modern CSS framework?

  6. UNDER THE HOOD OF MODERN CSS FRAMEWORKS A COLLECTION OF

    DESIGN SYSTEMS ▸ Forms ▸ Components ▸ Behaviors ▸ Documentation ▸ Test Framework ▸ Reset ▸ Configuration ▸ Color Management ▸ Typography & Rhythm ▸ Layout
  7. RESETS

  8. CSS resets are meant to abstract away browser inconsistencies.

  9. CSS Reset != Base Styles Shouldn’t imprint heavily on your

    style.
  10. Normalize.css

  11. THE 
 PROBLEM WITH NORMALIZE.CSS (AND CSS RESETS) ▸ Most

    are hefty. Normalize is ~7KB. ▸ They support a lot of browsers no one cares about. ▸ Lots of properties you’re likely to override. ▸ Handle a lot of things no one cares about, e.g. <kbd> ▸ Another layer of styles in your CSS inspector.
  12. UNDER THE HOOD OF MODERN CSS FRAMEWORKS WHAT DO YOU

    NEED IN A RESET? ▸ Something versioned. We discover new browser quirks all the time! ▸ Lightweight. ▸ Doesn’t get in the way of your base styles (nothing super specific). ▸ Doesn’t repeat itself. Is efficient with selectors. ▸ Well documented. But nuke those comments for production!
  13. CONFIGURATION

  14. The framework is all the individual systems working well together.

  15. Not every system is required. Most popular frameworks make it

    easy to configure what you need.
  16. None
  17. Most frameworks keep variables global-ish.

  18. None
  19. Global vs Local Configuration

  20. Foundation keeps system config in its respective file. Parts of

    this will bleed everywhere.
  21. Namespace the important stuff.

  22. // Sizes of headings at various screen sizes. // Each

    key is a breakpoint. // and each value is a map of heading sizes. $header-sizes: ( small: ( "h1": 36px, "h2": 24px, "h3": 24px, "h4": 16ox, "h5": 14px, "h6": 12px, ), );
  23. // Site breakpoints used by various plugins $breakpoints: ( small:

    0, medium: 768px, large: 940px, xlarge: 1200px, xxlarge: 1280px, );
  24. TYPOGRAPHY

  25. UNDER THE HOOD OF MODERN CSS FRAMEWORKS MOST TYPOGRAPHY SYSTEMS

    HAVE… ▸ A base font size ▸ A base line-height ▸ Preset sizes for headings and other basic tags ▸ Consistent method for spacing between elements ▸ Possibly some helpers for setting sizes/doing conversions between sizing units.
  26. // Or whatever. Roughly 16px. $base-font: 16px; // Keep this

    unitless! $line-height: 1.5; p { font-size: $base-font-size; line-height: $line-height; } h1 { // Equal to 3 (1.5 * 2) line-height: 2; }
  27. h1, .h1 { font-size: $font-size-h1; } h2, .h2 { font-size:

    $font-size-h2; } h3, .h3 { font-size: $font-size-h3; } h4, .h4 { font-size: $font-size-h4; } h5, .h5 { font-size: $font-size-h5; } h6, .h6 { font-size: $font-size-h6; } Bootstrap makes header sizes configurable.
  28. Good typography is hard :(

  29. Typography sets the vertical rhythm for the whole project.

  30. Short version: Harmonious spacing between everything in a document.

  31. drewish.com/tools/vertical-rhythm/

  32. The big frameworks keep it simple.

  33. Use REMs

  34. REMs allow us to have a typography-based constant, global sizing

    unit.
  35. html { // Set your REM size here. font-size: 20px;

    } .box { // Font-size is 20px font-size: 1rem; // Margin-bottom is 40px margin-bottom: 2rem; }
  36. <div class="box"> This is some text </div> <div class="box"> This

    is some text </div>
  37. None
  38. FONT SIZE AT 40PX

  39. foundation.zurb.com/templates-previews-sites-f6/product-page.html

  40. LAYOUT

  41. UNDER THE HOOD OF MODERN CSS FRAMEWORKS WHAT’S IN A

    GRID SYSTEM? ▸ Grid container. Typically class .container or via a mixin, @include container. ▸ Columns. Mixins, classes (.column, .column-6), or both! ▸ Gutters (space between columns), usually predefined. ▸ Responsive helpers/utilities (e.g. @include breakpoint(large))
  42. @mixin container { max-width: $site-max-width; padding: 0 $site-gutter; margin: 0

    auto; } .container { @include container; } Creates a stretchy box, dead center, with some safe defaults.
  43. Use Flexbox

  44. Flexbox is really good at 1-dimensional layout.

  45. .container { display: flex; justify-content: space-between; max-width: $site-max-width; } .box

    { width: 33.33%; }
  46. .box:first-child { flex: 1; // Take up as much space

    as you can margin-right: 20px; // 20px between columns }
  47. ~97% GLOBAL SUPPORT. <IE10 AND SAFARI GIVE MOST TROUBLE.

  48. Use Calc()

  49. width: calc(100% * 1/3 - 20px); Works great with 


    
 justify-content: space-between;
  50. @mixin row($num, $spacing: 20px) { width: calc(100% * 1/#{$num} -

    #{$spacing}); } .row-3 > * { display: inline-block; // Or whatever @include by-x(3); }
  51. <div class=“row-3”> <div class=“block”> </div> <div class=“block”> </div> <div class=“block”>

    </div> </div>
  52. ~84% GLOBAL SUPPORT. <IE9 AND OLD VERSIONS OF ANDROID CAUSE

    TROUBLE.
  53. UNDER THE HOOD OF MODERN CSS FRAMEWORKS FLEXBOX RESOURCES ▸

    jonibologna.com/flexbox-cheatsheet/ - Flexbox Cheatsheet ▸ scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties - Good overview of all properties ▸ codepen.io/collection/AeJBbm/ - Lincoln Loop’s Flexbox Friday (real world examples) ▸ css-tricks.com/snippets/css/a-guide-to-flexbox/ - Exhaustive resource for all things Flexbox
  54. COLOR

  55. Most frameworks don’t do much here :(

  56. ANTI-PATTERN

  57. UNDER THE HOOD OF MODERN CSS FRAMEWORKS WHAT DO WE

    NEED FROM A COLOR SYSTEM? ▸ Easy access to colors. Don’t want to memorize HEX values! ▸ A way to apply colors in a sensible way. ▸ Some helpers for picking the right color in the right situation.
  58. $palette: ( primary-blue: #000080, black: #000, iron: #606060, mercury: #EBEBEB,

    white: #FFFFFF, light-blue: #ADD8E6, medium-blue: #0000CD, orange: #FFA500, );
  59. // Sets up basic background/foreground and // link theme support

    @mixin generate-themes($colors: $palette) { @each $name, $color in $palette { .theme-#{$name} { background-color: $color; color: contrast-color($color); } } }
  60. @function contrast-color($color) { @if lightness($color) > 50 { @return #000000;

    } @else { @return #FFFFFF; } Helpers like this make building new things faster.
  61. <div class=“theme-medium-blue”> I’ll have a background of #0000CD! </div> I’ll

    have a background of #0000CD
  62. UNDER THE HOOD OF MODERN CSS FRAMEWORKS HOT COLOR TIPS

    TO IMPRESS YOUR FRIENDS ▸ Avoid modifying colors via functions like darken() or lighten() functions. Make colors configurable. Exceptions: Something like zebra stripes. ▸ One color system. Using HEX? Use HEX everywhere. ▸ Use your color lingo when communicating with the team. If it’s proper name is orchid, use that name, not “bright rich purple”.
  63. FINAL POINTS

  64. UNDER THE HOOD OF MODERN CSS FRAMEWORKS HIGH LEVEL ▸

    It’s better to KISS and build on a solid base. ▸ Modern CSS APIs make some custom built solutions unnecessary. ▸ Configurability is key. Over-configure! ▸ Use sensible constants. REMs, base colors, etc. ▸ Some general, human-friendly helpers go a long way to help others create new things.
  65. THANKS! @MTRYTHALL