CUBE CSS

A presentation at Vienna Calling in July 2020 in by Andy Bell

Slide 1

CUBE CSS July 29th 2020 #ViennaCalling https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 2

CSS Doesn’t Scale! https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 3

Just use Tailwind Just use Emotion Just use Styled components Just use CSS Modules https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 4

Tailwind CSS default output: 80,936 lines 102kb weight https://unpkg.com/tailwindcss@1.4.6/dist/tailwind.css https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 5

npm init -y https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 6

WordPress 36% https://piccalil.li | #CUBECSS React JS 0.3% @hankchizljaw | @piccalilli_

Slide 7

body { content: “How Andy Does it” } https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 8

https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 9

What is CUBE CSS? https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 10

C Composition Utility U Block B Exception E https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 11

The “C” in CSS stands for “Cascading” https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 12

CSS + CUBE = https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 13

CSS https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 14

CSS scales Beautifully https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 15

https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 16

https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 17

CSS https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 18

Progressive Enhancement for the win https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 19

Composition https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 20

Micro https://piccalil.li | #CUBECSS Macro @hankchizljaw | @piccalilli_

Slide 21

Design System Work is often diplomacy work https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 22

https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 23

Provide high-level, flexible layouts Determine how elements interact with each other Create consistent flow and rhythm https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 24

Provide visual treatment such as colour or font style Provide decorative styles such as shadows and patterns Force a browser to generate a pixelperfect layout https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 25

https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 26

Featuring Heydon Pickering https://every-layout.dev https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 27

Simplify and distill layout Hints & rules, rather than micromanaging Achieves solid, resillient layouts https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 28

Simplify and distill layout Hints & rules, rather than micromanaging Achieves solid, resillient layouts https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 29

Simplify and distill layout Hints & rules, rather than micromanaging Achieves solid, resillient layouts https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 30

Featuring Heydon Pickering https://every-layout.dev https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 31

https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 32

https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 33

https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 34

https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 35

CSS https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 36

HTML https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 37

Utility https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 38

Image: thedrum.com https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 39

CSS https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 40

Design Tokens https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 41

“Design Tokens are the visual atoms of the design system – specifically, they are named entities that store visual design attributes. We use them in place of hard–coded values in order to maintain a scalable and consistent visual system.” @jina https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 42

Design tokens for scalable systems https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 43

JSON https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 44

CSS https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 45

HTML https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 46

Design tokens mean light CSS https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 47

Apply a single CSS property, or a concise group of related properties Extend design tokens to maintain a single source of truth Abstract repeatability away from the CSS and apply it in the HTML instead https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 48

Define a large group of unrelated CSS properties. Be used as a specificity hack. https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 49

Block https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 50

https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 51

CUBE CSS BEM https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 52

Bring your own opinions (slightly risky) https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 53

CSS https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 54

CSS https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 55

Extend the work already done by CSS, composition and utility Apply a collection of design tokens within a concise group Create a namespace or specificity boost https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 56

Grow to anything larger than a handful of CSS rules (max 80-100 lines) Solve more than one contextual problem https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 57

Exception https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 58

https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 59

https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 60

HTML https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 61

CSS https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 62

Principles https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 63

Pls do this layout thx https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 64

Progressive Enhancement for the win https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 65

https://swop.link/pe https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 66

Bye Bye AutoPrefixer we will not miss you https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 67

Abstraction only when necessary https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 68

Any technology is fine just keep the output light https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 69

Wrapping up https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 70

IT’S A LIE https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 71

https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 72

https://cube.fyi https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 73

Thank you Use code CUBE_PAL to save 50% off Learn Eleventy From Scratch https://swop.link/11ty-cube https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 74

https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_

Slide 75

Thank you Use code CUBE_PAL to save 50% off Learn Eleventy From Scratch https://swop.link/11ty-cube https://piccalil.li | #CUBECSS @hankchizljaw | @piccalilli_