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>
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
- Go to WordPress Admin → Bricks → Templates
- Click Import
- Select a
.jsonfile from this kit - The template appears in your list with the "BCW —" prefix
Full bundle (ZIP)
- Go to WordPress Admin → Bricks → Templates
- Click Import
- Select
bundles/bcw-starter-kit.zip - All 13 templates import at once
Using a template
- Open any page in Bricks editor
- Click the Templates icon in the toolbar
- Find a "BCW —" template and click Insert
- 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:
- Open the template in Bricks editor
- Go to Settings → Template Settings → Conditions
- Set the condition (e.g., "Entire website", specific page type, or individual page)
- 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/