new tools for css layout · slides & code at new tools for css layout rachel andrew...
TRANSCRIPT
Slides & Code at https://noti.st/rachelandrew
New Tools for CSS LayoutRachel 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 CSSFor 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
FlexboxLayout 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
BlockInline
Slides & Code at https://noti.st/rachelandrew
Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/ZMoBGe
BlockInline
Slides & Code at https://noti.st/rachelandrew
Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/dqeOXg
BlockInline
Slides & Code at https://noti.st/rachelandrew
Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/VGxmKq
Slides & Code at https://noti.st/rachelandrew
CSS Grid LayoutLayout 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 Inspectorhttps://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
BlockInline
Slides & Code at https://noti.st/rachelandrew
Slides & Code at https://noti.st/rachelandrew
https://codepen.io/rachelandrew/pen/mGLRRr
BlockInline
Slides & Code at https://noti.st/rachelandrew
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 Right to Left
Slides & Code at https://noti.st/rachelandrew
A true system for layoutDesigned 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