Designing Intrinsic Layouts

A presentation at An Event Apart Boston in May 2019 in Boston, MA, USA by Jen Simmons

Slide 1

Slide 1

DESIGNING INTRINSIC LAYOUTS JEN SIMMONS 2019 AN EVENT APART BOSTON

Slide 2

Slide 2

youtube.com/layoutland

Slide 3

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

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

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

Slide 6

Flow & writing mode CSS Grid Flexbox Multicolumn

Slide 7

Slide 7

Slide 8

Slide 8

HOW TO

Slide 9

Slide 9

LABS.JENSIMMONS.COM

Slide 10

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

Slide 11

HEADER WITH THIS NAVIGATION BAR OF LINKS

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

7A

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

Firefox Reader View Safari Reader Mode Edge Reading View Firefox Listen

Slide 18

Slide 18

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

Slide 22

Slide 22

Semantic HTML

Slide 23

Slide 23

7B

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

7C

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

FLOATS SUCK

Slide 30

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

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

Slide 32

LET’S USE GRID

Slide 33

Slide 33

7D

Slide 34

Slide 34

Slide 35

Slide 35

Slide 36

Slide 36

Slide 37

Slide 37

Slide 38

Slide 38

Slide 39

Slide 39

Slide 40

Slide 40

1FR 1FR 1FR

Slide 41

Slide 41

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

Slide 42

Slide 42

Slide 43

Slide 43

Slide 44

Slide 44

Slide 45

Slide 45

Slide 46

Slide 46

Slide 47

Slide 47

Slide 48

Slide 48

Slide 49

Slide 49

Slide 50

Slide 50

max-content auto max-content

Slide 51

Slide 51

7E

Slide 52

Slide 52

Slide 53

Slide 53

Slide 54

Slide 54

Slide 55

Slide 55

GRID CONTAINER GRID ITEM GRID ITEM GRID ITEM

Slide 56

Slide 56

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

Slide 57

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 58

Slide 59

Slide 59

FLEX GRID

Slide 60

Slide 60

Slide 61

Slide 61

Slide 62

Slide 62

7F

Slide 63

Slide 63

Slide 64

Slide 64

Slide 65

Slide 65

2 COLUMNS 2 ROWS LOGO IS 2 ROWS HIGH

Slide 66

Slide 66

Slide 67

Slide 67

Slide 68

Slide 68

Slide 69

Slide 69

S W O R 2 N PA

Slide 70

Slide 70

Slide 71

Slide 71

Slide 72

Slide 72

7G

Slide 73

Slide 73

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

Slide 74

Slide 74

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

Slide 75

Slide 75

YAWN

Slide 76

Slide 76

Slide 77

Slide 77

Slide 78

Slide 78

6A

Slide 79

Slide 79

Slide 80

Slide 80

Slide 81

Slide 81

Slide 82

Slide 82

Slide 83

Slide 83

Slide 84

Slide 84

Slide 85

Slide 85

6B

Slide 86

Slide 86

Slide 87

Slide 87

Slide 88

Slide 88

Slide 89

Slide 89

6C

Slide 90

Slide 90

Slide 91

Slide 91

Slide 92

Slide 92

Slide 93

Slide 93

Slide 94

Slide 94

6D

Slide 95

Slide 95

Slide 96

Slide 96

Slide 97

Slide 97

Slide 98

Slide 98

Slide 99

Slide 99

Slide 100

Slide 100

Slide 101

Slide 101

Slide 102

Slide 102

Slide 103

Slide 103

Slide 104

Slide 104

Slide 105

Slide 105

But what about Internet Explorer?

Slide 106

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 107

Slide 108

Slide 108

youtube.com/layoutland

Slide 109

Slide 109

NYTimes Talks

Slide 110

Slide 110

NYTimes Talks

Slide 111

Slide 111

Slide 112

Slide 112

8A

Slide 113

Slide 113

Slide 114

Slide 114

Slide 115

Slide 115

Slide 116

Slide 116

8B

Slide 117

Slide 117

Slide 118

Slide 118

Slide 119

Slide 119

1fr 3fr 3fr 1fr

Slide 120

Slide 120

12% 37% 2% 37% 12%

Slide 121

Slide 121

1fr 3fr 3fr 1fr

Slide 122

Slide 122

1fr 3fr 3fr 1fr

Slide 123

Slide 123

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

Slide 124

Slide 124

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

Slide 125

Slide 125

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

Slide 126

Slide 126

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

Slide 127

Slide 127

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

Slide 128

Slide 128

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

Slide 129

Slide 129

Slide 130

Slide 130

Slide 131

Slide 131

8C

Slide 132

Slide 132

Slide 133

Slide 133

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

Slide 134

Slide 134

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

Slide 135

Slide 135

Slide 136

Slide 136

Slide 137

Slide 137

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

Slide 138

Slide 138

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

Slide 139

Slide 139

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

Slide 140

Slide 140

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

Slide 141

Slide 141

LABS.JENSIMMONS.COM

Slide 142

Slide 142

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

Slide 143

Slide 143

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