Demystifying Modern CSS Layouts with DevTools

Overview

Explore the intricacies of modern CSS layouts using Firefox DevTools in this 29-minute conference talk from View Source 2019. Dive into Flexbox, Grid, and Box alignment properties, learning how browsers interpret CSS values. Discover how to visualize these properties and understand their behavior as viewport sizes change. Cover topics such as automatic sizing, full-width punctuation, boundaries, Flex Box mechanics, Grid Inspector tools, and responsive design techniques. Gain practical insights into creating flexible and dynamic layouts through hands-on browser demonstrations and in-depth explanations of CSS concepts like Flex Basis, Grid Template Areas, and variable sizing.

Syllabus

Introduction
Automatic Sizing
Full Width punctuation
Boundaries
Butcher
Browser Demo
Flex Box
Flex Shift
Flex Basis
Total Free Space
Flicks
Main Axis
Self Alignment
Forward
Grid Inspector
Display Grid
Grid Position
Grid Inspector Tool
Grid Template Areas
Modifying Grid Container
Repositioning Layers
Rows and Clubs
Grid Item
Flex Container
Flexible Sizing
Units
MinMax
Max
Point
Growth
Viewport Sizes
Variable Sizing
Overlap
Responsiveness