Prototyping Layout with CSS Grid - RevolutionConf 2018

Presented at RevolutionConf, May 2018

Transcript

1. Prototyping Layout with CSS Grid RevolutionConf • May 2018
2. Hello! Jess Eldredge
 Senior front-end engineer, Splice @jessabean
3. Grid systems:
 the foundation of design
8. Design challenge
12. Our requirements • Responsive: grid context changes across breakpoints • Use CSS Grid! • Fallback for browsers that don’t support grid
13. What is CSS Grid Layout?
14. Floats • Width matters • Equal heights are brittle • Don’t forget clearfix!
15. Floats • Width matters • Equal heights are brittle • Don’t forget clearfix!
16. Flexbox • Equal height/width is easy • Vertical centering! • Content flows in ONLY one dimension
17. Flexbox • Equal height/width is easy • Vertical centering! • Content flows in ONLY one dimension
18. Flexbox • Equal height/width is easy • Vertical centering! • Content flows in ONLY one dimension
19. CSS Grid • Layout in 2 dimensions • Children can be placed in open cells of the grid
20. CSS Grid • Layout in 2 dimensions • Children can be placed in open cells of the grid
21. CSS Grid • Layout in 2 dimensions • Children can be placed in open cells of the grid
22. CSS Grid terms
23. grid container
24. grid item
25. grid line
26. grid track
27. grid cell
28. grid gap
29. grid gap
30. Setting up the grid
31. Markup for cuttlefish layout <div class="wrapper"> <div class="grid"> <h1 class="heading">Cuttlefish Are Awesome!</h1> <div class="item item-1"> … </div> <div class="item item-2"> … </div> <div class="item item-3"> … </div> <div class="item item-4"> … </div> <a class="see-more">See more facts</a> </div> </div>
32. Centering our content wrapper .wrapper { max-width: 20em; margin-left: auto; margin-right: auto; } @media screen and (min-width: 48em) { .wrapper { max-width: 38em; } } @media screen and (min-width: 64em) { .wrapper { max-width: 55em; } }
33. .grid { display: grid; } Declaring a grid
34. .grid { display: grid; grid-template-columns: 40px 40px 40px; } Grid-template-columns
35. .grid { display: grid; grid-template-columns: 40px 40px 40px; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; } Grid-template-columns
36. .grid { display: grid; grid-template-columns: 40px 40px 40px; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; } .grid { display: grid; grid-template-columns: 1fr 2fr 1fr; } Grid-template-columns
37. .grid { display: grid; grid-template-columns: 40px 40px 40px; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; } .grid { display: grid; grid-template-columns: 1fr 2fr 1fr; } .grid { display: grid; grid-template-columns: 100px 25% 1fr; } Grid-template-columns
38. .grid { display: grid; grid-template-columns: repeat(6, 1fr); } Grid-template-columns: repeat function
39. .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr); } Grid-template-rows
40. .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } Grid-gap
41. .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } Grid-gap
42. .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } // Shorthand is equivalent to: // grid-column-gap: 0.75em; // grid-row-gap: 0.75em; Grid-gap
43. @media screen and (min-width: 48em) { .grid { grid-template-columns: repeat(12, 1fr); } } @media screen and (min-width: 64em) { .grid { grid-template-columns: repeat(15, 1fr); grid-gap: 1.25em; } } Responsive grid settings
44. DEMO: Basic grid
45. Placing items on the grid
47. .grid > * { grid-column-start: 1; grid-column-end: 7; } Placing grid items with grid-column-start
48. .grid > * { grid-column-start: 1; grid-column-end: 7; } Placing grid items with grid-column-start
49. .grid > * { grid-column-start: 1; grid-column-end: 7; } Placing grid items with grid-column-start
50. .grid > * { grid-column: 1 / 7;
 } Grid-column: shorthand
51. .grid > * { grid-column: 1 / span 6;
 } Grid-column: span syntax
