Skip to content

0.13.0: Mobile menus, carousels, motion and class updates - #23

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

Hamido212 merged 4 commits into
BricksSnapfrom
claude/funny-planck-6mxikd

Conversation

@Hamido212

Copy link
Copy Markdown
Owner

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

Mobile menu in every header

  • Native nav. Headers with links use Bricks' nav-nested in the structure Bricks 2.4.2 creates, read from a test page: a brx-nav-nested-items list with the links, a close toggle (brx-toggle-div), then the open toggle. Settings are mobileMenu: tablet_portrait and the squeeze animation.
  • Overlay. It uses kit colors instead of Bricks' fixed white and gets gutters. On phones the header button moves into the menu, and the hamburger is compact.
  • Preview and validator. The preview renders the closed menu like Bricks. The validator knows ariaLabel and mobileMenu, which the published schema omits.

Carousels

  • New layouts. Reviews and portfolio as slider-nested (Splide), 92 layouts in total.
  • Options. Splide options go in as custom JSON, because Bricks refuses breakpoint keys on slider controls. Splide breakpoints give 3, 2 or 1 slides.
  • Navigation. Dots and swipe; arrows covered content at narrow widths.

Motion

  • Brand kit option. "Fade in", also kit.motion over MCP.
  • What moves. Content sections fade their blocks up once via Bricks interactions (enterView → startAnimation).
  • What stays still.
    • Headers, heroes, footers and single-purpose pages.
    • Nothing inside tabs, accordion, slider, nav or forms is animated.
  • Reduced motion. bs-motion respects prefers-reduced-motion.

Update outdated BricksSnap classes

  • New update-classes request. Puts the site's bs- classes on given definitions with update-global-class:
    • only bs- classes are accepted;
    • each write carries item and lock ownership;
    • dropped keys are removed via null, nested ones too;
    • the result is read back and compared;
    • the previous definitions come back for undo.
  • Staging. After "Create missing global classes", outdated bs- classes can be updated or reverted.
  • Fix. Class comparisons ignore how Bricks reformats custom CSS (line breaks, indentation, spaces around >), which caused false "different definition" reports.

Verified

  • Automated: 262 tests; tsc, eslint and production build clean.
  • Live on the Bricks 2.4.2 test site:
    • mobile menu opens and closes at 390 px, links in the bar at 1280 px;
    • carousels show 1 slide at 390 px and 2 or 3 at 1280 px;
    • motion fades in on scroll and is visible at once with reduced motion;
    • class update → undo → update, each verified;
    • 0.12's accordion and pricing switch work;
    • no JavaScript errors.

🤖 Generated with Claude Code

https://claude.ai/code/session_01APhfigKq7DMdgedQ4Pr9VK


Generated by Claude Code

claude added 4 commits October 1, 2026 21:27
Headers hid their links below the tablet breakpoint and offered no menu.
Every header with links now uses nav-nested in the structure Bricks 2.4.2
creates (read from a test page): a "Nav items" list (brx-nav-nested-items)
with the links, the header button and a close toggle (brx-toggle-div),
then the open toggle. mobileMenu is tablet_portrait, toggles use the
squeeze animation (hamburger to X).

- The overlay uses the kit's background and heading colors instead of
  Bricks' fixed white, with gutters; the header button moves into the
  menu on phones; a compact 26px hamburger
- Preview renders the nav, list items and toggles like Bricks (closed)
- Validator knows nav-nested's ariaLabel and mobileMenu, which the
  published schema omits (verified against Bricks' rendered output)
- Fix: comparing a staged class with the site's ignored nothing about
  CSS layout, so classes whose custom CSS Bricks reformats on save
  (line breaks, indentation) were reported as differing definitions

Verified live on the test site: the toggle opens and closes the menu at
390 px, links stay in the bar at 1280 px, and the 0.12 accordion and
pricing switch open as expected.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01APhfigKq7DMdgedQ4Pr9VK
A site that installed an earlier BricksSnap release (or another design)
kept its bs- class definitions: the staged ones were reported as
differing and never written, so improvements never reached it.

- New "update-classes" request: puts the site's bs- classes on given
  definitions with Bricks' update-global-class, carrying each class's
  item ownership and the lock ownership; only bs- classes are accepted
- update-global-class merges settings recursively, so the patch sets
  dropped keys to null (nested objects too); verified live that null
  removes a key
- The result is read back and compared (ignoring CSS layout); the
  previous definitions come back for undo; a refused write stops the run
  and keeps earlier updates undoable
- Staging: after "Create missing global classes", outdated bs- classes
  can be updated (with a note that this changes them site-wide) and the
  update undone
- Tests: patch builder, guarded update/verify/undo and a concurrent edit
  against the Bricks stand-in

Verified live on the test site: outdated → update → undo → update, each
step verified by read-back.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01APhfigKq7DMdgedQ4Pr9VK
- Carousels: testimonials and portfolio as Bricks' nested slider
  (Splide). Options go in as custom JSON because Bricks refuses
  breakpoint keys on slider controls; Splide breakpoints give 3/2/1 or
  2/1 slides. Navigation by swipe and dots (arrows covered content at
  narrow widths); dot colors come from the kit
- Motion: a brand kit option ("Fade in"). Content sections (not headers,
  heroes, footers or single-purpose pages) fade their intros, cards,
  items and images up once on scroll via Bricks interactions
  (enterView → startAnimation fadeInUp), slightly staggered; nothing
  inside Bricks' tabs, accordion, slider, nav or forms. bs-motion keeps
  everything visible and still with prefers-reduced-motion
- Kit option in the Studio, the WordPress contract and the MCP kit
  schema; the preview shows carousels as a still of the first slides
- Class comparison also ignores spaces around ">" and ",", which Bricks
  removes when it stores custom CSS

Verified live on the test site: sliders initialize with 1 slide at
390 px and 2/3 at 1280 px, content below the fold fades in on scroll,
and with reduced motion everything is visible at once; no JS errors.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01APhfigKq7DMdgedQ4Pr9VK
- Release notes and changelog for mobile menus, carousels, motion and
  outdated-class updates
- WordPress guide: updating outdated BricksSnap classes and the
  update-global-class ability; CSS layout is not a difference
- Studio guide: mobile menu, carousels, motion option, MCP kit.motion;
  remote library now 210 templates (92 layouts)
- Roadmap: v0.13
- Thanks to the MIT-licensed bricks-skills and bricks-builder-skill
  references used to cross-check Bricks' element structures

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

vercel Bot commented Oct 1, 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 Oct 1, 2026 9:51pm UTC

@Hamido212
Hamido212 merged commit 91954b9 into BricksSnap Oct 1, 2026
7 checks passed
@Hamido212
Hamido212 deleted the claude/funny-planck-6mxikd branch October 1, 2026 21:59

This branch was successfully deployed

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants