Does it work? Using the new CSS Layout

A presentation at Finch Front-end in September 2019 in Edinburgh, UK by Rachel Andrew

Slide 1

Slide 1

Does it work? Rachel Andrew @ Finch Front-End Slides & resources https://noti.st/rachelandrew

Slide 2

Slide 2

Slides & resources https://noti.st/rachelandrew

Slide 3

Slide 3

CSS is too trivial for real developers to worry about, yet too hard for them to understand. Slides & resources https://noti.st/rachelandrew

Slide 4

Slide 4

CSS is unique, and amazing. Slides & resources https://noti.st/rachelandrew

Slide 5

Slide 5

We can’t break the web Slides & resources https://noti.st/rachelandrew

Slide 6

Slide 6

Slides & resources https://noti.st/rachelandrew

Slide 7

Slide 7

Modern CSS can be minimal So you really need to understand what those few lines do. Slides & resources https://noti.st/rachelandrew

Slide 8

Slide 8

Normal Flow The no-layout layout. Slides & resources https://noti.st/rachelandrew

Slide 9

Slide 9

Slides & resources https://noti.st/rachelandrew

Slide 10

Slide 10

Source order matters Slides & resources https://noti.st/rachelandrew

Slide 11

Slide 11

Tab stop visualization with https://accessibilityinsights.io/ Slides & resources https://noti.st/rachelandrew

Slide 12

Slide 12

Get your source ordered Work with document flow and CSS is much simpler. Slides & resources https://noti.st/rachelandrew

Slide 13

Slide 13

“Grid or Flexbox” This is a terrible question. Slides & resources https://noti.st/rachelandrew

Slide 14

Slide 14

Columns Slides & resources https://noti.st/rachelandrew

Slide 15

Slide 15

Slides & resources https://noti.st/rachelandrew

Slide 16

Slide 16

“He then employed the little-used CSS “float” property to float the content to the desired width” Slides & resources https://noti.st/rachelandrew

Slide 17

Slide 17

“ It uses float:left, suffers from needing percentage widths for each column, and from potential column wrapping when the browser window is narrowed” Slides & resources https://noti.st/rachelandrew

Slide 18

Slide 18

Multi-column Layout Slides & resources https://noti.st/rachelandrew

Slide 19

Slide 19

.columns { column-count: 3; } Slides & resources https://noti.st/rachelandrew

Slide 20

Slide 20

section { break-inside: avoid; } Slides & resources https://noti.st/rachelandrew

Slide 21

Slide 21

h2 { column-span : all; } Slides & resources https://noti.st/rachelandrew

Slide 22

Slide 22

.columns { column-width: 250px; } Slides & resources https://noti.st/rachelandrew

Slide 23

Slide 23

Width is a minimum Column boxes are flexible by default. Slides & resources https://noti.st/rachelandrew

Slide 24

Slide 24

display Slides & resources https://noti.st/rachelandrew

Slide 25

Slide 25

Slides & resources https://noti.st/rachelandrew

Slide 26

Slide 26

.flex { display: flex; } Slides & resources https://noti.st/rachelandrew

Slide 27

Slide 27

.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew

Slide 28

Slide 28

.grid { display: inline-grid; } Slides & resources https://noti.st/rachelandrew

Slide 29

Slide 29

Old & new values for display Old Value New Value(s) block block flow flow-root block flow-root inline inline flow inline-block inline flow-root flex block flex inline-flex inline flex grid block grid inline-grid inline grid

  • Full list at https://developer.mozilla.org/en-US/docs/Web/CSS/display Slides & resources https://noti.st/rachelandrew

Slide 30

Slide 30

.flex { display: block flex; } Slides & resources https://noti.st/rachelandrew

Slide 31

Slide 31

