artanis/Bricks-Sections
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new sections, update design system, fix header mobile layout

Browse Source 
Sections:
- Add announcement-bar, cards, features-3col-cards, hero-card-homepage, hero-card-page, hero-slider
- Rename content-image-right → content-image (image-left layout, better mobile stacking)

Design system:
- Add cards-grid global class (flex-wrap for fluid wrapping card grids)
- Update feature-card with responsive _widthMax constraints (33%/50%/95%)
- Document Bricks Style Manager spacing setup in design.md

Headers:
- Fix header-with-cta mobile hamburger positioning — wrap nav+button in block element with row-reverse on mobile

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Spencer
2026-03-10 18:15:23 -05:00
parent 7f538a0132
commit f57034e40d
16 changed files with 1047 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
design/bcw-css-variables.json
View File

@@ -134,64 +134,76 @@
"value": "96px",
"category": "bcwspc"
},
{
"id": "bcwv31",
"name": "row-gap",
"value": "15px",
"category": "bcwspc"
},
{
"id": "bcwv32",
"name": "col-gap",
"value": "15px",
"category": "bcwspc"
},
{
"id": "bcwv21",
"name": "h1",
"value": "3rem",
"value": "64px",
"category": "bcwtyp"
},
{
"id": "bcwv22",
"name": "h2",
"value": "2.25rem",
"value": "48px",
"category": "bcwtyp"
},
{
"id": "bcwv23",
"name": "h3",
"value": "1.75rem",
"value": "36px",
"category": "bcwtyp"
},
{
"id": "bcwv24",
"name": "h4",
"value": "1.25rem",
"value": "28px",
"category": "bcwtyp"
},
{
"id": "bcwv25",
"name": "h5",
"value": "1.125rem",
"value": "22px",
"category": "bcwtyp"
},
{
"id": "bcwv26",
"name": "h6",
"value": "1rem",
"value": "18px",
"category": "bcwtyp"
},
{
"id": "bcwv27",
"name": "text-sm",
"value": "0.875rem",
"value": "14px",
"category": "bcwtyp"
},
{
"id": "bcwv28",
"name": "text-base",
"value": "1rem",
"value": "16px",
"category": "bcwtyp"
},
{
"id": "bcwv29",
"name": "text-lg",
"value": "1.125rem",
"value": "18px",
"category": "bcwtyp"
},
{
"id": "bcwv30",
"name": "text-xl",
"value": "1.25rem",
"value": "20px",
"category": "bcwtyp"
}
]

51
design/bcw-global-classes.json
View File

@@ -6,7 +6,7 @@
"_typography": {
"text-align": "center"
},
"_rowGap": "10px"
"_rowGap": "var(--row-gap)"
},
"modified": 1772146285,
"user_id": 2
@@ -15,7 +15,7 @@
"id": "footer-sub-section",
"name": "footer-sub-section",
"settings": {
"_rowGap": "15px"
"_rowGap": "var(--row-gap)"
},
"modified": 1772146505,
"user_id": 2
@@ -53,7 +53,7 @@
"_alignItems": "flex-start",
"_justifyContent": "center",
"_gap": "32px",
"_rowGap:mobile_portrait": "15px"
"_rowGap:mobile_portrait": "var(--row-gap)"
},
"modified": 1772146505,
"user_id": 2
@@ -66,9 +66,52 @@
"_alignItems": "flex-start",
"_justifyContent": "center",
"_gap": "24px",
"_rowGap:mobile_portrait": "15px"
"_rowGap:mobile_portrait": "var(--row-gap)"
},
"modified": 1772146505,
"user_id": 2
},
{
"id": "cards-grid",
"name": "cards-grid",
"settings": {
"_direction": "row",
"_flexWrap": "wrap",
"_alignItems": "stretch",
"_gap": "var(--col-gap)"
},
"modified": 1773187200,
"user_id": 2
},
{
"id": "feature-card",
"name": "feature-card",
"settings": {
"_background": {
"color": {
"raw": "var(--color-bg-alt)"
}
},
"_padding": {
"top": "var(--space-md)",
"right": "var(--space-md)",
"bottom": "var(--space-md)",
"left": "var(--space-md)"
},
"_border": {
"radius": {
"top": "8px",
"right": "8px",
"bottom": "8px",
"left": "8px"
}
},
"_rowGap": "var(--row-gap)",
"_widthMax": "33%",
"_widthMax:mobile_landscape": "50%",
"_widthMax:mobile_portrait": "95%"
},
"modified": 1773187200,
"user_id": 2
}
]

37
design/design.md
View File

@@ -8,6 +8,17 @@ Three importable files. **Import in this order** before any templates:
---
## Bricks Style Manager — Spacing
Bricks has a built-in Spacing section in the Style Manager that works well and should be kept enabled. One setting needs to match our design system:
- **Scale Steps** → set to: `2xs,xs,sm,md,lg,xl,2xl`
- **Baseline** → set to `sm`
This aligns the Style Manager's spacing scale labels with our `--space-*` CSS variable naming convention.
---
## How to Import
| File | Where to import |
@@ -60,6 +71,8 @@ A simple scale from extra-small to 2x-large. Use these in gap, padding, and marg
| `--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 |
| `--row-gap` | `15px` | Default row gap between stacked elements |
| `--col-gap` | `15px` | Default column gap between side-by-side elements |
**Usage example in Bricks:**
In any gap or padding field, type `var(--space-lg)` instead of a fixed pixel value.
@@ -72,16 +85,16 @@ Heading and text size scale. Apply these in the font-size field of any text elem
| 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 |
| `--h1` | `64px` | Page-level heading |
| `--h2` | `48px` | Section heading |
| `--h3` | `36px` | Sub-section heading |
| `--h4` | `28px` | Card or block heading|
| `--h5` | `22px` | Minor heading |
| `--h6` | `18px` | Small label heading |
| `--text-sm` | `14px` | Captions, footnotes |
| `--text-base` | `16px` | Body copy (default) |
| `--text-lg` | `18px` | Lead paragraph |
| `--text-xl` | `20px` | Large intro text |
---
@@ -104,6 +117,8 @@ Swatches: `primary`, `primary-light`, `primary-dark`, `secondary`, `secondary-li
| `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` |
| `cards-grid` | Fluid wrapping card row | `flex-wrap: wrap`, `align-items: stretch`, `gap: var(--col-gap)` — cards wrap to new rows automatically |
| `feature-card` | Individual feature column (card variant) | `background: var(--color-bg-alt)`, `padding: var(--space-md)`, `border-radius: 8px`, `row-gap: 15px`, `max-width: 33%` (50% landscape, 95% portrait) |
| `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.
**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. `feature-card` is embedded in `features-3col-cards` and `cards`. `cards-grid` and `feature-card` are embedded in `cards` — importing that template brings both along. For the fluid card layout, each card element also has `_flexBasis: 280px` and `_flexGrow: 1` set inline so they fill the row and wrap to the next line automatically.