CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017

1. CSS GRID CHANGES EVERYTHING (SHIFTING THE WEB LAYOUT PARADIGM) Morten Rand-Hendriksen | @mor10 | WebCamp Zagreb 2017

2. mor10.com/wczg2017 SLIDES, LINKS, ETC: @mor10 #CSSGrid #WCZG

3. Paradigm Shift

4. Desire Path

5. Pave the cowpath To formalize an existing de-facto practice.

6. Desire Path: A Short History of Web Design

7. 1990 Tim Berners-Lee publishes ﬁrst ever web page.

8. 1990 Web as text period

9. Web as text period 1990 Håkon Wium Lie proposes Cascading Style Sheets 1994

10. 1990 Web as text period 1994 DarkAges

11. Web as text period DarkAges 1990 Lynda Weinman publishes Designing with Web Graphics 1996

12. 1990 1996 Wild West period - Tables Frames Flash “Pixel-perfect” Web as text period 1994 DarkAges

13. Wild West period - Tables Frames Flash “Pixel-perfect” Web as text period DarkAges 1990 Jeffrey Zeldman publishes Designing with Web Standards 20031996

14. 1990 20031996 Web Standards Period - Floats Clears Blogs “Web 2.0” CSS layout hell Web as text period 1994 DarkAges Wild West period - Tables Frames Flash “Pixel-perfect”

15. Web Standards Period - Floats Clears Blogs “Web 2.0” CSS layout hell Web as text period DarkAges Wild West period - Tables Frames Flash “Pixel-perfect” 1990 20031996 2012 Microsoft releases Windows 8

16. Web Standards Period - Floats Clears Blogs “Web 2.0” CSS layout hell Web as text period DarkAges Wild West period - Tables Frames Flash “Pixel-perfect” 1990 20031996 2012 Microsoft proposes CSS Grid Layout

17. Web Standards Period - Floats Clears Blogs “Web 2.0” CSS layout hell Web as text period DarkAges Wild West period - Tables Frames Flash “Pixel-perfect” 1990 20031996 2015 display: flex; 2012

18. 1990 20031996 2015 Web Standards Period - Floats Clears Blogs “Web 2.0” CSS layout hell Web as text period 1994 DarkAges Wild West period - Tables Frames Flash “Pixel-perfect” UncertaintyPeriod

19. meanwhile…

20. Rachel Andrew @rachelandrew Jen Simmons @jensimmons

21. Web Standards Period - Floats Clears Blogs “Web 2.0” CSS layout hell Web as text period DarkAges Wild West period - Tables Frames Flash “Pixel-perfect” UncertaintyPeriod 1990 201720031996 2015 display: grid; 2012

22. 1990 20031996 2015 Web Standards Period - Floats Clears Blogs “Web 2.0” CSS layout hell Web as text period 1994 DarkAges Wild West period - Tables Frames Flash “Pixel-perfect” UncertaintyPeriod 2017 Web as Layout Surface

23. Pave the cowpath To formalize an existing de-facto practice.

24. Person behind you What did I just watch?!?!

25. https://codepen.io/mor10/full/JrpRyv/

26. CSS Grid makes the impossible possible

27. <div class="MomentsGuidePage-capsules"> <div class="MomentsCapsuleSummaryGroup"> <div class="MomentsCapsuleSummary--hero"></div> <div class="MomentsCapsuleSummaryGroup-list"> <div class="MomentsCapsuleSummary--portrait"></div> <div class="MomentsCapsuleSummary--portrait"></div> <div class="MomentsCapsuleSummary--portrait"></div> </div> </div> <div class="MomentsCapsuleSummaryGroup"> <div class="MomentsCapsuleSummaryGroup-list"> <div class="MomentsCapsuleSummary--portrait"></div> <div class="MomentsCapsuleSummary--portrait"></div> <div class="MomentsCapsuleSummary--portrait"></div> </div> <div class="MomentsCapsuleSummaryGroup-list"> <div class="MomentsCapsuleSummary--portrait"></div> <div class="MomentsCapsuleSummary--portrait"></div> <div class="MomentsCapsuleSummary--portrait"></div> </div>

