Designing Intrinsic Layouts

DESIGNING INTRINSIC LAYOUTS JEN SIMMONS 2019 AN EVENT APART BOSTON

youtube.com/layoutland

The Official Timeline of Web Page Layout The No-Layout Layout Table -based Layouts Hand -c oded F loat Layouts F rame wor k Layouts g n i z a m A ! e r u t u F

FLOW THE HISTORY OF LAYOUT TECHNOLOGY ABSPOS HTML TABLES FLASH FLUID FIXED RESPONSIVE 2020 NOW 2015 2010 2005 2000 1995 INTRINSIC

CSS Grid Flow Flexbox Overflow Alignment Floats Writing Modes Block Multicolumn Inline Viewport Units Inline-block Transforms Display: table Object Fit Margin Clip-path Negative margins Masking Padding Shape-outside Positioning Initial-letter & everything else in CSS

Flow & writing mode CSS Grid Flexbox Multicolumn

HOW TO

LABS.JENSIMMONS.COM

LABS.JENSIMMONS.COM/2019/01-007A.html LABS.JENSIMMONS.COM/2019/01-007B.html LABS.JENSIMMONS.COM/2019/01-007C.html LABS.JENSIMMONS.COM/2019/01-007D.html LABS.JENSIMMONS.COM/2019/01-007E.html LABS.JENSIMMONS.COM/2019/01-007F.html LABS.JENSIMMONS.COM/2019/01-007G.html LABS.JENSIMMONS.COM/2019/01-006A.html LABS.JENSIMMONS.COM/2019/01-006B.html LABS.JENSIMMONS.COM/2019/01-006C.html LABS.JENSIMMONS.COM/2019/01-006D.html LABS.JENSIMMONS.COM/2019/01-008A.html LABS.JENSIMMONS.COM/2019/01-008B.html LABS.JENSIMMONS.COM/2019/01-008C.html

HEADER WITH THIS NAVIGATION BAR OF LINKS

7A

Firefox Reader View Safari Reader Mode Edge Reading View Firefox Listen

Semantic HTML

7B

7C

FLOATS SUCK

The Official Timeline of Web Page Layout The No-Layout Layout Table -based Layouts Hand -c oded F loat Layouts F rame wor k Layouts g n i z a m A ! e r u t u F

FLOW THE HISTORY OF LAYOUT TECHNOLOGY ABSPOS HTML TABLES FLASH FLUID FIXED RESPONSIVE 2020 NOW 2015 2010 2005 2000 1995 INTRINSIC

LET’S USE GRID

7D

1FR 1FR 1FR

8% 75% 18% 8FR 75FR 18FR

max-content auto max-content

7E

GRID CONTAINER GRID ITEM GRID ITEM GRID ITEM

GRID CONTAINER GRID ITEM GRID ITEM GRID ITEM FLEX ITEM FLEX ITEM FLEX ITEM FLEX ITEM FLEX ITEM

GRID CONTAINER GRID ITEM GRID ITEM GRID ITEM FLEX CONTAINER FLEX ITEM FLEX ITEM FLEX ITEM FLEX ITEM FLEX ITEM

FLEX GRID

7F

2 COLUMNS 2 ROWS LOGO IS 2 ROWS HIGH

S W O R 2 N PA

7G

writi ng-mo de: v ertic al-rl ;

YAWN

6A

6B

6C

6D

But what about Internet Explorer?

/* code for every browser, including no browsers without grid / @supports (display: grid) { / code that only runs in browser that support grid */ }

youtube.com/layoutland

NYTimes Talks

8A

8B

1fr 3fr 3fr 1fr

12% 37% 2% 37% 12%

1fr 3fr 3fr 1fr

1 1 2 3 4 5 2 3 4 5 1fr 3fr 3fr 1fr

1 1 2 3 2 3 4 5 grid-column: 1 / 4; grid-row: 1 / 2; 4 5

1 1 2 3 2 3 4 5 grid-column: 1 / 5; grid-row: 1 / 2; 4 5

1 1 2 3 2 3 4 5 grid-column: 2 / 3; grid-row: 2 / 4; 4 5

1 1 2 3 2 3 4 5 grid-column: 3 / 4; grid-row: 2 / 4; 4 5

1 1 2 3 2 3 4 5 grid-column: 3 / 5; grid-row: 3 / 5; 4 5

8C

1fr min-content minmax(100px, 400px)

fixed length (em, rem, px, ch, vh, vw) min-content, max-content % FR units minmax() auto

labs.jensimmons.com/2019/01-001.html

labs.jensimmons.com/2019/01-002.html

labs.jensimmons.com/2019/01-003.html

labs.jensimmons.com/2019/01-004.html

LABS.JENSIMMONS.COM

youtube.com/ layoutland Subscribe by email at layout.land

Thanks! JENSIMMONS.COM @JENSIMMONS LAYOUT.LAND LABS.JENSIMMONS.COM