Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017

378 views

Published on

CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today. The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface. In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way. CSS Grid is here, and you can start using it today. This talk shows you how to do it right.

Published in: Education
  • Be the first to comment

CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017

  1. 1. CSS GRID CHANGES EVERYTHING (SHIFTING THE WEB LAYOUT PARADIGM) Morten Rand-Hendriksen | @mor10 | WebCamp Zagreb 2017
  2. 2. mor10.com/wczg2017 SLIDES, LINKS, ETC: @mor10 #CSSGrid #WCZG
  3. 3. Paradigm Shift
  4. 4. Desire Path
  5. 5. Pave the cowpath To formalize an existing de-facto practice.
  6. 6. Desire Path: A Short History of Web Design
  7. 7. 1990 Tim Berners-Lee publishes first ever web page.
  8. 8. 1990 Web as text period
  9. 9. Web as text period 1990  Håkon Wium Lie proposes Cascading Style Sheets 1994
  10. 10. 1990 Web as text period 1994 DarkAges
  11. 11. Web as text period DarkAges 1990 Lynda Weinman publishes Designing with Web Graphics 1996
  12. 12. 1990 1996 Wild West period - Tables Frames Flash “Pixel-perfect” Web as text period 1994 DarkAges
  13. 13. Wild West period - Tables Frames Flash “Pixel-perfect” Web as text period DarkAges 1990 Jeffrey Zeldman publishes Designing with Web Standards 20031996
  14. 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. 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. 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. 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. 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. 19. meanwhile…
  20. 20. Rachel Andrew @rachelandrew Jen Simmons @jensimmons
  21. 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. 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. 23. Pave the cowpath To formalize an existing de-facto practice.
  24. 24. Person behind you What did I just watch?!?!
  25. 25. https://codepen.io/mor10/full/JrpRyv/
  26. 26. CSS Grid makes the impossible possible
  27. 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. 28. 2 3 4 8 9 10 5 6 7 1
  29. 29. 2 3 4 8 9 10 5 6 7 1
  30. 30. 2 3 4 1
  31. 31. 2 3 4 8 9 10 5 6 7 1
  32. 32. 10 10 2 3 4 8 9 10 5 6 7 1 11 12 14 15
  33. 33. 11 1312 10 14 9 10 2 3 4 8 5 6 7 1 15
  34. 34. Since the beginning of (web) time, web layouts have been broken. We’ve just refined how we break them.
  35. 35. .main-content .sidebar .container
  36. 36. .main-content .sidebar .wrap.wrap { border: 5px solid red; } .main-content { background: blue; } .sidebar { background: green; }
  37. 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. 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. 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. 40. .main-content .sidebar .wrap .other-content
  41. 41. .main-content .sidebar .wrap .other-content .container
  42. 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. 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. 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. 45. http://getbootstrap.com/css/
  46. 46. Paal Joachim Romdahl on Advanced WordPress Group
  47. 47. Me, every time I build a new site What if we didn’t have to do this any more…
  48. 48. <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>
  49. 49. <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>
  50. 50. <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>
  51. 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. 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. 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. 54. 1 2 3 4 5 6
  55. 55. You, right now OK, I’m listening…
  56. 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><!-- .site -->
  57. 57. • Grid container • Grid item • Grid line • Grid cell • Grid track • Grid area • Grid gap CSS Grid Terminology:
  58. 58. Element containing a grid, defined 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><!-- .site -->
  59. 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><!-- .site -->
  60. 60. Horizontal (row) or vertical (column) line separating the grid into sections. Grid line
  61. 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. 62. The intersection between a grid row and a grid column. Effectively the same as a table cell. Grid cell
  63. 63. Rectangular area between four specified grid lines. Grid areas can cover one or more cells. Grid area
  64. 64. The space between two or more adjacent grid lines. Row tracks are horizontal, Column tracks vertical. Grid track
  65. 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. 66. The person next to you I’ll pretend I got that…
  67. 67. 1. Define a grid. 2. Place items within the grid. 3. Make world peace. CSS Grid in a Nutshell:
  68. 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><!-- .site --> .masthead .page-title .main-content .sidebar .footer .site
  69. 69. <div class="site"> </div><!-- .site --> .masthead .page-title .main-content .sidebar .footer .site
  70. 70. .site Creates a grid container. display: grid;
  71. 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. 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. 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. 74. .site 1 2 3 4 .masthead grid-column: 2/4; grid-row: 2/3; Applied to grid items. Defines the start and end grid lines for columns and rows.
  75. 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. 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. 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. 78. Naysayer to your left Looks promising, but remembering what lines to target seems tricky… especially when the site is responsive.
  79. 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. 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. 81. Specifies what grid area the element is placed within. grid-area: [area-name];
  82. 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. 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. 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. 85. Girds are not inherited by child elements. Instead we create nested grids. Nested grids
  86. 86. You, right now Sooooooo… no more floats and clears?
  87. 87. Use CSS Grid any time you work with two-dimensional layouts.
  88. 88. One more thing
  89. 89. The grid container is a flexible box.
  90. 90. .site { display: grid; grid-template-columns: repeat(6, 10em); grid-gap: 1em; }
  91. 91. .site { display: grid; grid-template-columns: repeat(6, 10em); justify-content: center; grid-gap: 1em; }
  92. 92. .site { display: grid; grid-template-columns: repeat(6, 10em); justify-content: space-between; grid-gap: 1em; }
  93. 93. .site { display: grid; grid-template-columns: repeat(6, 10em); justify-content: space-between; grid-gap: 1em; }
  94. 94. repeat(auto-fit, 10em); repeat(auto-fill, 10em);
  95. 95. Creates as many 10em columns as will fit within the grid container. Will create empty columns. grid-template-columns: 
 repeat(auto-fill, 10em);
  96. 96. Creates as many 10em columns as will fit within the grid container. Does not create empty columns. grid-template-columns: 
 repeat(auto-fit, 10em);
  97. 97. https://codepen.io/mor10/pen/MEQJbM
  98. 98. Your boss / client … but older browsers!
  99. 99. http://caniuse.com/#search=grid Grid is supported in all modern browsers.
  100. 100. The elephants in the room
  101. 101. Internet Explorer 101 and Edge2 lag behind* 1 IE10 uses the original Grid specification. 2 Edge is adopting the modern specification October 17th. * Fun fact: CSS Grid was invented by Microsoft for IE10.
  102. 102. Use feature queries to test for grid support in the current browser. @supports (display: grid) { … } Current recommendation:
  103. 103. HOLD ON THERE MORTEN!
  104. 104. Everyone right now That means the site won’t look the same in all browsers!
  105. 105. If it works here… … it works here as well!
  106. 106. Forcing sites to look the same across all browsers is a bad habit.
  107. 107. Responsive Web Design means we’ve been serving up different layouts for different browsers since 2010.
  108. 108. Progressive Enhancement is Responsive Web Design in three dimensions.
  109. 109. Accessible mobile-first layouts work well on all screen widths.
  110. 110. Embrace Progressive Enhancement! Use the paved desire paths!
  111. 111. 1. Build accessible mobile-first layout without grid. 2. Use mobile-first 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. 112. More CSS Grid info:
  113. 113. Firefox has a grid inspector! https://goo.gl/SJmlms
  114. 114. Rachel Andrew’s Grid by Example is doctrine. https://gridbyexample.com/
  115. 115. Rachel Andrew’s book The New CSS Layout comes out next week. https://goo.gl/LY6cFy
  116. 116. MDN has exhaustive documentation. https://goo.gl/8RrH2Y
  117. 117. Mozilla’s CSS Grid Playground is a great place to get the basics. https://goo.gl/rmbkM5
  118. 118. Mozilla also has a demo site with has exhaustive documentation. https://goo.gl/wa0Fk9
  119. 119. CSS Tricks has a Complete Guide to CSS Grid. https://goo.gl/Z01gjF
  120. 120. Kuhn, my theme using CSS grid, is on GitHub to give you ideas. https://goo.gl/URouSh
  121. 121. Building Production-Ready CSS Grid Layouts Today by yours truly at Smashing Magazine https://goo.gl/dae838
  122. 122. Free for everyone until October 25th, 2017! https://goo.gl/wyC1Lz
  123. 123. Go build your own Desire Paths.
  124. 124. 1. Make it accessible. 2. Make it fancy. 3. Make sure the fancy doesn’t break accessibility.

×