asw/openspec/changes/asw-v01-release/specs/reference-templates/spec.md at a433b935faad7930a28ed3e75e0c9d563c1bff2c

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 KiB

Raw Blame History

ADDED Requirements

Requirement: Templates are standalone HTML files

Each template SHALL be a single .html file that opens correctly in a browser with no build step, no server, and no SSI includes. All CSS references SHALL be relative paths or absolute URLs.

Scenario: Template opens without errors

WHEN any template HTML file is opened in a browser
THEN it MUST display styled content with no JavaScript errors and no missing resource warnings

Requirement: Templates use semantic HTML only

Templates SHALL use semantic HTML elements (<nav>, <main>, <article>, <section>, <header>, <footer>, <aside>) for structure. No <div class="..."> wrapper pattern.

Scenario: Templates contain zero class attributes for layout

WHEN any template is scanned for class= attributes
THEN any class attributes found MUST only be for Prism.js syntax highlighting or other non-layout purposes

Requirement: Templates demonstrate flexbox layouts

Each template SHALL use at least one data-layout flexbox attribute for its primary layout structure, demonstrating the flexbox layout system is functional.

Scenario: Each template uses data-layout for structure

WHEN any template is inspected
THEN it MUST contain at least one data-layout attribute on a structural element

Requirement: Template set covers common page types

The 0.1 release SHALL include at minimum the following templates:

Template	Description
`index.html`	Landing/hero page — full-width hero, feature cards, CTA
`docs.html`	Documentation layout — sidebar nav + main content area
`article.html`	Long-form prose — reading-optimized width, blockquotes, code
`dashboard.html`	Stats/dashboard — stats grid, data display, status indicators
`tasks.html`	Vault/tasks page — task list with data-task attributes

Scenario: All five template files exist

WHEN the templates/ directory is listed
THEN all five template files SHALL be present as .html files

2 KiB Raw Blame History