Your CSS Layout Toolkit for 2019

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

Rachel Andrew
@rachelandrew

1 / 62

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.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

Code

The following code examples from the presentation can be tried out live.

https://codepen.io/rachelandrew/pen/yRyXOm

Simple Grid
https://codepen.io/rachelandrew/pen/EdaXyK

Simple Grid in vertical-rl
https://codepen.io/rachelandrew/pen/vVEZQa

Grid Alignment Demo
https://codepen.io/rachelandrew/pen/bmNrwd

justify-content and align-content
https://codepen.io/rachelandrew/pen/qJEXoQ

Grid alignment in RTL
https://codepen.io/rachelandrew/pen/NOPXLb

Flex justify-content
https://codepen.io/rachelandrew/pen/yRyvbq

Flex align-content
https://codepen.io/rachelandrew/pen/YJPayx

Flex align-self and align-content
https://codepen.io/rachelandrew/pen/aRzYLB

display: contents and grid
https://codepen.io/rachelandrew/pen/wYaLbR

Media Features
https://codepen.io/rachelandrew/pen/zmGVgK

Feature Queries