Designing Intrinsic Layouts

DESIGNING INTRINSIC LAYOUTS JEN SIMMONS 2019 AN EVENT APART SEATTLE

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

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

CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms Object Fit Clip-path Masking Shape-outside Initial-letter Flow Overflow Floats Block Inline Inline-block Display: table Margin Negative margins Padding Positioning & 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

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

THE HISTORY OF LAYOUT TECHNIQUES ON THE WEB FLOW 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

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?

@supports (display: grid) { /* code that only runs in browser that support grid */ }

youtube.com/layoutland

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