Your 2019 CSS Layout Toolkit @rachelandrew @oredev Slides & Code at https://noti.st/rachelandrew
A presentation at Øredev Developer Conference in November 2018 in Malmö, Sweden by Rachel Andrew
Your 2019 CSS Layout Toolkit @rachelandrew @oredev Slides & Code at https://noti.st/rachelandrew
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
Slides & Code https://noti.st/rachelandrew/es94DQ Slides & Code at https://noti.st/rachelandrew
A CSS Layout System Real layout for the first time! Slides & Code at https://noti.st/rachelandrew
Components of CSS Layout Flow Layout, Grid, Flexbox, Multiple-column Layout Slides & Code at https://noti.st/rachelandrew
Components of CSS Layout CSS Shapes, Transforms, Scroll Snapping, Variable Fonts Slides & Code at https://noti.st/rachelandrew
Components of CSS Layout Writing Modes, Logical Properties & Values, Alignment, Sizing Slides & Code at https://noti.st/rachelandrew
Components of CSS Layout Media Queries, Feature Queries Slides & Code at https://noti.st/rachelandrew
Look past the headline specs Understanding the things that tie together our new layout Slides & Code at https://noti.st/rachelandrew
Writing Modes Horizontal or Vertical Slides & Code at https://noti.st/rachelandrew
Horizontal Writing Mode Inline Dimension
Horizontal Writing Mode Block Dimension
Vertical Writing Mode Inline Dimension
Vertical Writing Mode Block Dimension
Logical Properties & Values Writing-mode relative equivalents of physical properties. Slides & Code at https://noti.st/rachelandrew
https://www.w3.org/TR/css-logical-1/
https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/
Box Alignment Consistent alignment across layout methods. Slides & Code at https://noti.st/rachelandrew
Align or Justify? align-content align-self align-items justify-content justify-self justify-items
In Grid Layout align-content align-self align-items } Block Axis justify-content justify-self justify-items } Inline Axis
Distributing space align-content and justify-content Slides & Code at https://noti.st/rachelandrew
In Flex Layout align-content align-self align-items justify-content } Cross Axis Main Axis
Alignment in Block Layout No browser implementation as yet … Slides & Code at https://noti.st/rachelandrew
Gaps row-gap, column-gap, gap Slides & Code at https://noti.st/rachelandrew
https://www.w3.org/TR/css-align-3/#gaps
Sizing How big should this item be? Slides & Code at https://noti.st/rachelandrew
https://www.smashingmagazine.com/2018/01/understanding-sizing-css-layout/
Media Queries Level 4 Media Queries Slides & Code at https://noti.st/rachelandrew
Media Features What features does this environment have? Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/wYaLbR
Feature Queries Hey browser! Do you speak grid? Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/zmGVgK
https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
Subgrid What’s coming in CSS Grid Level 2? Slides & Code at https://noti.st/rachelandrew
New Challenges The potential for new accessibility issues. Slides & Code at https://noti.st/rachelandrew
https://tink.uk/flexbox-the-keyboard-navigation-disconnect/
display: contents A cautionary tale. Slides & Code at https://noti.st/rachelandrew
https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents
What’s next? What do you need? Slides & Code at https://noti.st/rachelandrew
https://github.com/w3c/csswg-drafts/issues
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
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
Chrome 69 Scroll Snap, display cutouts, conic gradients https://developers.google.com/web/updates/2018/09/nic69 Slides & Code at https://noti.st/rachelandrew
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
Thank you https://noti.st/rachelandrew/es94DQ Slides & Code at https://noti.st/rachelandrew
