trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
asw/openspec/changes/asw-v01-release/specs/flexbox-layouts/spec.md
B.A. Baracus a433b935fa
asw-v01: drop OpenProps, native CSS tokens system 
- 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)
2026-06-07 10:43:34 +02:00

2.2 KiB
Raw Permalink Blame History

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)