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