A presentation at Web Unleashed in in Toronto, ON, Canada by Rachel Andrew
Your CSS Layout Toolkit for 2019 @rachelandrew 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 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
Components of CSS Layout CSS Shapes, Transforms, Scroll Snapping, Variable Fonts 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
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/QEhSSc Slides & Code at https://noti.st/rachelandrew
As we head into the final quarter of 2018, let’s take a look at where we are with CSS Grid Layout, and CSS layout in general. In this talk you will learn the key elements of layout. The things you need to know as you plan your projects now and into the next year.
Rachel will take you on a tour of what we have now and what is coming next, with plenty of practical advice and takeaway code examples, so that you can start to use these features in your own work.
The following resources were mentioned during the presentation or are useful additional information.
The following code examples from the presentation can be tried out live.
