# 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/`