CSS Grid, Gutenberg and the future of Layouts

A presentation at WordCamp Toronto 2018 in December 2018 in Toronto, ON, Canada by Juan Pablo Gomez

Slide 1

Slide 1

CSS G RI D Gutenberg and the future of layouts — @jupago • jupago.com

Slide 2

Slide 2

Organizers Alex Sirota Andy McIlwain Dan Stramer Kristine Black Robin Macrae — Jacques Surveyer Jeremy Choi @jupago • jupago.com

Slide 3

Slide 3

Sponsors @jupago • jupago.com @jupago • jupago.com

Slide 4

Slide 4

ABOUT ME Juan Pablo Gómez Designer on the web @jupago jupago.com

Slide 5

Slide 5

@jupago • jupago.com

Slide 6

Slide 6

NYCFC @jupago • jupago.com

Slide 7

Slide 7

NYCFC @jupago • jupago.com

Slide 8

Slide 8

NYCFC @jupago • jupago.com

Slide 9

Slide 9

@jupago • jupago.com

Slide 10

Slide 10

CSS Grid 1 Why? 2 How? 3 When? * Gutenberg 4 Demos @jupago • jupago.com

Slide 11

Slide 11

CSS Grid 1 Why? 2 How? 3 When? * Gutenberg 4 Demos @jupago • jupago.com

Slide 12

Slide 12

https://i.cbc.ca/1.3279853.1532811524!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_780/drake.jpg http://www.imdb.com/title/tt0095016/mediaviewer/rm2280788992 https://images.gr-assets.com/books/1334416842l/830502.jpg @jupago • jupago.com

Slide 13

Slide 13

https://i.cbc.ca/1.3279853.1532811524!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_780/drake.jpg http://www.imdb.com/title/tt0095016/mediaviewer/rm2280788992 https://images.gr-assets.com/books/1334416842l/830502.jpg @jupago • jupago.com

Slide 14

Slide 14

1986 1988 1986 They are all older than the web

https://i.cbc.ca/1.3279853.1532811524!/fileImage/httpImage/image.jpg_gen/derivatives/16x9_780/drake.jpg http://www.imdb.com/title/tt0095016/mediaviewer/rm2280788992 https://images.gr-assets.com/books/1334416842l/830502.jpg @jupago • jupago.com

Slide 15

Slide 15

https://giphy.com @jupago • jupago.com

Slide 16

Slide 16

http://www.ancient-egypt-online.com/egyptian-music.html https://headsup.boyslife.org/what-was-the-first-movie-ever-made/ https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/ed-sheeran-got-1500309510.png?crop=1.00xw:1.00xh;0,0&resize=768:* https://upload.wikimedia.org/wikipedia/commons/a/a8/Aztec_calendar_%28Sunstone%29.png http://ancientrome.ru/art/artworken/img.htm?id=1372 @jupago • jupago.com

Slide 17

Slide 17

1989 HTML website: http://info.cern.ch/hypertext/WWW/TheProject.html foto: https://www.w3.org/People/Berners-Lee/ @jupago • jupago.com

Slide 18

Slide 18

1995 HTML TABLES http://park.org/main.html @jupago • jupago.com

Slide 19

Slide 19

1995 HTML TABLES JAVASCRIPT https://www.yahoo.com/tech/rip-internet-explorer-1995-2015-we-knew-ye-all-113889644524.html @jupago • jupago.com

Slide 20

Slide 20

1995 HTML TABLES JAVASCRIPT https://www.yahoo.com/tech/rip-internet-explorer-1995-2015-we-knew-ye-all-113889644524.html @jupago • jupago.com

Slide 21

Slide 21

1996 HTML TABLES JAVASCRIPT FLASH @jupago • jupago.com

Slide 22

Slide 22

1996 HTML TABLES JAVASCRIPT FLASH @jupago • jupago.com

Slide 23

Slide 23

1998 HTML TABLES JAVASCRIPT FLASH CSS https://giphy.com/gifs/4SU2Cf0g3zPDG @jupago • jupago.com

Slide 24

Slide 24

https://giphy.com/gifs/4SU2Cf0g3zPDG @jupago • jupago.com

Slide 25

Slide 25

Then this happened… https://www.flickr.com/photos/lukew/10412585943/in/photostream/ @jupago • jupago.com

