Building a Modern Web UI

on YouTube ↗20m

" summary

Claim: modern CSS flexbox replaces ten hacky vertical-centering tricks and the fourteen-answer StackOverflow circus with a simple, reliable layout model. Uses core CSS: display:flex, flex shorthand, justify-content and align-items, plus media queries and the order property. Demonstrates a nested-flex responsive app UI and a collapsible menu implemented with almost no JavaScript (about 40 lines) and it works across recent mobile browsers, with IE support as the main caveat.

AI-written summary · about

" chapters (3)

1. 0:00Introduction
2. 4:30Vertical centering
3. 10:30justified content

" related talks

• 47mCSS Layout Techniques: Replacing Floats with FlexboxBermon Painter · FITC Spotlight: Responsive Design 2016
• 54mFlexboxZoe Mickley Gillenwater · CSS Day 2015
• 11mLightning Talk: Think FlexOleksii Kachura · Front-Trends 2016
• 01h 40mUser Interfaces in the Age of Intrinsic Web DesignBill Odom · Craft Conference 2019
• 50mPresent and Future of CSS LayoutTab Atkins · CSS Day 2014
• 44mCSS Layout Techniques: Replacing Floats With FlexboxBermon Painter · Web Unleashed 2016
• 17mThe New CSS LayoutRachel Andrew · dotCSS 2015
• 40mFuture-Proofing Responsive Web Design in 2023Trung Vo · Voxxed Days Thessaloniki 2023