Designing Intrinsic Layouts

A presentation at An Event Apart Seattle in March 2019 in Seattle, WA, USA by Jen Simmons

Slide 1

Slide 1

DESIGNING INTRINSIC LAYOUTS JEN SIMMONS 2019 AN EVENT APART SEATTLE

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

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

Slide 5

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

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

Slide 15

Slide 15

7A

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

Firefox Reader View Safari Reader Mode Edge Reading View Firefox Listen

Slide 19

Slide 19

Slide 20

Slide 20

7B

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

7C

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

FLOATS SUCK

Slide 27

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

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

Slide 29

LET’S USE GRID

Slide 30

Slide 30

7D

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

Slide 34

Slide 34

Slide 35

Slide 35

Slide 36

Slide 36

Slide 37

Slide 37

1FR 1FR 1FR

Slide 38

Slide 38

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

Slide 39

Slide 39

Slide 40

Slide 40

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

Slide 44

Slide 44

Slide 45

Slide 45

7E

Slide 46

Slide 46

Slide 47

Slide 47

Slide 48

Slide 48

Slide 49

Slide 49

GRID CONTAINER GRID ITEM GRID ITEM GRID ITEM

Slide 50

Slide 50

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

Slide 51

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 52

Slide 53

Slide 53

Slide 54

Slide 54

FLEX GRID

Slide 55

Slide 55

Slide 56

Slide 56

Slide 57

Slide 57

7F

Slide 58

Slide 58

Slide 59

Slide 59

Slide 60

Slide 60

2 COLUMNS 2 ROWS LOGO IS 2 ROWS HIGH

Slide 61

Slide 61

Slide 62

Slide 62

Slide 63

Slide 63

Slide 64

Slide 64

S W O R 2 N PA

Slide 65

Slide 65

Slide 66

Slide 66

Slide 67

Slide 67

7G

Slide 68

Slide 68

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

Slide 69

Slide 69

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

Slide 70

Slide 70

YAWN

Slide 71

Slide 71

Slide 72

Slide 72

6A

Slide 73

Slide 73

Slide 74

Slide 74

Slide 75

Slide 75

Slide 76

Slide 76

Slide 77

Slide 77

Slide 78

Slide 78

Slide 79

Slide 79

6B

Slide 80

Slide 80

Slide 81

Slide 81

Slide 82

Slide 82

Slide 83

Slide 83

6C

Slide 84

Slide 84

Slide 85

Slide 85

Slide 86

Slide 86

Slide 87

Slide 87

6D

Slide 88

Slide 88

Slide 89

Slide 89

Slide 90

Slide 90

Slide 91

Slide 91

Slide 92

Slide 92

Slide 93

Slide 93

Slide 94

Slide 94

Slide 95

Slide 95

Slide 96

Slide 96

Slide 97

Slide 97

But what about Internet Explorer?

Slide 98

Slide 98

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

Slide 99

Slide 99

Slide 100

Slide 100

youtube.com/layoutland

Slide 101

Slide 101

Slide 102

Slide 102

Slide 103

Slide 103

8A

Slide 104

Slide 104

Slide 105

Slide 105

Slide 106

Slide 106

Slide 107

Slide 107

8B

Slide 108

Slide 108

Slide 109

Slide 109

Slide 110

Slide 110

1fr 3fr 3fr 1fr

Slide 111

Slide 111

12% 37% 2% 37% 12%

Slide 112

Slide 112

1fr 3fr 3fr 1fr

Slide 113

Slide 113

1fr 3fr 3fr 1fr

Slide 114

Slide 114

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

Slide 115

Slide 115

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

Slide 116

Slide 116

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

Slide 117

Slide 117

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

Slide 118

Slide 118

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

Slide 119

Slide 119

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

Slide 120

Slide 120

Slide 121

Slide 121

Slide 122

Slide 122

8C

Slide 123

Slide 123

Slide 124

Slide 124

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

Slide 125

Slide 125

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

Slide 126

Slide 126

Slide 127

Slide 127

Slide 128

Slide 128

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

Slide 129

Slide 129

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

Slide 130

Slide 130

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

Slide 131

Slide 131

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

Slide 132

Slide 132

LABS.JENSIMMONS.COM

Slide 133

Slide 133

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

Slide 134

Slide 134

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