- 11ty
- native html
- css with tailwind
- js with alpine
- design tokens
- css reset
- global styles
-> style as much as possible at a high level
-> progressive enhancement in action
- composition
-> provide high-level, flexible layouts
-> determine how elements interact with each other
-> create consistent flow and rhythm
- utility
-> extend design tokens to maintain a single source of truth
-> abstract repeatability away from css and apply it in the html
- block
-> extend the work already done by the global css, composition and utility layers
-> apply a collection of design tokens within a concise group
-> create a namespace or specificity boost to control a specific context
- exception
-> provide a concise varation to a block
-> use data attributes
- grouping
- the elements's primary block class
- any subsequent block classes
- standard utility classes
- design token utility classes
--space-{xs - 3xl}
--space-{xs-s - 2xl-3xl}
--size-step-{0 - 6}
--size-{000 - 15}
--size-fluid-{1 - 10}
--size-content-{1 - 3}
--size-header-{1 - 3}
--size-relative-{000 - 15}