j.foucher
6f62082dc4
Initial child theme structure inheriting from Bricks parent. Token-driven, RGPD-native, mobile-first foundation ready for component and template work. What's in this commit - style.css: WP theme metadata (Template: bricks, v0.1.0) - functions.php: enqueue cascade tokens -> utilities -> components, defer-loaded main.js, font preload, theme support, image sizes (av-hero 2400x1350, av-card 800x600, av-thumb 400x300), Gutenberg default styles dequeued - theme.json: Gutenberg color/typo palette mirroring tokens - assets/css/tokens.css: full design system per Design Handoff section 2 (brand colors, neutrals, semantics, type scale + line-heights, 8pt spacing, radii, shadows, z-index, motion, prefers-reduced-motion) - assets/css/utilities.css: modern reset + .av-container, .av-skip-link, .av-sr-only, .av-stack, .av-section helpers, opinionated heading scale - assets/css/components.css: index of planned components + buttons (5 variants x 4 sizes per Design Handoff section 3.1) and links - assets/js/main.js: vanilla skeleton with header scroll, IntersectionObserver reveal, count-up, mobile drawer; respects prefers-reduced-motion - inc/cpt.php: register_post_type case_study (slug /customers/) + scenario (slug /scenarios/) + shared 'industry' taxonomy - inc/seo.php: Organization JSON-LD on home; placeholders for Product, Article, FAQPage, BreadcrumbList - assets/fonts/: Inter Variable + Italic WOFF2 self-hosted (RGPD; no Google Fonts CDN). Inter Display @font-face commented — Inter 4+ uses opsz axis from the same file. Out of scope (intentionally deferred) - Component fills: cards, forms, navigation, alerts, modals, tabs (placeholders) - Page templates: home and beyond - Bricks JSON template exports - Schema.org Product / Article / FAQPage / BreadcrumbList implementations Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
54 lines
2.4 KiB
Markdown
54 lines
2.4 KiB
Markdown
# Asterion Bricks — Child theme
|
|
|
|
Custom WordPress child theme for **asterionvr.com**, built on top of [Bricks Builder](https://bricksbuilder.io). Tactical-cinematic design system for the PROSERVE XR training platform.
|
|
|
|
## Structure
|
|
|
|
```
|
|
asterion-bricks/
|
|
├── style.css # WP theme metadata only (CSS lives in assets/css/)
|
|
├── functions.php # enqueues, theme support, includes
|
|
├── theme.json # Gutenberg color/typo palette
|
|
├── assets/
|
|
│ ├── css/
|
|
│ │ ├── tokens.css # design tokens — source of truth
|
|
│ │ ├── utilities.css # CSS reset + utility classes (.av-container, etc.)
|
|
│ │ └── components.css # component styles (buttons, cards, header, footer…)
|
|
│ ├── js/
|
|
│ │ └── main.js # vanilla JS, defer-loaded
|
|
│ ├── fonts/ # self-hosted Inter (RGPD)
|
|
│ └── img/ # static visuals
|
|
├── templates/ # Bricks template JSON exports (versioned)
|
|
└── inc/
|
|
├── cpt.php # custom post types: case_study, scenario
|
|
└── seo.php # Schema.org JSON-LD overrides
|
|
```
|
|
|
|
## Conventions
|
|
|
|
- **CSS prefix** : `av-` (asterion-vr) on every custom selector to avoid collision with Bricks classes.
|
|
- **BEM-light** naming : `.av-card`, `.av-card--feature`, `.av-card__icon`, `.av-card.is-loading`.
|
|
- **Zero hardcoded values** — every color, spacing, radius and duration goes through `tokens.css`.
|
|
- **JS** : vanilla, defer-loaded, prefer `IntersectionObserver` over scroll listeners.
|
|
- **A11y** : keyboard reachable, `:focus-visible` outline, ARIA where needed, contrast ≥ 4.5:1, `prefers-reduced-motion` respected.
|
|
|
|
## Activation
|
|
|
|
1. Ensure Bricks parent is installed at `wp-content/themes/bricks/`.
|
|
2. WP Admin → Appearance → Themes → activate **Asterion Bricks**.
|
|
|
|
## Performance budget (per BRIEF section 9)
|
|
|
|
| Asset | Budget |
|
|
|-----------------|-------------------------------|
|
|
| HTML initial | < 100 KB gzipped |
|
|
| CSS total | < 50 KB gzipped |
|
|
| JS initial | < 200 KB gzipped |
|
|
| Hero video | < 2 MB |
|
|
| Hero poster | < 150 KB |
|
|
| LCP / CLS / TBT | < 2.5s / < 0.1 / < 200ms |
|
|
|
|
## License
|
|
|
|
GPL v2 or later. Same as WordPress core.
|