TheYard's UI, layer by layer
Pinch or Ctrl+scroll to zoom; the text is selectable.
Source
·
TheYard
TheYard's UI, layer by layer: four design token files at the bottom, the base and panel sheets and the width steps above them, then the component sheets, the site map and the document layout, each reading only the layers below it
TheYard's UI, layer by layer
Each layer reads the layers below it and never the one above. A test stands beside every layer.
READS DOWN, NEVER UP
Component CSS modules
src/components/**/*.module.css
One site map
siteMap.ts: the rail and the landing
Every document in panels
docLayout.ts, DocDialog.tsx
Base and panels
base.css, panels.css (.op-glass, .op-tile)
The width steps
breakpoints.ts: PHONE, DESK, WIDE, WIDEST
Design tokens
colors.css, sizes.css, typography.css, effects.css: three tiers in colors.css