Slide 26

Slide 26

And this.. http://emkwan.com/post/85723552592/lol-apple-ipad-pro-prototype-spotted-in @jupago • jupago.com

Slide 27

Slide 27

And this.. giphy.com @jupago • jupago.com

Slide 28

Slide 28

http://i.imgur.com/uNsVW.jpg @jupago • jupago.com

Slide 29

Slide 29

“We should look for opportunities to be just a little lazy” 2010 RESPONSIVE DESIGN Ethan Marcotte – Generate Conf NYC, 2014 https://www.youtube.com/watch?v=u8tpNaaEXQg @jupago • jupago.com

Slide 30

Slide 30

The web is only 29 years old and we’ve had to design websites conforming to its limitations @jupago • jupago.com

Slide 31

Slide 31

Content Browser @jupago • jupago.com

Slide 32

Slide 32

We build layout frameworks & layout plugins & layout boilerplates to mask those limitations @jupago • jupago.com

Slide 33

Slide 33

https://www.reddit.com/r/gifs/comments/4h84qg/be_different_and_youll_always_stand_out/ @jupago • jupago.com

Slide 34

Slide 34

CSS Grid does not hide this limitations CSS Grid gets rid of them @jupago • jupago.com

Slide 35

Slide 35

“This new CSS revolutionizes web page layout” Jen Simmons on CSS Grid – Generate Conf NYC, 2016 https://speakerdeck.com/jensimmons/designing-with-grid-generate-nyc @jupago • jupago.com

Slide 36

Slide 36

@jupago • jupago.com

Slide 37

Slide 37

CSS Grid 1 Why? 2 How? 3 When? * Gutenberg 4 Demos @jupago • jupago.com

Slide 38

Slide 38

www.mozilla.org/en-US/firefox/developer @jupago • jupago.com

Slide 39

Slide 39

HTML <div class="container"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class=“four"></div> <div class=“five"></div> <div class=“six”></div> </div> CSS .one { background-color: red;} .two { background-color: blue;} .three { background-color: yellow;} .four { background-color: green;} .five { background-color: purple;} .six { background-color: orange;} @jupago • jupago.com

Slide 40

Slide 40

CSS .container { display: grid; grid-template-columns: 1fr 5fr 3fr; grid-template-rows: 200px 100px 80px } grid-gap: 1em; fr = fraction A fraction of the available space in the grid container @jupago • jupago.com

Slide 41

Slide 41

CSS .container { display: grid; grid-template-columns: 1fr 5fr 3fr; 1fr 5fr 3fr grid-template-rows: 200px 100px 80px } grid-gap: 1em; fr = fraction A fraction of the available space in the grid container @jupago • jupago.com

Slide 42

Slide 42

CSS .container { display: grid; grid-template-columns: 1fr 5fr 3fr; grid-template-rows: 200px 100px 80px } grid-gap: 1em; 200px 100px 80px fr = fraction A fraction of the available space in the grid container @jupago • jupago.com

Slide 43

Slide 43

CSS .container { display: grid; grid-template-columns: 1fr 5fr 3fr; grid-template-rows: 200px 100px 80px } grid-gap: 1em; fr = fraction A fraction of the available space in the grid container @jupago • jupago.com

Slide 44

Slide 44

CSS .container { display: grid; grid-template-columns: 3fr 100px 1fr; 3fr 100px 1fr grid-template-rows: 200px 100px 15vh; } grid-gap: 1em; .two { grid-row: span 2; } .six { grid-column: span 3; } Grid-column: span @jupago • jupago.com

Slide 45

Slide 45

CSS .container { display: grid; grid-template-columns: 3fr 100px 1fr; grid-template-rows: 200px 100px 15vh; } grid-gap: 1em; .two { grid-row: span 2; } .six { grid-column: span 3; } Grid-column: span 200px 100px 15vh @jupago • jupago.com

Slide 46

Slide 46

CSS .container { display: grid; grid-template-columns: 3fr 100px 1fr; grid-template-rows: 200px 100px 15vh; } grid-gap: 1em; .two { grid-row: span 2; } .six { grid-column: span 3; } Grid-column: span 1 2 @jupago • jupago.com

Slide 47

