A presentation at W3C Workshop on Digital Publication Layout and Presentation in in Tokyo, Japan by Rachel Andrew
New Tools for CSS Layout Rachel Andrew @rachelandrew Slides & Code at https://noti.st/rachelandrew
I do web stuff. Web developer since 1996, teaching CSS for almost as long. Co-founder Perch CMS & Notist. Author or co-author of 23 books on web development. Smashing Magazine Editor in Chief. Writer for MDN. CSS Working Group Invited Expert. Google Developer Expert. I like long runs and small airplanes. Slides & Code at https://noti.st/rachelandrew
A layout system for CSS For the first time! Slides & Code at https://noti.st/rachelandrew
A layout system for CSS Flexbox Grid Layout Multiple-column Layout Floats CSS Positioned Layout Slides & Code at https://noti.st/rachelandrew
Brought together by … Box Alignment Intrinsic and Extrinsic Sizing Logical Properties and Values Slides & Code at https://noti.st/rachelandrew
Flexbox Layout in one dimension. A row or a column. Slides & Code at https://noti.st/rachelandrew
Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/qMYqYL Inline Dimension Slides & Code at https://noti.st/rachelandrew
Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/XPqjpX Block Dimension Slides & Code at https://noti.st/rachelandrew
Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/JavRqM Block Dimension Slides & Code at https://noti.st/rachelandrew
Start Left to Right Slides & Code at https://noti.st/rachelandrew
Start Right to Left Slides & Code at https://noti.st/rachelandrew
Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/GXdjNd Inline Slides & Code at https://noti.st/rachelandrew Block
Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/ZMoBGe Inline Slides & Code at https://noti.st/rachelandrew Block
Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/dqeOXg Inline Slides & Code at https://noti.st/rachelandrew Block
Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/VGxmKq Slides & Code at https://noti.st/rachelandrew
CSS Grid Layout Layout in two dimensions. Rows and Columns. Slides & Code at https://noti.st/rachelandrew
Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/mGLOKd Slides & Code at https://noti.st/rachelandrew
Slides & Code at https://noti.st/rachelandrew
Firefox Grid Inspector https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts Slides & Code at https://noti.st/rachelandrew
Slides & Code at https://noti.st/rachelandrew
Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/PdebXZ Inline Slides & Code at https://noti.st/rachelandrew Block
Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/mGLRRr Inline Slides & Code at https://noti.st/rachelandrew Block
Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/GXdWpQ Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/GXdWpQ Left to Right Slides & Code at https://noti.st/rachelandrew Right to Left
A true system for layout Designed for the job. Writing mode aware. Consistent. Slides & Code at https://noti.st/rachelandrew
What’s next? CSS Grid Level 2 “subgrids” Slides & Code at https://noti.st/rachelandrew
Slides & Code at https://noti.st/rachelandrew
What’s next? Logical Properties & Values Slides & Code at https://noti.st/rachelandrew
Slides & Code at https://noti.st/rachelandrew
What’s next? Box Alignment in Block Layout Slides & Code at https://noti.st/rachelandrew
What’s next? What’s important to you? Slides & Code at https://noti.st/rachelandrew
Thank you! https://noti.st/rachelandrew/tJeWKI Slides & Code at https://noti.st/rachelandrew
An exploration of the advances in CSS Layout over the past few years - covering Flexbox, Grid and their relationship to Writing Modes.
The following code examples from the presentation can be tried out live.
The following resources were mentioned during the presentation or are useful additional information.
Lots of small CSS Grid examples plus video tutorials on the basic elements of the spec.
An article for Smashing Magazine where I detail how the various components of layout fit together.
