Component-Based Architecture
Blog
Guides and tutorials for building modern websites
Learn how to build, structure, and optimize component-based Metalsmith sites. From architecture fundamentals to advanced techniques.
Customizing Components Without Editing Them
Override component styles from your own site layer instead of editing canon files. Cascade layers, the overrides directory, and the component design API.
The Design Token Contract
Why components may only consume tokens the vocabulary defines, when a knob belongs to the component instead, and the two audit tools that hold both sides to the agreement.
Updating Installed Components
How to adopt a canon update for a component you have customized, and how to establish a baseline for components installed before install commits existed.
Adding Smooth Page Transitions with SWUP
Learn how to implement smooth, app-like page transitions in your Metalsmith site using SWUP. Includes component re-initialization patterns, prefetching for instant navigation, and backwards-compatible implementation.
Adding a Top Message Bar to Your Header
A step-by-step guide to adding a dismissible announcement bar above your header with cookie persistence and smooth animations
Adding Header Search to Your Site
A step-by-step guide to adding a header search form from the Nunjucks Components library to your starter project