A presentation at Vienna Calling by Andy Bell
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_
A run-down of the CUBE CSS methodology, how it works and most importantly why it exists.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.