Study imports — matrix
The same pen, rendered five times with different imports. Each variant shows what changes when a layer is added or removed. Visual QA for the dependency system.
The pen has a simple HTML body — heading, a wrapped button — and a stylesheet that uses --pe-blue with a black fallback. The base styles in each variant come from whatever's in the imports list.
See docs/version-3/study-dependencies-planning.md for the design.
1. Raw — no imports
Browser defaults only. <h1> has its native margin; .box overflows by padding+border (no box-sizing); button is black (--pe-blue falls back).
imports: (none)
2. + reset.css
* { margin: 0 } — heading margin is gone. .box still overflows (no box-sizing yet). Button still black.
imports:
/study-resources/reset.css
3. + reset.css + setup.css
Adds * { box-sizing: border-box }. .box now fits its container — border + padding accounted for. Button still black.
imports:
/study-resources/reset.css, /study-resources/setup.css
4. + reset.css + setup.css + pe-colors.css
The full PE standard stack (what the "+ Add PE standard stack" button writes). --pe-blue is now defined; button text turns blue.
imports:
/study-resources/reset.css, /study-resources/setup.css, /study-resources/pe-colors.css
5. pe-colors only (no reset, no setup)
Demonstrates that imports are à la carte. Button is blue, but heading still has default margin and .box still overflows.
imports:
/study-resources/pe-colors.css