A presentation at Web Directions Summit in in Sydney NSW, Australia by Rachel Andrew
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
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.
What are the key things we have learned since Grid landed in browsers in March of 2017? How have websites started to use Grid? How does it fit together with the rest of layout? What new features are landing that we can take advantage of?
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.
Here’s what was said about this presentation on social media.