Slide 47

CSS .container { display: grid; grid-template-columns: 3fr 100px 1fr; grid-template-rows: 200px 100px 15vh; } grid-gap: 1em; .two { grid-row: span 2; } .six { grid-column: span 3; } Grid-column: span 1 2 3 @jupago • jupago.com

Slide 48

Slide 48

CSS .container { display: grid; grid-template-columns: repeat(5, 1fr); 1fr 1fr 1fr 1fr 1fr grid-template-rows: repeat(4, 10vw); } grid-gap: 1em; repeat @jupago • jupago.com

Slide 49

Slide 49

CSS .container { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 10vw); } grid-gap: 1em; 10vw 10vw 10vw 10vw repeat @jupago • jupago.com

Slide 50

Slide 50

CSS .container { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 80px; } Grid lines 1 1 2 3 4 5 6 2 grid-gap: 1em; 3 .one { grid-column: 2 / 4; grid-row: 1 / 3; } 4 .two { grid-column: 3 / 5; grid-row: 2 / 6; } 6 .three { grid-row: 4 / 5; grid-column: 1 / 4; } 8 grid-column grid-row 5 7 9 @jupago • jupago.com

Slide 51

Slide 51

CSS .container { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 80px; } Grid lines 1 1 2 3 4 5 6 2 grid-gap: 1em; 3 .one { grid-column: 2 / 4; grid-row: 1 / 3; } 4 .two { grid-column: 3 / 5; grid-row: 2 / 6; } 6 .three { grid-row: 4 / 5; grid-column: 1 / 4; } 8 grid-column grid-row 5 7 9 @jupago • jupago.com

Slide 52

Slide 52

CSS .container { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 80px; } Grid lines 1 1 2 3 4 5 6 2 grid-gap: 1em; 3 .one { grid-column: 2 / 4; grid-row: 1 / 3; } 4 .two { grid-column: 3 / 5; grid-row: 2 / 6; } 6 .three { grid-row: 4 / 5; grid-column: 1 / 4; } 8 grid-column grid-row 5 7 9 @jupago • jupago.com

Slide 53

Slide 53

CSS .container { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 80px; } Grid lines 1 1 2 3 4 5 6 2 grid-gap: 1em; 3 .one { grid-column: 2 / 4; grid-row: 1 / 3; } 4 .two { grid-column: 3 / 5; grid-row: 2 / 6; } 6 .three { grid-row: 4 / 5; grid-column: 1 / 4; } 8 grid-column grid-row 5 7 9 @jupago • jupago.com

Slide 54

Slide 54

CSS .container { display: grid; repeat( auto-fit, minmax(120px, 1fr)); grid-template-columns: repeat( auto-fit, minmax(120px, 1fr)); grid-auto-rows: 80px; } grid-gap: 1em; auto-fit minmax grid-auto-rows @jupago • jupago.com

Slide 55

Slide 55

CSS .container { display: grid; grid-template-columns: 1fr 200px; grid-template-rows: 15vh 75vh 10vh; grid-template-areas: “header ad" "content sidebar” “ footer footer”; } HEADER AD grid-row-gap: 20px; .one { background: red; grid-area: header; } CONTENT SIDEBAR .two { background: green; grid-area: sidebar; } .three { background: orange; grid-area: footer; } grid-template-areas grid-area FOOTER FOOTER @jupago • jupago.com

Slide 56

Slide 56

CSS .container { display: grid; grid-template-columns: 1fr 200px; grid-template-rows: 15vh 75vh 10vh; grid-template-areas: “header ad" "content sidebar” “ footer footer”; } grid-row-gap: 20px; .one { background: red; grid-area: header; } .two { background: green; grid-area: sidebar; } .three { background: orange; grid-area: footer; } grid-template-areas grid-area @jupago • jupago.com

Slide 57

Slide 57

CSS .container { display: grid; grid-template-columns: 1fr 200px; grid-template-rows: 15vh 75vh 10vh; grid-template-areas: “header ad" "content sidebar” “ footer footer”; } HEADER grid-row-gap: 20px; .one { background: red; grid-area: header; } .two { background: green; grid-area: sidebar; } .three { background: orange; grid-area: footer; } grid-template-areas grid-area @jupago • jupago.com

Slide 58