28. 2 3 4 8 9 10 5 6 7 1

29. 2 3 4 8 9 10 5 6 7 1

30. 2 3 4 1

31. 2 3 4 8 9 10 5 6 7 1

32. 10 10 2 3 4 8 9 10 5 6 7 1 11 12 14 15

33. 11 1312 10 14 9 10 2 3 4 8 5 6 7 1 15

34. Since the beginning of (web) time, web layouts have been broken. We’ve just reﬁned how we break them.

35. .main-content .sidebar .container

36. .main-content .sidebar .wrap.wrap { border: 5px solid red; } .main-content { background: blue; } .sidebar { background: green; }

37. .main-content .sidebar .wrap.wrap { border: 5px solid red; } .main-content { width: 45%; float: left; background: blue; } .sidebar { width: 45%; float: right; background: green; }

38. .main-content .sidebar .wrap.wrap { border: 5px solid red; } .main-content { width: 45%; float: left; background: blue; } .sidebar { width: 45%; float: right; background: green; } /* Clearfix */ .wrap:after { content: ""; display: table; clear: both; }

39. .main-content .sidebar .wrap.wrap { display: flex; justify-content:   space-between; border: 5px solid red; } .main-content { width: 45%; background: blue; } .sidebar { width: 45%; background: green; }

40. .main-content .sidebar .wrap .other-content

41. .main-content .sidebar .wrap .other-content .container

42. .main-content .sidebar .wrap.wrap { display: flex; justify-content:   space-between; border: 5px solid red; } .container { width: 45%; } .main-content { background: blue; } .other-content { background: purple; } .sidebar { width: 45%; background: green; } .container .other-content

43. This is a hack. float and flex force us to create HTML clutter in the form of wrappers like the .container element in this example. .main-content .sidebar .wrap .container .other-content

44. This is web layouts today. float and flex have been the two only options for creating horizontal layouts resulting in the web suffering from a severe case of Divitis. .main-content .sidebar .wrap .container .other-content

45. http://getbootstrap.com/css/

46. Paal Joachim Romdahl on Advanced WordPress Group

47. Me, every time I build a new site What if we didn’t have to do this any more…

51. <div class="MomentsGuidePage-capsules"> <div class="MomentsCapsuleSummary--hero"></div> <div class="MomentsCapsuleSummary--portrait"></div> <div class="MomentsCapsuleSummary--portrait"></div> <div class="MomentsCapsuleSummary--portrait"></div> <div class="MomentsCapsuleSummary--portrait"></div> <div class="MomentsCapsuleSummary--portrait"></div> <div class="MomentsCapsuleSummary--portrait"></div> <div class="MomentsCapsuleSummary--portrait"></div> <div class="MomentsCapsuleSummary--portrait"></div> <div class="MomentsCapsuleSummary--portrait"></div> </div>

52. <ul class="MomentsGuidePage-capsules"> <li class="MomentsCapsuleSummary--hero"></li> <li class="MomentsCapsuleSummary"></li> <li class="MomentsCapsuleSummary"></li> <li class="MomentsCapsuleSummary"></li> <li class="MomentsCapsuleSummary"></li> <li class="MomentsCapsuleSummary"></li> <li class="MomentsCapsuleSummary"></li> <li class="MomentsCapsuleSummary"></li> <li class="MomentsCapsuleSummary"></li> <li class="MomentsCapsuleSummary"></li> </ul>

53. Problem: Current tools for web layout are content-out and one-dimensional. Solution: Two-dimensional layout-in tool to separate content from presentation.

54. 1 2 3 4 5 6

55. You, right now OK, I’m listening…

56. .site .page-title .main-content .sidebar .footer .masthead <div class="site"> <header class="masthead"> </header> <h1 class="page-title"> </h1> <main class="main-content"> </main> <aside class="sidebar"> </aside> <footer class="footer"> </footer> </div>

57. • Grid container • Grid item • Grid line • Grid cell • Grid track • Grid area • Grid gap CSS Grid Terminology:

