Your CSS Layout Toolkit for 2019

A presentation at Web Unleashed in September 2018 in Toronto, ON, Canada by Rachel Andrew

Slide 1

Slide 1

Your CSS Layout Toolkit for 2019 @rachelandrew Slides & Code at https://noti.st/rachelandrew

Slide 2

Slide 2

A CSS Layout System Real layout for the first time! Slides & Code at https://noti.st/rachelandrew

Slide 3

Slide 3

Components of CSS Layout Flow Layout, Grid, Flexbox, Multiple-column Layout Slides & Code at https://noti.st/rachelandrew

Slide 4

Slide 4

Components of CSS Layout Writing Modes, Logical Properties & Values, Alignment, Sizing Slides & Code at https://noti.st/rachelandrew

Slide 5

Slide 5

Components of CSS Layout Media Queries, Feature Queries Slides & Code at https://noti.st/rachelandrew

Slide 6

Slide 6

Components of CSS Layout CSS Shapes, Transforms, Scroll Snapping, Variable Fonts Slides & Code at https://noti.st/rachelandrew

Slide 7

Slide 7

Writing Modes Horizontal or Vertical Slides & Code at https://noti.st/rachelandrew

Slide 8

Slide 8

Horizontal Writing Mode Inline Dimension

Slide 9

Slide 9

Horizontal Writing Mode Block Dimension

Slide 10

Slide 10

Vertical Writing Mode Inline Dimension

Slide 11

Slide 11

Vertical Writing Mode Block Dimension

Slide 12

Slide 12

Slide 13

Slide 13

Logical Properties & Values Writing-mode relative equivalents of physical properties. Slides & Code at https://noti.st/rachelandrew

Slide 14

Slide 15

Slide 15

https://www.w3.org/TR/css-logical-1/

Slide 16

Slide 16

https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/

Slide 17

Slide 17

Box Alignment Consistent alignment across layout methods. Slides & Code at https://noti.st/rachelandrew

Slide 18

Slide 18

Align or Justify? align-content align-self align-items justify-content justify-self justify-items

Slide 19

Slide 19

In Grid Layout align-content align-self align-items } Block Axis justify-content justify-self justify-items } Inline Axis

Slide 20

Slide 21

Slide 22

Slide 22

Distributing space align-content and justify-content Slides & Code at https://noti.st/rachelandrew

Slide 23

Slide 24

Slide 24

In Flex Layout align-content align-self align-items justify-content } Cross Axis Main Axis

Slide 25

Slide 26

Slide 27

Slide 28

Slide 28

Alignment in Block Layout No browser implementation as yet … Slides & Code at https://noti.st/rachelandrew

Slide 29

Slide 29

Gaps row-gap, column-gap, gap Slides & Code at https://noti.st/rachelandrew

Slide 30

Slide 30

https://www.w3.org/TR/css-align-3/#gaps

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

Sizing How big should this item be? Slides & Code at https://noti.st/rachelandrew

Slide 34

Slide 35

Slide 36

Slide 36

https://www.smashingmagazine.com/2018/01/understanding-sizing-css-layout/

Slide 37

Slide 37

Media Queries Level 4 Media Queries Slides & Code at https://noti.st/rachelandrew

Slide 38

Slide 38

Media Features What features does this environment have? Slides & Code at https://noti.st/rachelandrew

Slide 39

Slide 39

https://codepen.io/rachelandrew/pen/wYaLbR

Slide 40

Slide 40

Slide 41

Slide 41

Feature Queries Hey browser! Do you speak grid? Slides & Code at https://noti.st/rachelandrew

Slide 42

Slide 42

https://codepen.io/rachelandrew/pen/zmGVgK

Slide 43

Slide 43

https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/

Slide 44

Slide 44

Subgrid What’s coming in CSS Grid Level 2? Slides & Code at https://noti.st/rachelandrew

Slide 45

Slide 45

Slide 46

Slide 46

Slide 47

Slide 47

New Challenges The potential for new accessibility issues. Slides & Code at https://noti.st/rachelandrew

Slide 48

Slide 48

https://tink.uk/flexbox-the-keyboard-navigation-disconnect/

Slide 49

Slide 49

display: contents A cautionary tale. Slides & Code at https://noti.st/rachelandrew

Slide 50

Slide 51

Slide 51

https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents

Slide 52

Slide 52

What’s next? What do you need? Slides & Code at https://noti.st/rachelandrew

Slide 53

Slide 53

https://github.com/w3c/csswg-drafts/issues

Slide 54

Slide 54

Firefox 62 CSS Shapes, Shape Path Editor, Variable Fonts https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/62 Slides & Code at https://noti.st/rachelandrew

Slide 55

Slide 55

Chrome 69 Scroll Snap, display cutouts, conic gradients https://developers.google.com/web/updates/2018/09/nic69 Slides & Code at https://noti.st/rachelandrew

Slide 56

Slide 56

Edge HTML 17 Variable fonts https://blogs.windows.com/msedgedev/2018/04/30/edgehtml-17-april-2018-update/ Slides & Code at https://noti.st/rachelandrew

Slide 57

Slide 57

Thank you https://noti.st/rachelandrew/QEhSSc Slides & Code at https://noti.st/rachelandrew