The Future of Web Design: Layout

The Future of Web Design Part 1: Layout @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 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/VdNKCh Slides & Code at https://noti.st/rachelandrew