58. Element containing a grid, deﬁned by setting display: grid; Grid container <div class="site"> <header class="masthead"> </header> <h1 class="page-title"> </h1> <main class="main-content"> </main> <aside class="sidebar"> </aside> <footer class="footer"> </footer> </div>

59. Element that is a direct descendant of the grid container. Grid item <div class="site"> <header class="masthead"> </header> <h1 class="page-title"> </h1> <main class="main-content"> </main> <aside class="sidebar"> </aside> <footer class="footer"> </footer> </div>

60. Horizontal (row) or vertical (column) line separating the grid into sections. Grid line

61. Grid lines are referenced by number, starting and ending with the outer borders of the grid. Grid line 1 2 3 4 5 6 1 2 3 4 5 6

62. The intersection between a grid row and a grid column. Effectively the same as a table cell. Grid cell

63. Rectangular area between four speciﬁed grid lines. Grid areas can cover one or more cells. Grid area

64. The space between two or more adjacent grid lines. Row tracks are horizontal, Column tracks vertical. Grid track

65. Empty space between grid tracks (shown in blue). Commonly called gutters. Grid gap 1 2 3 4 5 6 1 2 3 4 5 6

66. The person next to you I’ll pretend I got that…

67. 1. Deﬁne a grid. 2. Place items within the grid. 3. Make world peace. CSS Grid in a Nutshell:

68. <div class="site"> <header class="masthead"> </header> <h1 class="page-title"> </h1> <main class="main-content"> </main> <aside class="sidebar"> </aside> <footer class="footer"> </footer> </div> .masthead .page-title .main-content .sidebar .footer .site

69. <div class="site"> </div> .masthead .page-title .main-content .sidebar .footer .site

70. .site Creates a grid container. display: grid;

71. .site 2 fractions 1 fraction each 2fr 1fr 1fr Draws grid lines. Takes list of length values (em, px, %, fr, etc.) denoting the distance between each line. grid-template-columns: 2fr 1fr 1fr;

72. .site Fit content auto 1 fraction 1fr 3 fractions 3fr Draws grid lines. Takes list of length values (em, px, %, fr, etc.) denoting the distance between each line. grid-template-rows: auto 1fr 3fr;

73. .masthead .page- title .main- content .sidebar .footer .site Grid items automatically populate grid from top left to bottom right based on HTML source order.

74. .site 1 2 3 4 .masthead grid-column: 2/4; grid-row: 2/3; Applied to grid items. Deﬁnes the start and end grid lines for columns and rows.

75. .site 1 2 3 4 Start at column line 2. End at column line 4. .masthead grid-column: 2/4; grid-row: 2/3;

76. .masthead .masthead .site 1 2 3 4 Start at row line 2. End at row line 3. grid-column: 2/4; grid-row: 2/3;

77. .site.site { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto 1fr 3fr; } .masthead { grid-column: 2/4; grid-row: 2/3; } .page-title { grid-column: 1/4; grid-row: 1/2; } .main-content { grid-column: 1/2; grid-row: 2/4; } /* etc etc */ 1 2 3 4 1 2 3 4 .page-title .main-content .sidebar .footer .masthead

78. Naysayer to your left Looks promising, but remembering what lines to target seems tricky… especially when the site is responsive.

79. .site title title title main main header header sidebar footer Applied to grid container. Uses a text-based grid map to apply grid area names to individual cells. grid-template-areas

80. .site { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto 1fr 3fr; grid-template-areas: "title title title" "main header header" "main sidebar footer"; }

81. Speciﬁes what grid area the element is placed within. grid-area: [area-name];

82. title title title main main header header sidebar footer .page-title .main-content .sidebar .footer .masthead .site.site { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto 1fr 3fr; grid-template-areas: "title title title" "main header header" "main sidebar footer"; } .masthead { grid-area: header; } .page-title { grid-area: title; } .main-content { grid-area: main; } /* etc etc */

