Post on 30-May-2020
Slides & Code at https://noti.st/rachelandrew
Your CSS Layout Toolkit for 2019
@rachelandrew
Slides & Code at https://noti.st/rachelandrew
A CSS Layout SystemReal layout for the first time!
Slides & Code at https://noti.st/rachelandrew
Components of CSS LayoutFlow Layout, Grid, Flexbox, Multiple-column Layout
Slides & Code at https://noti.st/rachelandrew
Components of CSS LayoutWriting Modes, Logical Properties & Values, Alignment, Sizing
Slides & Code at https://noti.st/rachelandrew
Components of CSS LayoutMedia Queries, Feature Queries
Slides & Code at https://noti.st/rachelandrew
Components of CSS LayoutCSS Shapes, Transforms, Scroll Snapping, Variable Fonts
Slides & Code at https://noti.st/rachelandrew
Writing ModesHorizontal or Vertical
Horizontal Writing ModeInline Dimension
Horizontal Writing Mode
Block Dimension
Vertical Writing Mode
Inline Dimension
Vertical Writing ModeBlock Dimension
Slides & Code at https://noti.st/rachelandrew
Logical Properties & ValuesWriting-mode relative equivalents of physical properties.
https://www.w3.org/TR/css-logical-1/
https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/
Slides & Code at https://noti.st/rachelandrew
Box AlignmentConsistent alignment across layout methods.
Align or Justify?align-contentalign-selfalign-items
justify-contentjustify-selfjustify-items
In Grid Layoutalign-contentalign-selfalign-items
justify-contentjustify-selfjustify-items
}
}
Block Axis
Inline Axis
Slides & Code at https://noti.st/rachelandrew
Distributing spacealign-content and justify-content
In Flex Layoutalign-contentalign-selfalign-items
justify-content
} Cross Axis
Main Axis
Slides & Code at https://noti.st/rachelandrew
Alignment in Block LayoutNo browser implementation as yet …
Slides & Code at https://noti.st/rachelandrew
Gapsrow-gap, column-gap, gap
https://www.w3.org/TR/css-align-3/#gaps
Slides & Code at https://noti.st/rachelandrew
SizingHow big should this item be?
https://www.smashingmagazine.com/2018/01/understanding-sizing-css-layout/
Slides & Code at https://noti.st/rachelandrew
Media QueriesLevel 4 Media Queries
Slides & Code at https://noti.st/rachelandrew
Media FeaturesWhat features does this environment have?
https://codepen.io/rachelandrew/pen/wYaLbR
Slides & Code at https://noti.st/rachelandrew
Feature QueriesHey browser! Do you speak grid?
https://codepen.io/rachelandrew/pen/zmGVgK
https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
Slides & Code at https://noti.st/rachelandrew
SubgridWhat’s coming in CSS Grid Level 2?
Slides & Code at https://noti.st/rachelandrew
New ChallengesThe potential for new accessibility issues.
https://tink.uk/flexbox-the-keyboard-navigation-disconnect/
Slides & Code at https://noti.st/rachelandrew
display: contentsA cautionary tale.
https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents
Slides & Code at https://noti.st/rachelandrew
What’s next?What do you need?
https://github.com/w3c/csswg-drafts/issues
Slides & Code at https://noti.st/rachelandrew
Firefox 62CSS 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 69Scroll Snap, display cutouts, conic gradients
https://developers.google.com/web/updates/2018/09/nic69
Slides & Code at https://noti.st/rachelandrew
Edge HTML 17Variable fonts
https://blogs.windows.com/msedgedev/2018/04/30/edgehtml-17-april-2018-update/
Slides & Code at https://noti.st/rachelandrew
Thank youhttps://noti.st/rachelandrew/QEhSSc