Modern Layouts: Flexbox, CSS Grid, and Beyond michellejl.com [email protected] @michellejlevine Who am I? Why Should You Listen to Me? Who am I? Why Should You Listen to Me? Who am I? Why Should You Listen to Me? Who am I? Why Should You Listen to Me? Who am I? Why Should You Listen to Me? Who am I? Why Should You Listen to Me? Who am I? Why Should You Listen to Me? michellejl.com [email protected] @michellejlevine @michellejl A Brief History of the Web 1 9 9 1 @michellejlevine http://info.cern.ch/ A Brief History of the Web 1 9 9 1 @michellejlevine http://info.cern.ch/ A Brief History of the Web 1 1 9 9 9 9 1 2 @michellejlevine A Brief History of the Web 1 1 9 9 9 9 1 2 @michellejlevine A Brief History of the Web 1 1 9 9 9 9 1 2 @michellejlevine A Brief History of the Web 1 1 1 9 9 9 9 9 9 1 2 4 Håkon Wium Lie published the first draft of the Cascading 1994 HTML Style Sheets proposal @michellejlevine A Brief History of the Web 1 1 1 1 9 9 9 9 9 9 9 9 1 2 4 5 Håkon Wium Lie published the first draft of the Cascading 1994 HTML Style Sheets proposal The World Wide Web Consortium (W3C) 1995 became operational @michellejlevine A Brief History of the Web 1 1 1 1 1 9 9 9 9 9 9 9 9 9 9 1 2 4 5 6 Håkon Wium Lie published the first draft of the Cascading 1994 HTML Style Sheets proposal The World Wide Web Consortium (W3C) 1995 became operational 1996 CSS level 1 emerged as a W3C Recommendation @michellejlevine A Brief History of the Web 1 1 1 1 1 1 9 9 9 9 9 9 9 9 9 9 9 9 1 2 4 5 6 8 Håkon Wium Lie published the first draft of the Cascading 1994 HTML Style Sheets proposal The World Wide Web Consortium (W3C) 1995 became operational 1996 CSS level 1 emerged as a W3C Recommendation 1998 CSS level 2 accepted as W3C Recommendation @michellejlevine b 2012 f History of the We 1998 A Brie 1996 1995 1994 1992 1991 e in v e jl e ll e h ic m @ b 2012 f History of the We 1998 A Brie 1996 1995 1994 1992 1991 e in v e jl e ll e h ic m @ b el 3 2012 v e f History of the We Color L 1998 A Brie 1996 1995 1994 1992 1991 e in v e jl e ll e h ic m @ b el 3 2012 v e f History of the We Color L 1998 Namespaces A Brie 1996 1995 1994 1992 1991 e in v e jl e ll e h ic m @ A Brief History of the Web 1 1 1 1 1 1 2 9 9 9 9 9 9 0 9 9 9 9 9 9 1 1 2 4 5 6 8 2 Color Level 3 Namespaces Selectors Level 3 @michellejlevine Layouts are basically a mess @michellejlevine Layouts are basically a mess <table> @michellejlevine Layouts are basically a mess <table> { display : table } @michellejlevine Layouts are basically a mess <table> { display : table } { float : right } @michellejlevine Layouts are basically a mess <table> { display : table } { float : right } { position : absolute } @michellejlevine Layouts are basically a mess <table> { display : table } { float : right } { position : absolute } @michellejlevine @michellejlevine @michellejlevine @michellejlevine @michellejlevine @michellejlevine @michellejlevine @michellejlevine @michellejlevine @michellejlevine @michellejlevine @michellejlevine How can we avoid div soup? @michellejlevine { display: flex } @michellejlevine { display: flex } The Flexible Box Module, usually referred to as flexbox, was designed as a one- dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. @michellejlevine Can I Start Today? @michellejlevine https://caniuse.com/#search=flexbox @michellejlevine https://caniuse.com/#search=flexbox @michellejlevine https://caniuse.com/#search=flexbox @michellejlevine Flexbox Vocabulary @michellejlevine Flexbox Vocabulary .container { display: flex; flex­direction: row | column; flex­wrap: wrap; justify­content: space­between; align­items: stretch; } @michellejlevine Flexbox Vocabulary .container { .item { display: flex; order: 1; flex­direction: row | column; flex­grow: 4; flex­wrap: wrap; flex­shrink: 1; justify­content: space­between; flex­basis: 5em; align­items: stretch; align­self: flex­end; } } @michellejlevine Flexbox Vocabulary .container { .item { display: flex; order: 1; flex­direction: row | column; flex­grow: 4; flex­wrap: wrap; flex­shrink: 1; justify­content: space­between; flex­basis: 5em; align­items: stretch; align­self: flex­end; } } flex: 0 1 auto; @michellejlevine Let's Try It! bit.ly/michellejl-grid Flexbox NavBar @michellejlevine More Flexbox! css-tricks.com/snippets/css/a-guide-to-flexbox/ flexboxfroggy.com/ bennettfeely.com/flexplorer/ { display: grid } @michellejlevine { display: grid } CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. Grid is for working in two- dimensions. @michellejlevine Can I Start Today? @michellejlevine @michellejlevine https://caniuse.com/#search=grid @michellejlevine https://caniuse.com/#search=grid @michellejlevine https://caniuse.com/#search=grid Fallbacks for Older Browsers LayoutLand: Resilient CSS @michellejlevine https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/ .grid { display: grid; } @michellejlevine .grid { display: grid; grid-template-columns: repeat(4, 1fr); } @michellejlevine .grid { display: grid; grid-template-columns: repeat(4, 1fr); } @michellejlevine .grid { display: grid; grid-template-columns: repeat(4, 1fr); } @michellejlevine .grid { display: grid; grid-template-columns: repeat(4, 1fr); } @michellejlevine .grid { display: grid; grid-template-columns: repeat(4, 1fr); } @michellejlevine .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px 200px; } @michellejlevine .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px 200px; } @michellejlevine .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px 200px; } @michellejlevine .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px 200px; grid-gap-columns: 10px; grid-gap-rows: 5px; } @michellejlevine .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px 200px; grid-gap-columns: 10px; grid-gap-rows: 5px; } @michellejlevine .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px 200px; grid-gap-columns: 10px; grid-gap-rows: 5px; } @michellejlevine .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px 200px; grid-gap-columns: 10px; grid-gap-rows: 5px; } @michellejlevine .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px 200px; grid-gap-columns: 10px; grid-gap-rows: 5px; } @michellejlevine Let's Try It! bit.ly/michellejl-grid Grid Layout 1 @michellejlevine New Grid Units @michellejlevine New Grid Units min­content @michellejlevine New Grid Units min­content max­content @michellejlevine New Grid Units min­content max­content fr @michellejlevine New Grid Units min­content max­content fr minmax( ) @michellejlevine Explicit Grid vs. Implicit Grid @michellejlevine https://css-tricks.com/difference-explicit-implicit-grids/ Explicit Grid vs. Implicit Grid @michellejlevine https://css-tricks.com/difference-explicit-implicit-grids/ @michellejlevine @michellejlevine @michellejlevine 1 @michellejlevine 1 2 @michellejlevine 1 2 3 @michellejlevine 1 2 3 4 @michellejlevine 1 2 3 4 -4 -3 -2 -1 @michellejlevine Let's Try It! bit.ly/michellejl-grid Grid Layout 2: Cells Grid Layout 3: Named Lines Grid Layout 5: Overlay @michellejlevine .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 25px); grid-template-areas: "a a a" "b b c" "b b c" "d d d"; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 25px); grid-template-areas: "a a a" "b b c" "b b c" "d d d"; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 25px); grid-template-areas: "a a a" "b b c" "b b c" "d d d"; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 25px); grid-template-areas: "a a a" "b b c" "b b c" "d d d"; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 25px); grid-template-areas: "a a a" "b b c" "b b c" "d d d"; } Let's Try It! bit.ly/michellejl-grid Grid Layout 4: Grid Area @michellejlevine Let's Try It! bit.ly/michellejl-grid Grid Layout 4: Grid Area @michellejlevine No More Media Queries? http://labs.jensimmons.com/2016/examples/spices-1.html @michellejlevine http://labs.jensimmons.com/2016/examples/spices-1.html @michellejlevine http://labs.jensimmons.com/2016/examples/spices-1.html @michellejlevine Grid or Flexbox? @michellejlevine https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/ Grid or Flexbox? or floats?? @michellejlevine https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/ Real Examples Please! @michellejlevine @michellejlevine http://labs.jensimmons.com/ @michellejlevine http://labs.jensimmons.com/2017/03-008.html @michellejlevine http://labs.jensimmons.com/2017/01-011.html More CSS Grid in the Wild: https://cssgrid.design/ @michellejlevine Rachel Andrew Jen Simmons rachelandrew.co.uk/ jensimmons.com/ @rachelandrew @jensimmons gridbyexample.com/ youtube.com/layoutland thecssworkshop.com/ csslayout.news/ Know these humans. They are AMAZING. Read their blogs, newsletters, and books, checkout their code, learn from their videos. skl.sh/rachel Icons from www.flaticon.com Freepik Freepik Freepik Freepik Freepik Freepik Freepik Freepik Alfredo monkik Smashicons Prosymbols Smashicons