.grid { display: block grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew

Slide 32

Slide 32

.grid { display: inline grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew

Slide 33

Slide 33

.grid { display: block flow; } Slides & resources https://noti.st/rachelandrew

Slide 34

Slide 34

display: block flow-root Creating a new Block Formatting Context (BFC) Slides & resources https://noti.st/rachelandrew

Slide 35

Slide 35

Slides & resources https://noti.st/rachelandrew

Slide 36

Slide 36

.container { display: block flow-root; } Slides & resources https://noti.st/rachelandrew

Slide 37

Slide 37

display: inline-block Slides & resources https://noti.st/rachelandrew

Slide 38

Slide 38

<div> <span class=”inline”> <img src=”pxcat.jpg”>I am an inline thing </span> I follow the inline thing. <br>I am below the inline thing. </div> Slides & resources https://noti.st/rachelandrew

Slide 39

Slide 39

.inline { backgroundcolor: rgb(71, 73, 84); color: #fff; padding: 1em; } .inline img { float: left; } Slides & resources https://noti.st/rachelandrew

Slide 40

Slide 40

.inline { backgroundcolor: rgb(71, 73, 84); color: #fff; padding: 1em; display: inline-block ; } .inline img { float: left; } Slides & resources https://noti.st/rachelandrew

Slide 41

Slide 41

.inline { backgroundcolor: rgb(71, 73, 84); color: #fff; padding: 1em; display: inline flow-root; } .inline img { float: left; } Slides & resources https://noti.st/rachelandrew

Slide 42

Slide 42

Two-value syntax of display Implemented in Firefox 70 Slides & resources https://noti.st/rachelandrew

Slide 43

Slide 43

display: flex Slides & resources https://noti.st/rachelandrew

Slide 44

Slide 44

.flex { display: flex; } .flex > div { flex: 1; } Slides & resources https://noti.st/rachelandrew

Slide 45

Slide 45

A flex-basis of 0 means items contribute no size. Slides & resources https://noti.st/rachelandrew

Slide 46

Slide 46

.flex { display: flex; flex-wrap: wrap; } .flex > div { flex: 1 1 200px; } Slides & resources https://noti.st/rachelandrew

Slide 47

Slide 47

.flex { display: flex; flex-wrap: wrap; } .flex > div { flex: 0 0 33.3333%; } Slides & resources https://noti.st/rachelandrew

Slide 48

Slide 48

Flexbox is more than floats with alignment. Which we discover when we stop trying to make it a grid. Slides & resources https://noti.st/rachelandrew

Slide 49

Slide 49

flex: auto Slides & resources https://noti.st/rachelandrew

Slide 50

Slide 50

auto Lay the items out at max-content size, then remove or add space in proportion. Slides & resources https://noti.st/rachelandrew

Slide 51

Slide 51

.flex { display: flex; justify-content: space-between; } Slides & resources https://noti.st/rachelandrew

Slide 52

Slide 52

Slides & resources https://noti.st/rachelandrew

Slide 53

Slide 53

<ul class=”list-group”> <li>Item One <span class=”badge”>2</span> </li> <li>Item Two <span class=”badge”>11</span> </li> <li>Item Three <span class=”badge”>4</span> </li> <li>Item Four <span class=”badge”>5</span> </li> </ul> Slides & resources https://noti.st/rachelandrew

Slide 54

Slide 54

<li>Item One <span class=”badge”>2</span> </li> Slides & resources https://noti.st/rachelandrew

Slide 55

Slide 55

.list-group li { display: flex; justify-content: space-between; align-items: center; } <li>Item One <span class=”badge”>2</span> </li> Slides & resources https://noti.st/rachelandrew

Slide 56

Slide 56

Slides & resources https://noti.st/rachelandrew

Slide 57

Slide 57

Slides & resources https://noti.st/rachelandrew

Slide 58

Slide 58

“Prior to alignment via justifycontent and align-self, any positive free space is distributed to auto margins in that dimension.” Slides & resources https://noti.st/rachelandrew

Slide 59

Slide 59

nav li:last-child { margin-left: auto; } Slides & resources https://noti.st/rachelandrew

Slide 60

Slide 60

“The specification describes a CSS box model optimized for user interface design.” Slides & resources https://noti.st/rachelandrew

Slide 61

Slide 61

Writing Modes Slides & resources https://noti.st/rachelandrew

Slide 62

Slide 62

writing-mode: horizontal-tb; Inline Dimension Block Dimension Slides & resources https://noti.st/rachelandrew

Slide 63

Slide 63

writing-mode: vertical-rl; Block Dimension Inline Dimension Slides & resources https://noti.st/rachelandrew

Slide 64

Slide 64

Block Start Block Start Block End Block End Slides & resources https://noti.st/rachelandrew

Slide 65

Slide 65

Inline Start Inline End Inline Start Inline End Slides & resources https://noti.st/rachelandrew

Slide 66

Slide 66

Web layout was tied to physical dimensions. We think in top, right, bottom left, width and height. Slides & resources https://noti.st/rachelandrew

Slide 67

Slide 67

.example { width: 600px; height: 300px; } Slides & resources https://noti.st/rachelandrew

Slide 68

Slide 68

Logical Properties and Values Slides & resources https://noti.st/rachelandrew

Slide 69

Slide 69

.example { inline-size: 600px; block-size: 300px; } Slides & resources https://noti.st/rachelandrew

Slide 70

Slide 70

inline-size = width block-size = height Slides & resources https://noti.st/rachelandrew

Slide 71

Slide 71

block-size = width inline-size = height Slides & resources https://noti.st/rachelandrew

Slide 72

Slide 72

Physical v. Logical .example { padding-top: 10px; padding-right: 2em; margin-bottom: 2em; } .example { padding-block-start: 10px; padding-inline-end: 2em; margin-block-end: 2em; margin-inline: 1em; } Slides & resources https://noti.st/rachelandrew

Slide 73

Slide 73

.example { border-start-start-radius: 20px; border-start-end-radius: 3em; border-end-start-radius: 2em 4em; border-end-end-radius: 5px; } Slides & resources https://noti.st/rachelandrew

Slide 74

Slide 74

nav li:last-child { margin-left: auto; } Slides & resources https://noti.st/rachelandrew

Slide 75

Slide 75

Naming things A CSS Grid superpower Slides & resources https://noti.st/rachelandrew

Slide 76

Slide 76

Slides & resources https://noti.st/rachelandrew

Slide 77

Slide 77

.media { display: grid; grid-template-columns: fit-content(200px) 1fr; grid-template-areas: “image content”; grid-gap: 20px; } .img { grid-area: image; } .content { grid-area: content; } Slides & resources https://noti.st/rachelandrew

Slide 78

Slide 78

Slides & resources https://noti.st/rachelandrew

Slide 79

Slide 79

.media-flip { grid-template-columns: 1fr fit-content(200px); grid-template-areas: “content image”; } Slides & resources https://noti.st/rachelandrew

Slide 80

Slide 80

Slides & resources https://noti.st/rachelandrew

Slide 81

Slide 81

No ‘right’ way. I like using grid for this. You might use flex. It’s all good. Slides & resources https://noti.st/rachelandrew

Slide 82

Slide 82

“Named Columns” Not a thing. Kind of a thing. Slides & resources https://noti.st/rachelandrew

Slide 83

Slide 83

In grid we name lines and we name areas. We don’t name tracks. Slides & resources https://noti.st/rachelandrew

Slide 84

Slide 84

.grid { display: grid; gap: 20px; grid-template-columns: [full-start] minmax(0,1fr) [content-start start-half-start] minmax(0,2fr) [start-half-end end-half-start] minmax(0,2fr) [end-half-end content-end] minmax(0,1fr) [full-end]; } Slides & resources https://noti.st/rachelandrew

Slide 85

Slide 85

h1 { grid-column: content-start / content-end; } .one { grid-row: 2; grid-column: start-half-start / start-half-end; } Slides & resources https://noti.st/rachelandrew

Slide 86

Slide 86

h1 { grid-column: content; } .one { grid-row: 2; grid-column: start-half; } Slides & resources https://noti.st/rachelandrew

Slide 87

Slide 87

Slides & resources https://noti.st/rachelandrew

Slide 88

Slide 88

Named lines make a named area Using the main name, with –start and –end removed. Slides & resources https://noti.st/rachelandrew

Slide 89

Slide 89

Slides & resources https://noti.st/rachelandrew

Slide 90

Slide 90

Named areas can be used as named lines The name resolves to the start or end edge of the area. Slides & resources https://noti.st/rachelandrew

Slide 91

Slide 91

grid-column: full Slides & resources https://noti.st/rachelandrew

Slide 92

Slide 92

grid-column: full / full Slides & resources https://noti.st/rachelandrew

Slide 93

Slide 93

grid-column: full-start / full-end Slides & resources https://noti.st/rachelandrew

Slide 94

Slide 94

Now add subgrid Slides & resources https://noti.st/rachelandrew

Slide 95

Slide 95

Slides & resources https://noti.st/rachelandrew

Slide 96

Slide 96

.two { grid-row: 3; grid-column: full; display: grid; grid-template-columns: subgrid; } Slides & resources https://noti.st/rachelandrew

Slide 97

Slide 97

Slides & resources https://noti.st/rachelandrew

Slide 98

Slide 98

Slides & resources https://noti.st/rachelandrew

Slide 99

Slide 99

Line names from the parent grid are inherited by the subgrid. Slides & resources https://noti.st/rachelandrew

Slide 100

Slide 100

.two-a { grid-column: start-half; } .two-b { grid-column: end-half; } Slides & resources https://noti.st/rachelandrew

Slide 101

Slide 101

Slides & resources https://noti.st/rachelandrew

Slide 102

Slide 102

More CSS. Faster implementations. Slides & resources https://noti.st/rachelandrew

Slide 103

Slide 103

Slides & resources https://noti.st/rachelandrew

Slide 104

Slide 104

Interoperability Things working the same way across browsers. Slides & resources https://noti.st/rachelandrew

Slide 105

Slide 105

Standardizing CSS Scrollbars Slides & resources https://noti.st/rachelandrew

Slide 106

Slide 106

.scroller { overflow-y: scroll; scrollbar-width: thin; scrollbar-color: rgb(255,255,255) rgb(158,120,153); } Slides & resources https://noti.st/rachelandrew

Slide 107

Slide 107

Better defaults Scroll anchoring Slides & resources https://noti.st/rachelandrew

Slide 108

Slide 108

Ask why things work Avoid always copying and pasting from a cheatsheet. Slides & resources https://noti.st/rachelandrew

Slide 109

Slide 109

Slides & resources https://noti.st/rachelandrew

Slide 110

Slide 110

We’re working out how to use all this new stuff together. Slides & resources https://noti.st/rachelandrew

Slide 111

Slide 111

Thank you @rachelandrew | https://noti.st/rachelandrew/ Slides & resources https://noti.st/rachelandrew