From dbbcfa27dd4515e82a0bb3d75f22e1a3165f692c Mon Sep 17 00:00:00 2001 From: Spencer Date: Fri, 27 Feb 2026 15:42:54 -0600 Subject: [PATCH] Add design system, audit sections, apply global classes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .gitignore | 1 + README.md | 71 +++++++---- TODO.md | 8 ++ design/bcw-color-palette.json | 77 ++++++++++++ design/bcw-css-variables.json | 198 +++++++++++++++++++++++++++++++ design/bcw-global-classes.json | 74 ++++++++++++ design/design.md | 109 +++++++++++++++++ footers/footer-columns.json | 28 ++++- footers/footer-minimal.json | 8 +- headers/header-centered.json | 8 +- headers/header-minimal.json | 11 +- headers/header-with-cta.json | 11 +- sections/content-image-left.json | 96 --------------- sections/features-3col.json | 27 ++++- sections/features-4col.json | 30 ++++- sections/testimonials.json | 6 +- 16 files changed, 621 insertions(+), 142 deletions(-) create mode 100644 .gitignore create mode 100644 TODO.md create mode 100644 design/bcw-color-palette.json create mode 100644 design/bcw-css-variables.json create mode 100644 design/bcw-global-classes.json create mode 100644 design/design.md delete mode 100644 sections/content-image-left.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7b6aa86 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +Updated_Sections/ diff --git a/README.md b/README.md index e6fe06c..2302eb2 100644 --- a/README.md +++ b/README.md @@ -6,30 +6,32 @@ A minimal, structural collection of Bricks Builder templates for quick-starting ## Template Index -### Sections (9) -| 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 | -| `content-image-left.json` | Image placeholder left, text 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 | +### 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 | + +| 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 | + +| File | Description | +| --------------------- | ------------------------------------------------ | +| `footer-minimal.json` | Logo + navigation + copyright, single row | | `footer-columns.json` | 3 columns: about/logo, quick links, contact info | --- @@ -37,18 +39,21 @@ A minimal, structural collection of Bricks Builder templates for quick-starting ## 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 14 templates import at once +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** @@ -69,6 +74,22 @@ If you have multiple headers (e.g., one default, one for landing pages), set con --- +## 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: @@ -84,7 +105,6 @@ Since sections are the reusable building blocks, a "page" is just sections stack → `hero-simple` (brief intro) → `features-4col` (services overview) → `content-image-right` (detail section) -→ `content-image-left` (second detail section) → `cta-banner` **About page** @@ -102,17 +122,24 @@ Since sections are the reusable building blocks, a "page" is just sections stack ## Design Philosophy -All templates are **structural only** — no baked-in colors, font sizes, or spacing. Bricks theme defaults and your Global Styles apply. This keeps the templates neutral and lets your brand come through without fighting overrides. +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/` diff --git a/TODO.md b/TODO.md new file mode 100644 index 0000000..98f83e9 --- /dev/null +++ b/TODO.md @@ -0,0 +1,8 @@ +TODO: + +- Updated sections with updated sections found at ./Updated_Sections +- Institute some Global CSS Variables for color (Primary, Secondary, Tertiary) + - Assign primary color as background for header & footer + - Assign colors throughout the site + - Maybe make an importable theme style for Bricks? +- Also build a Global Classes import sheet, for sharing classes between 3 row containers, 4 row containers, footer sub section containers, etc. diff --git a/design/bcw-color-palette.json b/design/bcw-color-palette.json new file mode 100644 index 0000000..2d7799f --- /dev/null +++ b/design/bcw-color-palette.json @@ -0,0 +1,77 @@ +{ + "id": "bcwpal", + "name": "BCW", + "default": false, + "colors": [ + { + "id": "bcwc01", + "name": "primary", + "raw": "var(--color-primary)" + }, + { + "id": "bcwc02", + "name": "primary-light", + "raw": "var(--color-primary-light)" + }, + { + "id": "bcwc03", + "name": "primary-dark", + "raw": "var(--color-primary-dark)" + }, + { + "id": "bcwc04", + "name": "secondary", + "raw": "var(--color-secondary)" + }, + { + "id": "bcwc05", + "name": "secondary-light", + "raw": "var(--color-secondary-light)" + }, + { + "id": "bcwc06", + "name": "secondary-dark", + "raw": "var(--color-secondary-dark)" + }, + { + "id": "bcwc07", + "name": "tertiary", + "raw": "var(--color-tertiary)" + }, + { + "id": "bcwc08", + "name": "tertiary-light", + "raw": "var(--color-tertiary-light)" + }, + { + "id": "bcwc09", + "name": "tertiary-dark", + "raw": "var(--color-tertiary-dark)" + }, + { + "id": "bcwc10", + "name": "text", + "raw": "var(--color-text)" + }, + { + "id": "bcwc11", + "name": "heading", + "raw": "var(--color-heading)" + }, + { + "id": "bcwc12", + "name": "bg", + "raw": "var(--color-bg)" + }, + { + "id": "bcwc13", + "name": "bg-alt", + "raw": "var(--color-bg-alt)" + }, + { + "id": "bcwc14", + "name": "white", + "raw": "var(--color-white)" + } + ] +} diff --git a/design/bcw-css-variables.json b/design/bcw-css-variables.json new file mode 100644 index 0000000..1b46911 --- /dev/null +++ b/design/bcw-css-variables.json @@ -0,0 +1,198 @@ +{ + "categories": [ + { + "id": "bcwcol", + "name": "Colors" + }, + { + "id": "bcwspc", + "name": "Spacing" + }, + { + "id": "bcwtyp", + "name": "Typography" + } + ], + "variables": [ + { + "id": "bcwv01", + "name": "color-primary", + "value": "#374151", + "category": "bcwcol" + }, + { + "id": "bcwv02", + "name": "color-primary-light", + "value": "#9CA3AF", + "category": "bcwcol" + }, + { + "id": "bcwv03", + "name": "color-primary-dark", + "value": "#1F2937", + "category": "bcwcol" + }, + { + "id": "bcwv04", + "name": "color-secondary", + "value": "#6B7280", + "category": "bcwcol" + }, + { + "id": "bcwv05", + "name": "color-secondary-light", + "value": "#D1D5DB", + "category": "bcwcol" + }, + { + "id": "bcwv06", + "name": "color-secondary-dark", + "value": "#4B5563", + "category": "bcwcol" + }, + { + "id": "bcwv07", + "name": "color-tertiary", + "value": "#F3F4F6", + "category": "bcwcol" + }, + { + "id": "bcwv08", + "name": "color-tertiary-light", + "value": "#FFFFFF", + "category": "bcwcol" + }, + { + "id": "bcwv09", + "name": "color-tertiary-dark", + "value": "#E5E7EB", + "category": "bcwcol" + }, + { + "id": "bcwv10", + "name": "color-text", + "value": "#374151", + "category": "bcwcol" + }, + { + "id": "bcwv11", + "name": "color-heading", + "value": "#111827", + "category": "bcwcol" + }, + { + "id": "bcwv12", + "name": "color-bg", + "value": "#FFFFFF", + "category": "bcwcol" + }, + { + "id": "bcwv13", + "name": "color-bg-alt", + "value": "#F9FAFB", + "category": "bcwcol" + }, + { + "id": "bcwv14", + "name": "color-white", + "value": "#FFFFFF", + "category": "bcwcol" + }, + { + "id": "bcwv15", + "name": "space-xs", + "value": "8px", + "category": "bcwspc" + }, + { + "id": "bcwv16", + "name": "space-sm", + "value": "16px", + "category": "bcwspc" + }, + { + "id": "bcwv17", + "name": "space-md", + "value": "24px", + "category": "bcwspc" + }, + { + "id": "bcwv18", + "name": "space-lg", + "value": "40px", + "category": "bcwspc" + }, + { + "id": "bcwv19", + "name": "space-xl", + "value": "64px", + "category": "bcwspc" + }, + { + "id": "bcwv20", + "name": "space-2xl", + "value": "96px", + "category": "bcwspc" + }, + { + "id": "bcwv21", + "name": "h1", + "value": "3rem", + "category": "bcwtyp" + }, + { + "id": "bcwv22", + "name": "h2", + "value": "2.25rem", + "category": "bcwtyp" + }, + { + "id": "bcwv23", + "name": "h3", + "value": "1.75rem", + "category": "bcwtyp" + }, + { + "id": "bcwv24", + "name": "h4", + "value": "1.25rem", + "category": "bcwtyp" + }, + { + "id": "bcwv25", + "name": "h5", + "value": "1.125rem", + "category": "bcwtyp" + }, + { + "id": "bcwv26", + "name": "h6", + "value": "1rem", + "category": "bcwtyp" + }, + { + "id": "bcwv27", + "name": "text-sm", + "value": "0.875rem", + "category": "bcwtyp" + }, + { + "id": "bcwv28", + "name": "text-base", + "value": "1rem", + "category": "bcwtyp" + }, + { + "id": "bcwv29", + "name": "text-lg", + "value": "1.125rem", + "category": "bcwtyp" + }, + { + "id": "bcwv30", + "name": "text-xl", + "value": "1.25rem", + "category": "bcwtyp" + } + ] +} diff --git a/design/bcw-global-classes.json b/design/bcw-global-classes.json new file mode 100644 index 0000000..664d71e --- /dev/null +++ b/design/bcw-global-classes.json @@ -0,0 +1,74 @@ +[ + { + "id": "features-container", + "name": "features-container", + "settings": { + "_typography": { + "text-align": "center" + }, + "_rowGap": "10px" + }, + "modified": 1772146285, + "user_id": 2 + }, + { + "id": "footer-sub-section", + "name": "footer-sub-section", + "settings": { + "_rowGap": "15px" + }, + "modified": 1772146505, + "user_id": 2 + }, + { + "id": "section-container", + "name": "section-container", + "settings": { + "_direction": "column", + "_gap": "40px", + "_margin": { + "top": "15", + "bottom": "15" + } + }, + "modified": 1772146505, + "user_id": 2 + }, + { + "id": "section-header", + "name": "section-header", + "settings": { + "_direction": "column", + "_alignItems": "center", + "_gap": "16px" + }, + "modified": 1772146505, + "user_id": 2 + }, + { + "id": "col-3", + "name": "col-3", + "settings": { + "_direction": "row", + "_alignItems": "flex-start", + "_justifyContent": "center", + "_gap": "32px", + "_rowGap:mobile_portrait": "15px" + }, + "modified": 1772146505, + "user_id": 2 + }, + { + "id": "col-4", + "name": "col-4", + "settings": { + "_direction": "row", + "_alignItems": "flex-start", + "_justifyContent": "center", + "_gap": "24px", + "_rowGap:mobile_portrait": "15px" + }, + "modified": 1772146505, + "user_id": 2 + } +] diff --git a/design/design.md b/design/design.md new file mode 100644 index 0000000..6d93a14 --- /dev/null +++ b/design/design.md @@ -0,0 +1,109 @@ +# BCW Design System Reference + +Three importable files. **Import in this order** before any templates: + +1. `bcw-css-variables.json` — defines all custom properties +2. `bcw-color-palette.json` — adds named swatches to the Bricks color picker +3. `bcw-global-classes.json` — adds shared layout classes + +--- + +## How to Import + +| File | Where to import | +| ------------------------- | -------------------------------------------------------- | +| `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 | + +--- + +## CSS Variables + +All variables follow the pattern `var(--variable-name)`. + +### Colors + +Replace the placeholder grey hex values with the client's brand colors before importing. + +| Variable | Default | Purpose | +| ------------------------- | ---------- | ------------------------------------------ | +| `--color-primary` | `#374151` | Main brand color. Used on headers, footers, and primary buttons. | +| `--color-primary-light` | `#9CA3AF` | Lighter variant. Use for hover states, borders, or secondary UI. | +| `--color-primary-dark` | `#1F2937` | Darker variant. Use for active states or deep accents. | +| `--color-secondary` | `#6B7280` | Supporting brand color. | +| `--color-secondary-light` | `#D1D5DB` | Light secondary. Good for dividers, subtle backgrounds. | +| `--color-secondary-dark` | `#4B5563` | Dark secondary. Use for secondary hover/active. | +| `--color-tertiary` | `#F3F4F6` | Accent or background fill color. | +| `--color-tertiary-light` | `#FFFFFF` | Lightest tertiary. Usually pure white. | +| `--color-tertiary-dark` | `#E5E7EB` | Slightly deeper tertiary. Card backgrounds, borders. | +| `--color-text` | `#374151` | Default body copy color. | +| `--color-heading` | `#111827` | Default heading color. | +| `--color-bg` | `#FFFFFF` | Main page background. | +| `--color-bg-alt` | `#F9FAFB` | Alternate section background (off-white). | +| `--color-white` | `#FFFFFF` | Forced white — useful for text on dark backgrounds. | + +**Usage example in Bricks:** +Set any color field to `var(--color-primary)`. When you rebrand, update the variable once and every element using it updates automatically. + +--- + +### Spacing + +A simple scale from extra-small to 2x-large. Use these in gap, padding, and margin fields. + +| Variable | Value | Typical use | +| -------------- | ------- | ------------------------------------------------ | +| `--space-xs` | `8px` | Tight internal gaps (icon to label, etc.) | +| `--space-sm` | `16px` | Standard element gaps within a block | +| `--space-md` | `24px` | Medium spacing — between content blocks | +| `--space-lg` | `40px` | Section internal gap (header to content row) | +| `--space-xl` | `64px` | Section top/bottom padding | +| `--space-2xl` | `96px` | Hero or large feature section padding | + +**Usage example in Bricks:** +In any gap or padding field, type `var(--space-lg)` instead of a fixed pixel value. + +--- + +### Typography + +Heading and text size scale. Apply these in the font-size field of any text element or via Global Classes. + +| Variable | Value | Purpose | +| -------------- | ----------- | -------------------- | +| `--h1` | `3rem` | Page-level heading | +| `--h2` | `2.25rem` | Section heading | +| `--h3` | `1.75rem` | Sub-section heading | +| `--h4` | `1.25rem` | Card or block heading| +| `--h5` | `1.125rem` | Minor heading | +| `--h6` | `1rem` | Small label heading | +| `--text-sm` | `0.875rem` | Captions, footnotes | +| `--text-base` | `1rem` | Body copy (default) | +| `--text-lg` | `1.125rem` | Lead paragraph | +| `--text-xl` | `1.25rem` | Large intro text | + +--- + +## Color Palette + +`bcw-color-palette.json` imports a "BCW" palette into the Bricks color picker. Every swatch references a CSS variable — so updating a variable updates the swatch automatically. + +Swatches: `primary`, `primary-light`, `primary-dark`, `secondary`, `secondary-light`, `secondary-dark`, `tertiary`, `tertiary-light`, `tertiary-dark`, `text`, `heading`, `bg`, `bg-alt`, `white` + +--- + +## Global Classes + +`bcw-global-classes.json` imports shared layout classes. Apply them to container elements in the Bricks panel under **CSS → Classes**. + +| Class | Apply to | What it sets | +| -------------------- | --------------------------------- | --------------------------------------------------------- | +| `section-container` | Outermost section container | `flex-direction: column`, `gap: 40px`, `margin: 15px top/bottom` | +| `section-header` | Heading + subtitle block | `flex-direction: column`, `align-items: center`, `gap: 16px` | +| `col-3` | 3-column row container | `flex-direction: row`, centered, `gap: 32px`, stacks on mobile | +| `col-4` | 4-column row container | `flex-direction: row`, centered, `gap: 24px`, stacks on mobile | +| `features-container` | Individual feature column (3 or 4 col) | `text-align: center`, `row-gap: 10px` | +| `footer-sub-section` | Footer column containers | `row-gap: 15px` | + +**Note:** `features-container` and `footer-sub-section` are also embedded in the `features-3col`, `features-4col`, and `footer-columns` templates — importing those templates will bring these classes along automatically. diff --git a/footers/footer-columns.json b/footers/footer-columns.json index 268bb6c..48abc1f 100644 --- a/footers/footer-columns.json +++ b/footers/footer-columns.json @@ -2,13 +2,30 @@ "title": "BCW — Footer Columns", "type": "footer", "templateType": "footer", + "global_classes": [ + { + "id": "footer-sub-section", + "name": "footer-sub-section", + "settings": { + "_rowGap": "15px" + }, + "modified": 1772146505, + "user_id": 2 + } + ], "footer": [ { "id": "sec001", "name": "section", "parent": 0, "children": ["con001"], - "settings": [], + "settings": { + "_background": { + "color": { + "raw": "var(--color-primary)" + } + } + }, "label": "Footer Columns" }, { @@ -31,7 +48,8 @@ "settings": { "_direction": "column", "_alignItems": "flex-start", - "_gap": "16px" + "_gap": "16px", + "_cssGlobalClasses": ["footer-sub-section"] }, "label": "About Column" }, @@ -63,7 +81,8 @@ "settings": { "_direction": "column", "_alignItems": "flex-start", - "_gap": "16px" + "_gap": "16px", + "_cssGlobalClasses": ["footer-sub-section"] }, "label": "Links Column" }, @@ -92,7 +111,8 @@ "settings": { "_direction": "column", "_alignItems": "flex-start", - "_gap": "12px" + "_gap": "12px", + "_cssGlobalClasses": ["footer-sub-section"] }, "label": "Contact Column" }, diff --git a/footers/footer-minimal.json b/footers/footer-minimal.json index 72411d4..faa42e0 100644 --- a/footers/footer-minimal.json +++ b/footers/footer-minimal.json @@ -8,7 +8,13 @@ "name": "section", "parent": 0, "children": ["con001"], - "settings": [], + "settings": { + "_background": { + "color": { + "raw": "var(--color-primary)" + } + } + }, "label": "Footer Minimal" }, { diff --git a/headers/header-centered.json b/headers/header-centered.json index eadf641..4807101 100644 --- a/headers/header-centered.json +++ b/headers/header-centered.json @@ -8,7 +8,13 @@ "name": "section", "parent": 0, "children": ["con001"], - "settings": [], + "settings": { + "_background": { + "color": { + "raw": "var(--color-primary)" + } + } + }, "label": "Header Centered" }, { diff --git a/headers/header-minimal.json b/headers/header-minimal.json index d7cdd6b..038bd9d 100644 --- a/headers/header-minimal.json +++ b/headers/header-minimal.json @@ -8,7 +8,13 @@ "name": "section", "parent": 0, "children": ["con001"], - "settings": [], + "settings": { + "_background": { + "color": { + "raw": "var(--color-primary)" + } + } + }, "label": "Header Minimal" }, { @@ -19,7 +25,8 @@ "settings": { "_direction": "row", "_alignItems": "center", - "_justifyContent": "space-between" + "_justifyContent": "space-between", + "_gap": "15px" } }, { diff --git a/headers/header-with-cta.json b/headers/header-with-cta.json index 371013b..33beae9 100644 --- a/headers/header-with-cta.json +++ b/headers/header-with-cta.json @@ -8,7 +8,13 @@ "name": "section", "parent": 0, "children": ["con001"], - "settings": [], + "settings": { + "_background": { + "color": { + "raw": "var(--color-primary)" + } + } + }, "label": "Header With CTA" }, { @@ -19,7 +25,8 @@ "settings": { "_direction": "row", "_alignItems": "center", - "_justifyContent": "space-between" + "_justifyContent": "space-between", + "_gap": "15px" } }, { diff --git a/sections/content-image-left.json b/sections/content-image-left.json deleted file mode 100644 index 843668f..0000000 --- a/sections/content-image-left.json +++ /dev/null @@ -1,96 +0,0 @@ -{ - "title": "BCW — Content Image Left", - "type": "section", - "templateType": "section", - "content": [ - { - "id": "con001", - "name": "container", - "parent": 0, - "children": ["imgcol", "con002"], - "settings": { - "_direction": "row", - "_alignItems": "center", - "_justifyContent": "space-between", - "_gap": "48px", - "_margin": { - "top": "15", - "bottom": "15" - } - }, - "label": "Content Image Left" - }, - { - "id": "imgcol", - "name": "container", - "parent": "con001", - "children": ["img001"], - "settings": { - "_direction": "row", - "_alignItems": "center", - "_justifyContent": "center", - "_gap": "24px", - "_width": "50%" - }, - "label": "Image Column" - }, - { - "id": "img001", - "name": "image", - "parent": "imgcol", - "children": [], - "settings": { - "_width": "100%", - "image": { - "url": "https://picsum.photos/600", - "external": true, - "filename": "600" - } - }, - "label": "Section Image" - }, - { - "id": "con002", - "name": "container", - "parent": "con001", - "children": ["hdg001", "txt001", "btn001"], - "settings": { - "_direction": "column", - "_alignItems": "flex-start", - "_gap": "24px", - "_width": "50%", - "_rowGap": "15" - }, - "label": "Text Column" - }, - { - "id": "hdg001", - "name": "heading", - "parent": "con002", - "children": [], - "settings": { - "tag": "h2", - "text": "Section Heading Goes Here" - } - }, - { - "id": "txt001", - "name": "text-basic", - "parent": "con002", - "children": [], - "settings": { - "text": "Use this area to describe your product, service, or concept in detail. Two to four sentences works well here. Focus on benefits and outcomes for your reader." - } - }, - { - "id": "btn001", - "name": "button", - "parent": "con002", - "children": [], - "settings": { - "text": "Learn More", - "style": "primary" - } - } - ] -} diff --git a/sections/features-3col.json b/sections/features-3col.json index 2e18265..06feec5 100644 --- a/sections/features-3col.json +++ b/sections/features-3col.json @@ -2,6 +2,20 @@ "title": "BCW — Features 3 Column", "type": "section", "templateType": "section", + "global_classes": [ + { + "id": "features-container", + "name": "features-container", + "settings": { + "_typography": { + "text-align": "center" + }, + "_rowGap": "10px" + }, + "modified": 1772146285, + "user_id": 2 + } + ], "content": [ { "id": "sec001", @@ -58,8 +72,8 @@ "_direction": "row", "_alignItems": "flex-start", "_justifyContent": "center", - - "_gap": "32px" + "_gap": "32px", + "_rowGap:mobile_portrait": "15px" }, "label": "Features Row" }, @@ -71,7 +85,8 @@ "settings": { "_direction": "column", "_alignItems": "center", - "_gap": "12px" + "_gap": "15px", + "_cssGlobalClasses": ["features-container"] }, "label": "Feature One" }, @@ -109,7 +124,8 @@ "settings": { "_direction": "column", "_alignItems": "center", - "_gap": "12px" + "_gap": "15px", + "_cssGlobalClasses": ["features-container"] }, "label": "Feature Two" }, @@ -147,7 +163,8 @@ "settings": { "_direction": "column", "_alignItems": "center", - "_gap": "12px" + "_gap": "15px", + "_cssGlobalClasses": ["features-container"] }, "label": "Feature Three" }, diff --git a/sections/features-4col.json b/sections/features-4col.json index 85e9dae..d29dfec 100644 --- a/sections/features-4col.json +++ b/sections/features-4col.json @@ -2,6 +2,20 @@ "title": "BCW — Features 4 Column", "type": "section", "templateType": "section", + "global_classes": [ + { + "id": "features-container", + "name": "features-container", + "settings": { + "_typography": { + "text-align": "center" + }, + "_rowGap": "10px" + }, + "modified": 1772146285, + "user_id": 2 + } + ], "content": [ { "id": "sec001", @@ -58,8 +72,8 @@ "_direction": "row", "_alignItems": "flex-start", "_justifyContent": "center", - - "_gap": "32px" + "_gap": "24px", + "_rowGap:mobile_portrait": "15px" }, "label": "Features Row" }, @@ -71,7 +85,8 @@ "settings": { "_direction": "column", "_alignItems": "center", - "_gap": "12px" + "_gap": "15px", + "_cssGlobalClasses": ["features-container"] }, "label": "Feature One" }, @@ -109,7 +124,8 @@ "settings": { "_direction": "column", "_alignItems": "center", - "_gap": "12px" + "_gap": "15px", + "_cssGlobalClasses": ["features-container"] }, "label": "Feature Two" }, @@ -147,7 +163,8 @@ "settings": { "_direction": "column", "_alignItems": "center", - "_gap": "12px" + "_gap": "15px", + "_cssGlobalClasses": ["features-container"] }, "label": "Feature Three" }, @@ -185,7 +202,8 @@ "settings": { "_direction": "column", "_alignItems": "center", - "_gap": "12px" + "_gap": "15px", + "_cssGlobalClasses": ["features-container"] }, "label": "Feature Four" }, diff --git a/sections/testimonials.json b/sections/testimonials.json index 512945a..b76c503 100644 --- a/sections/testimonials.json +++ b/sections/testimonials.json @@ -71,7 +71,7 @@ "settings": { "_direction": "column", "_alignItems": "flex-start", - "_gap": "12px" + "_gap": "15px" }, "label": "Testimonial One" }, @@ -111,7 +111,7 @@ "settings": { "_direction": "column", "_alignItems": "flex-start", - "_gap": "12px" + "_gap": "15px" }, "label": "Testimonial Two" }, @@ -151,7 +151,7 @@ "settings": { "_direction": "column", "_alignItems": "flex-start", - "_gap": "12px" + "_gap": "15px" }, "label": "Testimonial Three" },