Be the browser’s mentor, not its micromanager All Day Hey May 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

#AllDayHey 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

cube.fyi

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.

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

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

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