Your 2019 CSS Layout Toolkit @rachelandrew @oredev Slides & Code at https://noti.st/rachelandrew
Slide 1
Slide 2
Rachel Andrew Co-founder Perch CMS and Notist Editor in Chief at Smashing Magazine W3C Invited Expert to the CSS Working Group, co-editor Multicol and Page Floats @rachelandrew | https://rachelandrew.co.uk Slides & Code at https://noti.st/rachelandrew
Slide 3
Slides & Code https://noti.st/rachelandrew/es94DQ Slides & Code at https://noti.st/rachelandrew
Slide 4
A CSS Layout System Real layout for the first time! Slides & Code at https://noti.st/rachelandrew
Slide 5
Components of CSS Layout Flow Layout, Grid, Flexbox, Multiple-column Layout Slides & Code at https://noti.st/rachelandrew
Slide 6
Components of CSS Layout CSS Shapes, Transforms, Scroll Snapping, Variable Fonts Slides & Code at https://noti.st/rachelandrew
Slide 7
Components of CSS Layout Writing Modes, Logical Properties & Values, Alignment, Sizing Slides & Code at https://noti.st/rachelandrew
Slide 8
Components of CSS Layout Media Queries, Feature Queries Slides & Code at https://noti.st/rachelandrew
Slide 9
Look past the headline specs Understanding the things that tie together our new layout Slides & Code at https://noti.st/rachelandrew
Slide 10
Writing Modes Horizontal or Vertical Slides & Code at https://noti.st/rachelandrew
Slide 11
Horizontal Writing Mode Inline Dimension
Slide 12
Horizontal Writing Mode Block Dimension
Slide 13
Vertical Writing Mode Inline Dimension
Slide 14
Vertical Writing Mode Block Dimension
Slide 15
Slide 16
Logical Properties & Values Writing-mode relative equivalents of physical properties. Slides & Code at https://noti.st/rachelandrew
Slide 17
Slide 18
https://www.w3.org/TR/css-logical-1/
Slide 19
https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/
Slide 20
Box Alignment Consistent alignment across layout methods. Slides & Code at https://noti.st/rachelandrew
Slide 21
Align or Justify? align-content align-self align-items justify-content justify-self justify-items
Slide 22
In Grid Layout align-content align-self align-items } Block Axis justify-content justify-self justify-items } Inline Axis
Slide 23
Slide 24
Slide 25
Distributing space align-content and justify-content Slides & Code at https://noti.st/rachelandrew
Slide 26
Slide 27
In Flex Layout align-content align-self align-items justify-content } Cross Axis Main Axis
Slide 28
Slide 29
Slide 30
Slide 31
Alignment in Block Layout No browser implementation as yet … Slides & Code at https://noti.st/rachelandrew
Slide 32
Gaps row-gap, column-gap, gap Slides & Code at https://noti.st/rachelandrew
Slide 33
https://www.w3.org/TR/css-align-3/#gaps
Slide 34
Slide 35
Slide 36
Sizing How big should this item be? Slides & Code at https://noti.st/rachelandrew
Slide 37
Slide 38
Slide 39
Slide 40
https://www.smashingmagazine.com/2018/01/understanding-sizing-css-layout/
Slide 41
Media Queries Level 4 Media Queries Slides & Code at https://noti.st/rachelandrew
Slide 42
Media Features What features does this environment have? Slides & Code at https://noti.st/rachelandrew
Slide 43
https://codepen.io/rachelandrew/pen/wYaLbR
Slide 44
Slide 45
Feature Queries Hey browser! Do you speak grid? Slides & Code at https://noti.st/rachelandrew
Slide 46
https://codepen.io/rachelandrew/pen/zmGVgK
Slide 47
https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
Slide 48
Subgrid What’s coming in CSS Grid Level 2? Slides & Code at https://noti.st/rachelandrew
Slide 49
Slide 50
Slide 51
New Challenges The potential for new accessibility issues. Slides & Code at https://noti.st/rachelandrew
Slide 52
https://tink.uk/flexbox-the-keyboard-navigation-disconnect/
Slide 53
display: contents A cautionary tale. Slides & Code at https://noti.st/rachelandrew
Slide 54
Slide 55
https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents
Slide 56
What’s next? What do you need? Slides & Code at https://noti.st/rachelandrew
Slide 57
https://github.com/w3c/csswg-drafts/issues
Slide 58
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 59
Firefox 63 gap, row-gap and column-gap in Flex Layout https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/63 Slides & Code at https://noti.st/rachelandrew
Slide 60
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 61
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 62
Thank you https://noti.st/rachelandrew/es94DQ Slides & Code at https://noti.st/rachelandrew
