Spencer
dbbcfa27dd
Design system (design/): - bcw-css-variables.json: color, spacing (--space-xs→2xl), typography (--h1→h6, --text-sm→xl) - bcw-color-palette.json: named swatches referencing CSS variables - bcw-global-classes.json: section-container, section-header, col-3, col-4, features-container, footer-sub-section - design.md: full variable reference and usage guide Templates: - features-3col + features-4col: add global_classes embed + _cssGlobalClasses references - All headers + footers: apply var(--color-primary) background to section elements - footer-columns: add footer-sub-section class to column containers - Remove content-image-left (duplicate of content-image-right with children reversed) - testimonials: gap tweak 12px → 15px on card containers Repo hygiene: - Add .gitignore (Updated_Sections/) - Clear Updated_Sections staging folder Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
146 lines
5.4 KiB
Markdown
146 lines
5.4 KiB
Markdown
# BCW Templates — Bricks Builder Starter Kit
|
||
|
||
A minimal, structural collection of Bricks Builder templates for quick-starting new WordPress projects. Import individual files or the full bundle ZIP.
|
||
|
||
---
|
||
|
||
## Template Index
|
||
|
||
### Sections (8)
|
||
|
||
| File | Description |
|
||
| -------------------------- | ------------------------------------------------------ |
|
||
| `hero-simple.json` | Full-width hero: heading + subtitle + two buttons |
|
||
| `hero-split.json` | 2-column hero: text left, image placeholder right |
|
||
| `features-3col.json` | Icon + heading + text, 3 equal columns |
|
||
| `features-4col.json` | Icon + heading + text, 4 equal columns |
|
||
| `content-image-right.json` | Text left, image placeholder right |
|
||
| `cta-banner.json` | Full-width call-to-action: heading + subtitle + button |
|
||
| `testimonials.json` | 3-column quote cards with name and role |
|
||
| `faq-accordion.json` | Heading + nestable accordion with 5 placeholder items |
|
||
|
||
### Headers (3)
|
||
|
||
| File | Description |
|
||
| ---------------------- | ---------------------------------------------- |
|
||
| `header-minimal.json` | Logo left, navigation right |
|
||
| `header-centered.json` | Logo centered, navigation below |
|
||
| `header-with-cta.json` | Logo left, navigation center, CTA button right |
|
||
|
||
### Footers (2)
|
||
|
||
| File | Description |
|
||
| --------------------- | ------------------------------------------------ |
|
||
| `footer-minimal.json` | Logo + navigation + copyright, single row |
|
||
| `footer-columns.json` | 3 columns: about/logo, quick links, contact info |
|
||
|
||
---
|
||
|
||
## How to Import
|
||
|
||
### Individual templates
|
||
|
||
1. Go to **WordPress Admin → Bricks → Templates**
|
||
2. Click **Import**
|
||
3. Select a `.json` file from this kit
|
||
4. The template appears in your list with the "BCW —" prefix
|
||
|
||
### Full bundle (ZIP)
|
||
|
||
1. Go to **WordPress Admin → Bricks → Templates**
|
||
2. Click **Import**
|
||
3. Select `bundles/bcw-starter-kit.zip`
|
||
4. All 13 templates import at once
|
||
|
||
### Using a template
|
||
|
||
1. Open any page in Bricks editor
|
||
2. Click the **Templates** icon in the toolbar
|
||
3. Find a "BCW —" template and click **Insert**
|
||
4. The section drops into your canvas — edit placeholder text and images
|
||
|
||
---
|
||
|
||
## Header & Footer: Conditions
|
||
|
||
After importing a header or footer template, Bricks automatically applies the **first published** header/footer sitewide. To control which header or footer appears on which pages:
|
||
|
||
1. Open the template in Bricks editor
|
||
2. Go to **Settings → Template Settings → Conditions**
|
||
3. Set the condition (e.g., "Entire website", specific page type, or individual page)
|
||
4. Publish
|
||
|
||
If you have multiple headers (e.g., one default, one for landing pages), set conditions on each to prevent conflicts.
|
||
|
||
---
|
||
|
||
## Design System
|
||
|
||
The `design/` folder contains three importable files that give every project a consistent color system and shared layout classes. **Import these first**, before any templates.
|
||
|
||
See `design/design.md` for the full variable reference and usage guide.
|
||
|
||
| File | Import location |
|
||
| ------------------------- | -------------------------------------------------------- |
|
||
| `bcw-css-variables.json` | Bricks → Settings → Custom CSS → Variables → Import |
|
||
| `bcw-color-palette.json` | Bricks → Settings → Color Palettes → Import |
|
||
| `bcw-global-classes.json` | Bricks → Settings → Global Classes → Import |
|
||
|
||
Before importing, replace the grey placeholder hex values in `bcw-css-variables.json` with the client's brand colors. Everything referencing `var(--color-primary)` updates automatically.
|
||
|
||
---
|
||
|
||
## Page Recipes
|
||
|
||
Since sections are the reusable building blocks, a "page" is just sections stacked in order. Common recipes:
|
||
|
||
**Home page**
|
||
→ `hero-simple` or `hero-split`
|
||
→ `features-3col` or `features-4col`
|
||
→ `content-image-right`
|
||
→ `testimonials`
|
||
→ `cta-banner`
|
||
|
||
**Services page**
|
||
→ `hero-simple` (brief intro)
|
||
→ `features-4col` (services overview)
|
||
→ `content-image-right` (detail section)
|
||
→ `cta-banner`
|
||
|
||
**About page**
|
||
→ `hero-simple`
|
||
→ `content-image-right` (story/mission)
|
||
→ `testimonials`
|
||
→ `cta-banner`
|
||
|
||
**Contact / FAQ page**
|
||
→ `hero-simple` (brief)
|
||
→ `faq-accordion`
|
||
→ `cta-banner`
|
||
|
||
---
|
||
|
||
## Design Philosophy
|
||
|
||
All templates are **structural boilerplates** — no baked-in colors, font sizes, or decorative styling. Drop them in, fill with your content, and your Global Styles and design system variables handle the rest.
|
||
|
||
**What's included per template:**
|
||
|
||
- Flex layout direction, alignment, and gap on containers
|
||
- Heading tags (h1–h4) for semantic structure
|
||
- Placeholder text on all text elements
|
||
- Labels on outer elements for builder readability
|
||
- Empty image elements (Bricks shows a placeholder in the editor)
|
||
- `var(--color-primary)` background on all header and footer section elements
|
||
- Global class references on column templates (`features-3col`, `features-4col`, `footer-columns`)
|
||
|
||
---
|
||
|
||
## Bundles
|
||
|
||
After manual verification, export all templates from Bricks and save the ZIP to `bundles/bcw-starter-kit.zip` for easy one-click import on future projects.
|
||
|
||
## Further Research
|
||
|
||
Further research has been conducted, and is available in `./.claude/research/`
|