83. .site { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 3fr; grid-template-areas: "title title" "main header" "main sidebar"; } .masthead { grid-area: header; } .page-title { grid-area: title; } .main-content { grid-area: main; } .sidebar { grid-area: sidebar; } .footer { grid-area: footer; } @media screen and (min-width: 34em) { .site { grid-template-columns: 2fr 1fr 1fr; grid-template-areas: "title title title" "main header header" "main sidebar footer"; } }

84. .site .page-title .main-content .sidebar .footer .masthead .site .page-title .main-content .sidebar .footer .masthead .site .masthead .page-title .main-content .sidebar .footer No grid Two-column grid Three-column grid

85. Girds are not inherited by child elements. Instead we create nested grids. Nested grids

86. You, right now Sooooooo… no more ﬂoats and clears?

87. Use CSS Grid any time you work with two-dimensional layouts.

88. One more thing

89. The grid container is a ﬂexible box.

90. .site { display: grid; grid-template-columns: repeat(6, 10em); grid-gap: 1em; }

91. .site { display: grid; grid-template-columns: repeat(6, 10em); justify-content: center; grid-gap: 1em; }

92. .site { display: grid; grid-template-columns: repeat(6, 10em); justify-content: space-between; grid-gap: 1em; }

93. .site { display: grid; grid-template-columns: repeat(6, 10em); justify-content: space-between; grid-gap: 1em; }

94. repeat(auto-fit, 10em); repeat(auto-fill, 10em);

95. Creates as many 10em columns as will ﬁt within the grid container. Will create empty columns. grid-template-columns:   repeat(auto-fill, 10em);

96. Creates as many 10em columns as will ﬁt within the grid container. Does not create empty columns. grid-template-columns:   repeat(auto-fit, 10em);

97. https://codepen.io/mor10/pen/MEQJbM

98. Your boss / client … but older browsers!

99. http://caniuse.com/#search=grid Grid is supported in all modern browsers.

100. The elephants in the room

101. Internet Explorer 101 and Edge2 lag behind* 1 IE10 uses the original Grid speciﬁcation. 2 Edge is adopting the modern speciﬁcation October 17th. * Fun fact: CSS Grid was invented by Microsoft for IE10.

102. Use feature queries to test for grid support in the current browser. @supports (display: grid) { … } Current recommendation:

103. HOLD ON THERE MORTEN!

104. Everyone right now That means the site won’t look the same in all browsers!

105. If it works here… … it works here as well!

106. Forcing sites to look the same across all browsers is a bad habit.

107. Responsive Web Design means we’ve been serving up different layouts for different browsers since 2010.

108. Progressive Enhancement is Responsive Web Design in three dimensions.

109. Accessible mobile-ﬁrst layouts work well on all screen widths.

110. Embrace Progressive Enhancement! Use the paved desire paths!

111. 1. Build accessible mobile-ﬁrst layout without grid. 2. Use mobile-ﬁrst layout as fallback for all browsers. 3. Use @supports to detect grid support. 4. At the appropriate breakpoint, create layout with grid and grid-areas. 5. Explore new layouts as viewport widens. CSS Grid: A Practical Approach for Today

112. More CSS Grid info:

113. Firefox has a grid inspector! https://goo.gl/SJmlms

114. Rachel Andrew’s Grid by Example is doctrine. https://gridbyexample.com/

115. Rachel Andrew’s book The New CSS Layout comes out next week. https://goo.gl/LY6cFy

116. MDN has exhaustive documentation. https://goo.gl/8RrH2Y

117. Mozilla’s CSS Grid Playground is a great place to get the basics. https://goo.gl/rmbkM5

118. Mozilla also has a demo site with has exhaustive documentation. https://goo.gl/wa0Fk9

119. CSS Tricks has a Complete Guide to CSS Grid. https://goo.gl/Z01gjF

120. Kuhn, my theme using CSS grid, is on GitHub to give you ideas. https://goo.gl/URouSh

121. Building Production-Ready CSS Grid Layouts Today by yours truly at Smashing Magazine https://goo.gl/dae838

122. Free for everyone until October 25th, 2017! https://goo.gl/wyC1Lz

123. Go build your own Desire Paths.

124. 1. Make it accessible. 2. Make it fancy. 3. Make sure the fancy doesn’t break accessibility.