CUBE CSS

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

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

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

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_

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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_

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

“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_

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

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

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

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

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

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_

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

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

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

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

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

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

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

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_

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_

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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_

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

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_

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