52. .grid > * { grid-column: 1 / span 6;
 } // Shorthand is equivalent to: // grid-column-start: 1; // grid-column-end: span 6; Grid-column: span syntax
53. .grid > * { grid-column: 1 / span 6;
 } // Shorthand is equivalent to: // grid-column-start: 1; // grid-column-end: span 6; Grid-column: span syntax
54. .grid > * { grid-column: 1 / -1;
 } Grid-column: negative grid lines
55. .grid > * { grid-column: 1 / -1;
 } // Shorthand is equivalent to: // grid-column-start: 1; // grid-column-end: -1; Grid-column: negative grid lines
56. .grid { display: grid; }
57. .grid { display: grid; } .grid { display: grid; grid-template-columns: repeat(6, 1fr); }
58. .grid { display: grid; } .grid { display: grid; grid-template-columns: repeat(6, 1fr); } .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; }
59. .grid { display: grid; } .grid { display: grid; grid-template-columns: repeat(6, 1fr); } .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } .grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 0.75em; } .grid > * { grid-column: 1 / span 6; }
60. Detour! The implicit grid • Explicit grid: 
 The grid we define with grid-template-columns or grid-template-rows • Implicit grid: 
 Automatically-created tracks to accommodate additional content
61. .grid { grid-auto-rows: auto; grid-auto-columns: auto; } The implicit grid at work
62. .grid { grid-auto-rows: auto; grid-auto-columns: auto; } The implicit grid at work
63. .grid { grid-auto-rows: auto; grid-auto-columns: auto; } The implicit grid at work
64. .grid { grid-auto-rows: auto; grid-auto-columns: auto; } The implicit grid at work
66. @media screen and (min-width: 48em) { }
67. @media screen and (min-width: 48em) { } @media screen and (min-width: 48em) { .heading { grid-column: 1 / span 9; } .see-more { grid-column: 10 / span 3; } }
68. @media screen and (min-width: 48em) { .heading { grid-column: 1 / span 9; grid-row: 1; } .see-more { grid-column: 10 / span 3; grid-row: 1; } }
69. @media screen and (min-width: 48em) { .item-1 { grid-column: 1 / span 12; } .item-2 { grid-column: 1 / span 4; } .item-3 { grid-column: 5 / span 4; } .item-4 { grid-column: 9 / span 4; } }
71. @media screen and (min-width: 64em) { }
72. @media screen and (min-width: 64em) { } @media screen and (min-width: 64em) { .heading { grid-column: 1 / span 12; } .see-more { grid-column: 13 / span 3; } }
73. @media screen and (min-width: 64em) { .item-2 { grid-column: 13 / span 3; } .item-3 { grid-column: 13 / span 3; } .item-4 { grid-column: 13 / span 3; } }
74. @media screen and (min-width: 64em) { .item-1 { grid-column: 1 / span 12; grid-row: 2 / span 3; } }
75. VIDEO: Final grid at all breakpoints
76. Progressive enhancement
78. • No auto-placement of grid items • No grid-gap • Grid-column shorthand only specifies start line -ms-grid syntax limitations Applies to IE11, MS Edge <16
79. Using feature queries to target CSS Grid at modern browsers @supports (display: grid) { // css grid styles go here }
80. Using feature queries to target CSS Grid at modern browsers @supports (display: grid) { // css grid styles go here } .grid { display: flex; }
81. .grid { display: flex; flex-wrap: wrap; flex-direction: column; } .grid > * { flex: 1 1 auto; } @supports (display: grid) { // css grid styles go here }
82. .grid { display: flex; flex-wrap: wrap; flex-direction: column; margin: -0.375rem; } .grid > * { flex: 1 1 auto; margin: 0.375rem; } @supports (display: grid) { // css grid styles go here }
83. .grid { display: flex; flex-wrap: wrap; flex-direction: column; margin: -0.375rem; } .grid > * { flex: 1 1 auto; margin: 0.375rem; } @supports (display: grid) { // css grid styles go here } .grid { display: flex; flex-wrap: wrap; flex-direction: column; margin: -0.375rem; } .grid > * { flex: 1 1 auto; margin: 0.375rem; } @supports (display: grid) { .grid, .grid > * { margin: 0; } }
84. @media screen and (min-width: 48em) { .grid { flex-direction: row; } .heading { flex-basis: calc(75% - 0.75rem); } .item-1 { flex-basis: calc(100% - 0.75rem); } .item-2, .item-3, .item-4 { flex-basis: calc(33.333% - 0.75rem); } .see-more { flex-basis: calc(25% - 0.75rem); } }
85. @media screen and (min-width: 48em) { .heading { order: 1; } .see-more { order: 2; } .item-1 { order: 3; } .item-2 { order: 4; } .item-3 { order: 5; } .item-4 { order: 6; } } @supports (display: grid) { .grid > * { order: unset; } }
86. @media screen and (min-width: 64em) { .grid { margin: -0.625rem; } .grid > * { margin: 0.625rem; } }
87. @media screen and (min-width: 64em) { .grid { margin: -0.625rem; } .grid > * { margin: 0.625rem; } } @media screen and (min-width: 64em) { .heading, .item-1 { flex-basis: calc(80% - 1.25rem); } .item-2, .item-3, .item-4, .see-more { flex-basis: calc(20% - 1.25rem); } }
88. @media screen and (min-width: 64em) { .grid { margin: -0.625rem; } .grid > * { margin: 0.625rem; } } @media screen and (min-width: 64em) { .heading, .item-1 { flex-basis: calc(80% - 1.25rem); } .item-2, .item-3, .item-4, .see-more { flex-basis: calc(20% - 1.25rem); } }
89. Flexbox limitations
90. @media screen and (min-width: 64em) { .heading { flex-basis: calc(80% - 1.25rem); } .item-1 { flex-basis: calc(100% - 1.25rem); } .item-2, .item-3, .item-4 { flex-basis: calc(33.333% - 1.25rem); } .see-more { flex-basis: calc(20% - 1.25rem); } }
91. There’s a lot more to CSS Grid
92. • Named column lines • grid-template-area • grid-auto-rows / grid-auto-columns / grid-auto-flow • auto-fill & auto-fit • minmax More Grid features
93. • Source order and semantics are important • Use grid placement for visual display, but be mindful of document order for speech and keyboard navigation • Tab order will follow document order, not visual order CSS Grid and Accessibility
94. CSS Grid or Flexbox?
95. CSS Grid or Flexbox?
96. CSS Grid or Flexbox?
97. You can use CSS Grid TODAY
101. http://labs.jensimmons.com/2017/01-005.html
102. http://redonion.se/cssgrid/
103. https://gridsetapp.com/specs/fonmon/?gridset=show
104. Do we need grid systems?
105. https://www.rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/
106. – Miriam Suzanne http://oddbird.net/2017/06/28/susy3/ “If you have the browser-support matrix to start using the CSS Grid module directly, you should do it, and forget about Susy.”
107. placeholder: screenshot simplified grid for prototype
108. placeholder: screenshot simplified grid for prototype
109. Resources • Rachel Andrew: https://gridbyexample.com/learn/ • Jen Simmons: http://jensimmons.com/post/feb-27-2017/learn-css-grid • MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout • CSSWG: https://github.com/w3c/csswg-drafts/issues
110. • Download Firefox! • Examine your browser support requirements • Start CSS Grid conversation between design and development • Choose a feature and start using CSS Grid Layout! Next Steps
112. Thank you! Links to demo code https://grid-prototype-revconf2018.glitch.me/ https://github.com/jessabean/grid-prototype-revconf2018 Slides https://speakerdeck.com/jessabean/prototyping-layout-with-css-grid-revconf2018
 @jessabean | jess@eldredge.io