BLOCKS - A Webflow component systems by Code & Wander // February 2026 // London

Описание: 📺 BLOCKS: A Component-First System for Webflow
Presenter: Alessia Sannazzaro   / alessia-sannazzaro  

🚀 Key Takeaways:
"Build Mode shouldn't be a limitation. By using a 'sandbox' approach with open components, we provide the edges that keep the design on brand while letting the marketing team play freely with the content."

📝 Summary
Alessia explores the core challenges of handing over sites to clients: preventing "class pollution" and site breakage while fulfilling the need for high flexibility. She breaks down the "Blocks" framework into three technical pillars: Component Slots for nesting, Variables for global theming, and Atomic CSS for modular layout control.

The highlight of the session is a live role-play demo showing how a complex, responsive landing page can be built in under 10 minutes strictly within Build Mode. By using a system where layout rules (like grid columns and spacing) are managed through component properties and attributes, developers can create a "safe harbor" for non-technical users to launch campaigns without ever touching the standard Designer panel.

🕒 What you’ll learn:

Open vs. Closed Components: Understanding the "Russian Doll" nesting approach vs. highly restricted, prop-heavy components.

The Fluid System: How to implement fluid typography and spacing that automatically resizes based on screen width.

Layout Flexibility: Using variables to change design grids (from 12 to 15 or 24 columns) instantly across a project.

Build Mode Mastery: A demonstration of creating sections, grids, and Swiper JS carousels using only component properties.

Training Efficiency: Why a robust component system can reduce client training time to less than two hours.

📂 Timestamps:

0:37 – Open vs. Closed Components: The "Russian Doll" analogy.

2:28 – Choosing a Build Strategy based on client skill sets.

4:34 – The Pillars of Blocks: Slots, Variables, and Atomic CSS.

6:52 – Dynamic Grid Control: Changing column counts on the fly.

9:03 – Fluid Typography and Spacing setup.

10:55 – Live Demo: Building a landing page in 10 minutes using Build Mode.

14:54 – Nested Components: Adding cards and grids within section slots.

20:56 – Advanced Blocks: Integrating Swiper JS as a component.

25:40 – The Sandbox Metaphor for Design Systems.

27:16 – Client Training: How Blocks simplifies site handovers.

Alessia Sannazzaro is the co-founder of Code & Wander, a digital agency specializing in design-led Webflow builds. She is a recognized expert in component architecture and focuses on making the web more accessible for non-technical creators.

➡️ Join our next London Webflow Community Meetup
🎟️ https://www.meetup.com/london-webflow...