A presentation at WDC 2022 in in Bristol, UK by Andy Bell
Be the browser’s mentor, not its micromanager WDC 2022 Andy Bell - @hankchizljaw https://set.studio
I’m going to change how you write CSS
Fluid Type Fluid Space Flexible Layouts Progressive Enhancement
We build for everyone Not just for ourselves, or our peer groups
Everyone should get an excellent user experience
No one will ever complain about getting a good baseline experience
Let’s take a look at what we are building buildexcellentwebsit.es
#WebDevConf buildexcellentwebsit.es
The “C” in CSS stands for “Come on, Andy, get on with the good stuff”
CUBE CSS is a CSS methodology that’s orientated towards simplicity, pragmatism and consistency. It’s designed to work with the medium that you’re working in—often the browser—rather than against it.
cube.fyi
Global CSS Composition Utilities Blocks Exceptions
Global CSS Composition Utilities Blocks Exceptions
Global CSS Composition Utilities Blocks Exceptions
Global CSS Composition Utilities Blocks Exceptions
Global CSS Composition Utilities Blocks Exceptions
Home is where the HTML is
It gives tools that help others consume the information on websites a head start.
If the CSS doesn’t load, the website still makes sense!
Old browsers will still get a good baseline experience
Get the HTML right and you’ve built a solid foundation. If not, you’re building on sand.
Stefan Rousseau/AP
https://www.smashingmagazine.com/2020/01/html5-article-section/
Let’s get stuck into some CSS Programming
https://piccalil.li/blog/a-modern-css-reset/
Global CSS Composition Utilities Blocks Exceptions
Fluid type and fluid space
https://www.opensignal.com/sites/opensignal-com/files/data/reports/global/data-2015 08/2015_08_fragmentation_report.pdf
.my-element { font-size: clamp(2rem, calc(1rem + 5vw), 10rem); }
Size and space scales
Step Step Step Step Step 0: 1: 2: 3: 4: 1rem 1.25rem 1.56rem 1.95rem 2.43rem (1 * 1.25) (1.25 * 1.25) (1.56 * 1.25) (1.95 * 1.25)
Back to our CSS
Global CSS Composition Utilities Blocks Exceptions
Hello I am a heading Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. A subheading Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. 1em
Hello I am a heading Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. A subheading Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. 10rem
Global CSS Composition Utilities Blocks Exceptions
every-layout.dev 40% discount with WDC2022
Global CSS Composition Utilities Blocks Exceptions
https://glitch.com/edit/#!/build-excellent-websites
We’ve never had it better with browsers
Build the whole website with Tailwind
Glitching and flashing
Go forth and build excellent websites
Thank you Andy Bell - @hankchizljaw https://set.studio - @setstudiotweets https://swop.link/set-studio
We look at how we can hint the browser, rather than micromanage it by leaning into progressive enhancement, CSS layout, fluid type & space and modern CSS capabilities to build resilient front-ends that look great for everyone, regardless of their device, connection speed or context.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.