Word-style hierarchical documents: numbered chapters and sub-chapters (1, 1.1, 1.1.1 …) each with a heading and body text. Numbers are generated automatically from the nesting — reorder or insert a section and the numbering follows.
Auto-numbered (default)
Introduction
This framework provides a compact, data-focused component system for building admin interfaces. The sections below describe scope and goals.
Scope
Covers layout, forms, data display and feedback components. Numbers here are generated by CSS, not written by hand.
Goals
Predictable markup, one canonical structure per component, and runtime theming.
Rigidity over flexibility
A single blessed shape per slot so code generators emit one DOM tree.
Two-layer tokens
SCSS variables for structure, CSS custom properties for runtime theming.
Architecture
The build single-sources its foundation from pure-css and layers admin components on top.
Component system
Around 67 pa-* components across nine categories.
Manual numbering
Add pa-document--manual and author the number in a pa-document__number span. Use this for appendices or non-decimal schemes (A, A.1, …). The auto engine is switched off entirely, so nothing collides.
AAppendix
Supplementary material outside the main numbering sequence.
A.1Glossary
Definitions of terms used throughout the document.
A.2References
External sources and further reading.
Compact density
pa-document--compact tightens the space between sections for dense reference docs.
Getting started
Install the package and link the stylesheet.
Install
npm install @keenmate/pure-admin-core
Link CSS
Reference dist/css/main.css or a theme build.
Configuration
Override SCSS variables before import, or set CSS variables at runtime.
Flush (no indentation)
pa-document--flush removes the per-level indentation; the number chain alone conveys the hierarchy.
Requirements
Functional and non-functional requirements.
Performance
Sub-second first paint on the reference dashboard.
Budget
CSS under 600 kB uncompressed.
Accessibility
WCAG 2.1 AA across all components.
Real-world example — Customer discount program
A policy document: numbered chapters and sub-clauses, with a data table sitting inside chapter 3. The table is just ordinary content within a pa-document__section — it does not affect the numbering of the surrounding clauses.
Purpose
This policy defines how volume-based discounts are calculated and applied to eligible business customers. It governs standard discounts only; individually negotiated contracts take precedence where they exist.
Eligibility
A customer must satisfy every condition below to qualify for a discount tier.
Account standing
The account must be active, verified, and free of overdue invoices older than 30 days at the time the tier is evaluated.
Order history
Eligibility is based on the trailing twelve months of completed, non-refunded orders. New accounts start at the Bronze tier once their first order is fulfilled.
Discount tiers
Tiers are determined by trailing-twelve-month spend. The discount is applied to the net order subtotal before tax and shipping.
| Tier | Annual spend (trailing 12 mo) | Standard discount | Free shipping | Dedicated support |
|---|---|---|---|---|
| Bronze | €0 – €4,999 | 3% | — | — |
| Silver | €5,000 – €19,999 | 7% | ✓ | — |
| Gold | €20,000 – €49,999 | 12% | ✓ | Business hours |
| Platinum | €50,000+ | 18% | ✓ | 24/7 |
Tier assignment
Tiers are recalculated on the first day of each month. An upgrade takes effect immediately; a downgrade is deferred by one full billing cycle so customers are never dropped mid-month.
Combining discounts
Tier discounts do not stack with promotional coupon codes. When both apply, the customer receives whichever single discount is larger.
Seasonal campaigns
During advertised seasonal campaigns, the campaign rate replaces the tier rate for the campaign period only, then reverts automatically.
Exclusions
The following are never discounted, regardless of tier.
Non-qualifying products
Gift cards, third-party marketplace items, and services billed by a partner are excluded from the discountable subtotal.
Chargebacks and abuse
Accounts with an open chargeback dispute are suspended from the program until the dispute is resolved.
Review and adjustment
These thresholds are reviewed annually. The company may adjust rates or bands with 30 days' notice to affected customers.
CSS Classes Reference
Structure
pa-document- Document root; establishes the numbering contextpa-document__section- A section; nest sections directly to build the hierarchypa-document__heading- Section heading; carries the auto-generated numberpa-document__text- Body paragraph beneath a headingpa-document__number- Author-written number (manual mode only)
Modifiers
pa-document--manual- Disable auto counters; author numbers viapa-document__numberpa-document--compact- Tighter spacing between sectionspa-document--spacious- Looser spacing between sectionspa-document--flush- Remove per-level indentation
Runtime tokens (CSS variables)
--pa-document-indent- Indentation added per nesting level--pa-document-section-gap- Vertical rhythm between sections--pa-document-number-color- Colour of the number (defaults to accent)--pa-document-number-gap- Space between the number and heading text
Auto numbering is generated with per-depth CSS counters up to six levels deep — enough for admin documentation (Word itself caps at nine). Sections nested deeper simply stop showing a number.