BLOCKS - A Webflow component systems by Code & Wander // February 2026 // London
Автор: #WFLDN - London Webflow Community
Загружено: 2026-03-02
Просмотров: 42
Описание:
📺 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...
Повторяем попытку...
Доступные форматы для скачивания:
Скачать видео
-
Информация по загрузке: