Under the Hood of Modern CSS Frameworks

Talk I gave at DjangoCon 2016.

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.
17. Most frameworks keep variables global-ish.
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>
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