B.A. Baracus
a433b935fa
- Replace OpenProps (~25KB) with native src/tokens.css (~40 tokens) - Remove open-props, postcss-import from package.json + postcss.config - Update main.css: remove @import open-props/*, import ./tokens.css - Rewrite 01-tokens.css header to reference tokens.css - All raw OpenProps values (font stacks, sizes, weights, colors, easings, durations, shadows, radii, animations, media queries) now defined natively in tokens.css - Build uses cat concat + cssnano (no postcss-import needed) - Build output: 78KB minified (saved ~24KB from OpenProps removal)
42 lines
2.2 KiB
Markdown
42 lines
2.2 KiB
Markdown
## ADDED Requirements
|
|
|
|
### Requirement: Layouts are invoked via `data-layout` attributes
|
|
All layout patterns SHALL be activated through `data-layout` attribute values on HTML elements. No CSS classes or inline styles SHALL be required to produce a layout.
|
|
|
|
#### Scenario: data-layout="row" creates horizontal flex container
|
|
- **WHEN** an element has `data-layout="row"` (e.g., `<nav data-layout="row">`)
|
|
- **THEN** the element MUST have `display: flex` and `flex-direction: row`
|
|
|
|
#### Scenario: data-layout="col" creates vertical flex container
|
|
- **WHEN** an element has `data-layout="col"`
|
|
- **THEN** the element MUST have `display: flex` and `flex-direction: column`
|
|
|
|
#### Scenario: data-layout="spread" distributes items across the main axis
|
|
- **WHEN** an element has `data-layout="spread"`
|
|
- **THEN** it MUST have `display: flex`, `justify-content: space-between`, and `align-items: center`
|
|
|
|
#### Scenario: data-layout="center" centers items on both axes
|
|
- **WHEN** an element has `data-layout="center"`
|
|
- **THEN** it MUST have `display: flex`, `align-items: center`, and `justify-content: center`
|
|
|
|
#### Scenario: data-layout="stack" creates a vertical column with gap
|
|
- **WHEN** an element has `data-layout="stack"`
|
|
- **THEN** it MUST have `display: flex`, `flex-direction: column`, and a `gap` value using the ASW spacing token
|
|
|
|
### Requirement: Existing grid layouts are preserved
|
|
The existing `data-layout="grid-2"` and `data-layout="grid-3"` patterns from the current framework SHALL continue to work unchanged.
|
|
|
|
#### Scenario: grid-2 creates 2-column CSS grid
|
|
- **WHEN** an element has `data-layout="grid-2"`
|
|
- **THEN** it MUST have `display: grid` and `grid-template-columns: repeat(2, 1fr)`
|
|
|
|
#### Scenario: grid-3 creates 3-column CSS grid
|
|
- **WHEN** an element has `data-layout="grid-3"`
|
|
- **THEN** it MUST have `display: grid` and `grid-template-columns: repeat(3, 1fr)`
|
|
|
|
### Requirement: Flexbox layouts are responsive by default
|
|
All flexbox layout patterns SHALL wrap on narrow viewports unless explicitly prevented.
|
|
|
|
#### Scenario: Row wraps on small screens
|
|
- **WHEN** `data-layout="row"` is displayed on a viewport narrower than 640px
|
|
- **THEN** its items MUST wrap to a new line (`flex-wrap: wrap`)
|