DESIGNING INTRINSIC LAYOUTS JEN SIMMONS 2019 AN EVENT APART BOSTON
Slide 1
Slide 2
youtube.com/layoutland
Slide 3
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
Slide 4
FLOW THE HISTORY OF LAYOUT TECHNOLOGY ABSPOS HTML TABLES FLASH FLUID FIXED RESPONSIVE 2020 NOW 2015 2010 2005 2000 1995 INTRINSIC
Slide 5
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
Slide 6
Flow & writing mode CSS Grid Flexbox Multicolumn
Slide 7
Slide 8
HOW TO
Slide 9
LABS.JENSIMMONS.COM
Slide 10
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
Slide 11
HEADER WITH THIS NAVIGATION BAR OF LINKS
Slide 12
Slide 13
Slide 14
7A
Slide 15
Slide 16
Slide 17
Firefox Reader View Safari Reader Mode Edge Reading View Firefox Listen
Slide 18
Slide 19
Slide 20
Slide 21
Slide 22
Semantic HTML
Slide 23
7B
Slide 24
Slide 25
Slide 26
7C
Slide 27
Slide 28
Slide 29
FLOATS SUCK
Slide 30
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
Slide 31
FLOW THE HISTORY OF LAYOUT TECHNOLOGY ABSPOS HTML TABLES FLASH FLUID FIXED RESPONSIVE 2020 NOW 2015 2010 2005 2000 1995 INTRINSIC
Slide 32
LET’S USE GRID
Slide 33
7D
Slide 34
Slide 35
Slide 36
Slide 37
Slide 38
Slide 39
Slide 40
1FR 1FR 1FR
Slide 41
8% 75% 18% 8FR 75FR 18FR
Slide 42
Slide 43
Slide 44
Slide 45
Slide 46
Slide 47
Slide 48
Slide 49
Slide 50
max-content auto max-content
Slide 51
7E
Slide 52
Slide 53
Slide 54
Slide 55
GRID CONTAINER GRID ITEM GRID ITEM GRID ITEM
Slide 56
GRID CONTAINER GRID ITEM GRID ITEM GRID ITEM FLEX ITEM FLEX ITEM FLEX ITEM FLEX ITEM FLEX ITEM
Slide 57
GRID CONTAINER GRID ITEM GRID ITEM GRID ITEM FLEX CONTAINER FLEX ITEM FLEX ITEM FLEX ITEM FLEX ITEM FLEX ITEM
Slide 58
Slide 59
FLEX GRID
Slide 60
Slide 61
Slide 62
7F
Slide 63
Slide 64
Slide 65
2 COLUMNS 2 ROWS LOGO IS 2 ROWS HIGH
Slide 66
Slide 67
Slide 68
Slide 69
S W O R 2 N PA
Slide 70
Slide 71
Slide 72
7G
Slide 73
writi ng-mo de: v ertic al-rl ;
Slide 74
writi ng-mo de: v ertic al-rl ;
Slide 75
YAWN
Slide 76
Slide 77
Slide 78
6A
Slide 79
Slide 80
Slide 81
Slide 82
Slide 83
Slide 84
Slide 85
6B
Slide 86
Slide 87
Slide 88
Slide 89
6C
Slide 90
Slide 91
Slide 92
Slide 93
Slide 94
6D
Slide 95
Slide 96
Slide 97
Slide 98
Slide 99
Slide 100
Slide 101
Slide 102
Slide 103
Slide 104
Slide 105
But what about Internet Explorer?
Slide 106
/* code for every browser, including no browsers without grid / @supports (display: grid) { / code that only runs in browser that support grid */ }
Slide 107
Slide 108
youtube.com/layoutland
Slide 109
NYTimes Talks
Slide 110
NYTimes Talks
Slide 111
Slide 112
8A
Slide 113
Slide 114
Slide 115
Slide 116
8B
Slide 117
Slide 118
Slide 119
1fr 3fr 3fr 1fr
Slide 120
12% 37% 2% 37% 12%
Slide 121
1fr 3fr 3fr 1fr
Slide 122
1fr 3fr 3fr 1fr
Slide 123
1 1 2 3 4 5 2 3 4 5 1fr 3fr 3fr 1fr
Slide 124
1 1 2 3 2 3 4 5 grid-column: 1 / 4; grid-row: 1 / 2; 4 5
Slide 125
1 1 2 3 2 3 4 5 grid-column: 1 / 5; grid-row: 1 / 2; 4 5
Slide 126
1 1 2 3 2 3 4 5 grid-column: 2 / 3; grid-row: 2 / 4; 4 5
Slide 127
1 1 2 3 2 3 4 5 grid-column: 3 / 4; grid-row: 2 / 4; 4 5
Slide 128
1 1 2 3 2 3 4 5 grid-column: 3 / 5; grid-row: 3 / 5; 4 5
Slide 129
Slide 130
Slide 131
8C
Slide 132
Slide 133
1fr min-content minmax(100px, 400px)
Slide 134
fixed length (em, rem, px, ch, vh, vw) min-content, max-content % FR units minmax() auto
Slide 135
Slide 136
Slide 137
labs.jensimmons.com/2019/01-001.html
Slide 138
labs.jensimmons.com/2019/01-002.html
Slide 139
labs.jensimmons.com/2019/01-003.html
Slide 140
labs.jensimmons.com/2019/01-004.html
Slide 141
LABS.JENSIMMONS.COM
Slide 142
youtube.com/ layoutland Subscribe by email at layout.land
Slide 143
Thanks! JENSIMMONS.COM @JENSIMMONS LAYOUT.LAND LABS.JENSIMMONS.COM