Slide 58

CSS .container { display: grid; grid-template-columns: 1fr 200px; grid-template-rows: 15vh 75vh 10vh; grid-template-areas: “header ad" "content sidebar” “ footer footer”; } grid-row-gap: 20px; .one { background: red; grid-area: header; } SIDEBAR .two { background: green; grid-area: sidebar; } .three { background: orange; grid-area: footer; } grid-template-areas grid-area @jupago • jupago.com

Slide 59

Slide 59

CSS .container { display: grid; grid-template-columns: 1fr 200px; grid-template-rows: 15vh 75vh 10vh; grid-template-areas: “header ad" "content sidebar” “ footer footer”; } grid-row-gap: 20px; .one { background: red; grid-area: header; } .two { background: green; grid-area: sidebar; } .three { background: orange; grid-area: footer; } grid-template-areas grid-area FOOTER @jupago • jupago.com

Slide 60

Slide 60

And much much much more! Horizontal AND Vertical align, Writing Modes @jupago • jupago.com

Slide 61

Slide 61

CSS Grid 1 Why? 2 How? 3 When? * Guttenberg 4 Demos @jupago • jupago.com

Slide 62

Slide 62

March 8, 2017 0.32% caniuse.com#feat=css-grid @jupago • jupago.com

Slide 63

Slide 63

Three Weeks Later…. @jupago • jupago.com

Slide 64

Slide 64

March 29, 2017 caniuse.com#feat=css-grid 26% @jupago • jupago.com

Slide 65

Slide 65

@jupago • jupago.com

Slide 66

Slide 66

October 17th 2017 @jupago • jupago.com

Slide 67

Slide 67

October 20, 2017 caniuse.com#feat=css-grid 69.53% @jupago • jupago.com

Slide 68

Slide 68

February 16, 2018 caniuse.com#feat=css-grid 82.8% @jupago • jupago.com

Slide 69

Slide 69

April, 2018 caniuse.com#feat=css-grid 84.2% @jupago • jupago.com

Slide 70

Slide 70

Today! 85.36% caniuse.com#feat=css-grid @jupago • jupago.com

Slide 71

Slide 71

@supports rachelandrew.co.uk/css/ cheatsheets/grid-fallbacks .container { // code for older browser } @supports (display: grid){ .container { // code for CSS Grid here } } @jupago • jupago.com

Slide 72

Slide 72

Where can I learn more Jen Simmons @jensimmons layout.land labs.jensimmons.com thewebahead.net mozilladevelopers.github.io/playground/ *They are responsible for 99% of what I know about CSS Grid @jupago • jupago.com

Slide 73

Slide 73

Where can I learn more Rachel Andrew @rachelandrew rachelandrew.co.uk/ thecssworkshop.com CSS Layout News Smashing Magazine *They are responsible for 99% of what I know about CSS Grid @jupago • jupago.com

Slide 74

Slide 74

CSS Grid 1 Why? 2 How? 3 When? * Gutenberg 4 Demos @jupago • jupago.com

Slide 75

Slide 75

My Journey to Gutenberg 1 Buy a theme 2 Use a default WordPress Theme 3 Should have read what a child themes is 4 Build a custom theme (underscores.me) 5 Advance Custom Fields 6 Gutenberg 7 Advance Custom Fields 8 Gutenberg 9 Advance Custom Fields 10 Gutenberg AND ACF? @jupago • jupago.com

Slide 76

Slide 76

CSS Grid Gutenberg • Browser Technology You already have it! • Wordpress Editor • CSS Grid Layout Module Level 2 coming soon! • Released Nov 19 Yesterday Soon? • Two-dimensional Implicit & Explicit • Blocks • Should use CSS Grid at some point. @jupago • jupago.com

Slide 77

Slide 77

@jupago • jupago.com

Slide 78

Slide 78

YES!!! *Calc is awesome though! @jupago • jupago.com

Slide 79

Slide 79

CSS Grid 1 Why? 2 How? 3 When? * Guttenberg 4 Demos @jupago • jupago.com

Slide 80

Slide 80

@jupago • jupago.com

Slide 81

Slide 81

THANK YOU!!! slides: noti.st/jupago Juan Pablo Gómez Web Designer Twitter: @jupago jupago.com