Skip to content

0.12.0: Import & Modernize, and 90 layouts - #22

Merged
Hamido212 merged 4 commits into
BricksSnapfrom
claude/funny-planck-6mxikd
Sep 30, 2026
Merged

0.12.0: Import & Modernize, and 90 layouts#22
Hamido212 merged 4 commits into
BricksSnapfrom
claude/funny-planck-6mxikd

Conversation

@Hamido212

@Hamido212 Hamido212 commented Sep 30, 2026

Copy link
Copy Markdown
Owner

Release 0.12.0. See docs/RELEASE-0.12.0.md.

Import & Modernize

  • New Modernize tab. Paste or import any Bricks JSON, and BricksSnap rebuilds it on its design system:
    • colors become tokens by role, and the source's brand colors are replaced by the kit's;
    • font sizes, spacing and radii land on the kit's fluid scale;
    • repeated inline styles become bs-<block>-<role> classes;
    • custom CSS is rewritten;
    • missing mobile rules are added;
    • the brand kit restyles the result.
  • Review. Before, after and side-by-side views at three widths, a report of every change, and download, copy or Open in Staging. It runs locally, and nothing is fetched.
  • MCP. New tool bricks_modernize_template, so the server has eleven tools.

90 layouts (was 40)

  • 50 new layouts across all 22 section types, among them:
    • bento hero and hero with form;
    • service photo cards and tabs;
    • pricing switch, plans as rows, price tiles;
    • quote wall;
    • team photo cards;
    • portfolio bento and project index;
    • FAQ accordion;
    • logo tiles and marquee;
    • masonry and bento gallery;
    • CTA with background image;
    • big-name footer;
    • split login, 404 and coming-soon pages.
  • Native nested elements. The switch and tabs use Bricks' nested tabs, and the FAQ uses Bricks' nested accordion with FAQ schema, marked by the _hidden classes Bricks' script expects.
  • Preview and validator. The preview renders tabs and accordion like Bricks, and the validator accepts _hidden.
  • Pricing switch labels. The switch shows "Packages / Single prices", because the industries' prices are not monthly. For monthly and yearly billing, rename the tabs in Bricks.
  • Remote library. Now 206 templates.

Docs

  • New docs/MODERNIZE.md.
  • Updated Studio, remote library, MCP tool lists, changelog and README.
  • Roadmap: "Open in BricksSnap" cooperation and a community gallery with an explicit open license, planned for later.

Verified

  • Automated:
    • 255 tests: every layout valid in every style, the one-class-per-property rule for all 90 layouts, no duplicate class definitions, tabs and accordion structure, Modernize fixtures.
    • tsc and eslint clean; production build passes.
  • Visual: the 50 new layouts at desktop and phone width in the Clean kit and a dark Warm kit.
  • Against Bricks 2.4.2 on the test site (read-only):
    • the frontend script and CSS use tab-title, tab-pane, accordion-title-wrapper, accordion-content-wrapper and brx-open, as the layouts do;
    • render-elements outputs _hidden classes.
  • App: 90 Studio thumbnails render in about 0.1 s, with no console errors.

🤖 Generated with Claude Code

https://claude.ai/code/session_01APhfigKq7DMdgedQ4Pr9VK

Generated by Claude Code

@claude
Modernize engine: turn any Bricks JSON into BricksSnap's token system
9ce8878 
- Reads element lists, copied sections and template exports with their
  global classes; merges source classes and element styles per element.
- Colors become design tokens by role (section/card/button backgrounds,
  headings, text, borders, shadows) and background context; the source's
  brand colors are detected and map to primary/accent; alpha survives
  via color-mix.
- Font sizes (px, rem at 62.5%, clamp), spacing and radii land on the
  token scale; Automatic CSS / Core Framework variables are mapped,
  unknown ones reported; fonts come from the kit.
- Each element's styles move into one deduplicated bs-<block>-<role>
  class; custom CSS is rewritten to the class and its colors mapped.
- Adds missing mobile rules (grid columns, stacking rows, full-width
  button rows, fixed widths as maximums, section gutter and rhythm).
- Report of every change and warning.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01APhfigKq7DMdgedQ4Pr9VK
@claude
Modernize tab and MCP tool
c0fe06f 
- New "Modernize" tab: paste or import Bricks JSON (or load BricksSnap's
  own example), brand kit on the left, before/after/side-by-side preview
  at desktop, tablet and phone, a report of every change (colors, font
  sizes, spacing, classes, mobile rules, warnings, quality checks) and
  export: download, copy for Ctrl+V, Open in Staging with the design
  system. The class prefix is editable.
- bricks_modernize_template MCP tool with the same engine.
- Engine: light tinted borders stay neutral, icon color and size move
  into the class, the prefix prefers the section's own label, brand
  detection ignores tints and counts icon colors.
- KitControls can hide the business profile.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01APhfigKq7DMdgedQ4Pr9VK
@claude
Studio: 50 new layouts (40 → 90), native Bricks tabs and accordion
6c39f15 
New layouts for every section type, built from common patterns on the
existing classes and brand kit:
- Header: centred logo, floating bar, dark
- Hero: bento tiles, centred with numbers, statement with wide image,
  image left with social proof, with enquiry form
- Services: numbered, photo cards, tabs; benefits: cards, image in the
  middle, dark with rules; steps: vertical, centred numbers
- Numbers, about, timeline, team and portfolio: cards, splits, collage,
  statement, horizontal timeline, photo cards, list, bento, project index
- Pricing: switch (Bricks tabs), plans as rows, price tiles
- Reviews: quote wall, one featured quote, large photo
- FAQ: accordion (Bricks accordion with FAQ schema), cards
- CTA, contact, logos, blog, gallery, footer, login, 404, coming soon:
  background image, rules, photo card, contact cards, centred form, logo
  tiles, marquee, featured and list blog, masonry and bento gallery, big
  name and CTA footers, split screens

Tabs and accordion use Bricks' nested elements with the _hidden classes
Bricks' script expects (tab-title, tab-pane, accordion-content-wrapper);
pane classes never set display. The preview renders them like Bricks
(first tab open), and the validator accepts _hidden.

Tests cover all layouts for the one-class-per-property rule, check that
no class is defined twice and that tabs and accordion have Bricks'
structure.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01APhfigKq7DMdgedQ4Pr9VK
@claude
0.12.0: docs for Modernize and 90 layouts, roadmap, version
f1c6304 
- docs/MODERNIZE.md: what Modernize changes, the mobile rules, how to use
  it, limits, the MCP tool, and to import only JSON you may use
- Release notes 0.12.0 and changelog
- Studio, remote library (206 templates), MCP tool lists (eleven tools)
- Roadmap: v0.12, and "Open in BricksSnap" cooperation and a community
  gallery with an explicit open license for later

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01APhfigKq7DMdgedQ4Pr9VK
@vercel

vercel Bot commented Sep 30, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
bricks-snap Ready Ready Preview Sep 30, 2026 12:42pm UTC

@Hamido212
Hamido212 merged commit 62a128e into BricksSnap Sep 30, 2026
7 checks passed

This branch was successfully deployed

1 active deployment
Preview — f1c6304f Deployed Sep 30, 2026 by vercel[bot]
View deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Hamido212 @claude