Tutorial: Build Your First Landing Page

Learn Vanilla Breeze step by step. In this tutorial, you will build a complete landing page from scratch, mastering layout primitives, design tokens, forms, and interactive components along the way.

1. Introduction and Philosophy

Before we write any code, let us understand what makes Vanilla Breeze different from other CSS frameworks.

What We Will Build

By the end of this tutorial, you will have built a complete landing page with:

The Vanilla Breeze Philosophy

HTML-First

Start with semantic HTML5 elements. Your page works before any CSS loads.

Progressive Enhancement

Add CSS for styling, JavaScript for interactivity. Each layer is optional.

Zero Dependencies

No build tools required. Link a CSS file and you are ready to go.

Composition Over Configuration

Combine simple layout primitives to build complex interfaces.

Key Concept: Vanilla Breeze uses three layers of components: Native Elements (84 styled HTML5 elements), Custom Elements (15 CSS-only layout primitives), and Web Components (9 interactive JavaScript components). You only use what you need.

2. Setting Up the Project

Let us create our project structure and link the Vanilla Breeze stylesheet.

File Structure

Create a new folder for your project with this structure:

my-landing-page/
index.html

That is it. No node_modules, no build configuration, no package.json required.

The Minimal HTML Document

Create your index.html file with this starting template:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Landing Page</title> <!-- Vanilla Breeze CSS - that's all you need! --> <link rel="stylesheet" href="https://unpkg.com/vanilla-breeze/dist/cdn/vanilla-breeze.css"> </head> <body> <h1>Hello, Vanilla Breeze!</h1> <p>Your page is ready.</p> </body> </html>

Open this file in your browser and you will see styled typography immediately.

Hello, Vanilla Breeze!

Your page is ready.
Pro Tip: For local development, you can download the CSS file or use a CDN. For production, consider self-hosting for better performance and reliability.

3. Page Structure with Semantic HTML

Every good webpage starts with a solid semantic structure. Vanilla Breeze styles these elements automatically.

The Three-Part Layout

Most landing pages follow a simple pattern: header, main content, and footer.

<body> <header> <a href="/" class="logo">Acme Corp</a> <nav> <ul> <li><a href="#features">Features</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <main> <h1>Build Better Products</h1> <p>The all-in-one platform for modern teams.</p> </main> <footer> <p>&copy; 2026 Acme Corp. All rights reserved.</p> </footer> </body>
Features Pricing Contact

Build Better Products

The all-in-one platform for modern teams.

2026 Acme Corp. All rights reserved.

Milestone 1 Complete

You have a structured HTML page with semantic elements. Even without custom styles, it is readable and functional.

4. Design Tokens and Theming

Vanilla Breeze uses CSS custom properties (design tokens) for consistent spacing, colors, and typography.

The Token System

Spacing (T-shirt Sizes)

/* Spacing scale */ --size-3xs: 0.125rem; /* 2px */ --size-2xs: 0.25rem; /* 4px */ --size-xs: 0.5rem; /* 8px */ --size-s: 0.75rem; /* 12px */ --size-m: 1rem; /* 16px */ --size-l: 1.5rem; /* 24px */ --size-xl: 2rem; /* 32px */ --size-2xl: 3rem; /* 48px */ --size-3xl: 4rem; /* 64px */

Colors (Semantic)

/* Surface colors */ --color-surface: white; --color-surface-raised: #f9f9f9; --color-background: white; /* Text colors */ --color-text: #171717; --color-text-muted: #6b6b6b; /* Interactive */ --color-interactive: #6366f1; --color-interactive-hover: #4f46e5; /* Borders */ --color-border: #e5e5e5;

Using Tokens in Your CSS

.my-custom-section { /* Good - uses tokens */ padding: var(--size-xl); background: var(--color-surface-raised); border-radius: var(--radius-m); /* Avoid - hard-coded values */ /* padding: 32px; */ /* background: #f5f5f5; */ }
Why Tokens? Using tokens ensures your customizations automatically work with dark mode, maintain consistency, and make global changes easy.

5. Building the Hero Section

Now let us create an impactful hero section using layout-stack and layout-cluster.

<section class="hero"> <layout-stack data-layout-gap="l" data-layout-align="center"> <h1>Build Better Products</h1> <p class="lead"> The all-in-one platform that helps modern teams ship faster with confidence. </p> <layout-cluster data-layout-gap="s" data-layout-justify="center"> <button>Get Started Free</button> <button class="secondary">Watch Demo</button> </layout-cluster> </layout-stack> </section>
Features Pricing Contact

Build Better Products

The all-in-one platform that helps modern teams ship faster with confidence.

Milestone 2 Complete

Your hero section is responsive and uses layout primitives. The buttons are styled automatically.

6. Creating a Features Grid

Display your product features in a responsive grid that adapts to any screen size.

<layout-grid data-layout-min="15rem" data-layout-gap="l"> <!-- Items automatically flow into columns --> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </layout-grid>

The data-min attribute sets the minimum width of each column. The grid calculates how many columns fit automatically.

Everything You Need

Lightning Fast

Built for speed.

Secure

Enterprise-grade.

Collaborate

Work together.
Responsive Without Media Queries: The data-layout-min="15rem" attribute means each column must be at least 15rem wide. As the viewport shrinks, columns automatically reflow.

7. Building Card Components

Cards are a fundamental UI pattern. Vanilla Breeze provides a layout-card element with built-in variants.

<!-- Default card with subtle shadow --> <layout-card> <h3>Default Card</h3> <p>Subtle shadow, rounded corners.</p> </layout-card> <!-- Elevated card --> <layout-card data-variant="elevated"> <h3>Elevated Card</h3> <p>More prominent shadow.</p> </layout-card> <!-- Outlined card --> <layout-card data-variant="outlined"> <h3>Outlined Card</h3> <p>Border instead of shadow.</p> </layout-card>

Card Data Attributes

Attribute Values Description
data-variant elevated, outlined, ghost Visual style variant
data-padding none, s, m, l, xl Internal padding amount

9. Forms and Inputs

Vanilla Breeze styles all native form elements automatically.

<form> <layout-stack data-layout-gap="m"> <form-field> <label for="name">Name</label> <input type="text" id="name" required placeholder="Your name"> </form-field> <form-field> <label for="email">Email</label> <input type="email" id="email" required placeholder="you@example.com"> </form-field> <form-field> <label for="message">Message</label> <textarea id="message" rows="4" placeholder="How can we help?"></textarea> </form-field> <button type="submit">Send Message</button> </layout-stack> </form>
Progressive Enhancement: The form works perfectly without JavaScript. Native HTML5 validation handles required fields and email format.

10. Adding Interactivity

For interactive components, Vanilla Breeze provides Web Components. Let us add an FAQ accordion.

Including JavaScript

<script type="module" src="https://unpkg.com/vanilla-breeze/dist/cdn/vanilla-breeze.js"></script>

The Accordion Component

<accordion-wc data-single> <details name="faq"> <summary>How do I get started?</summary> <div> <p>Getting started is easy! Sign up for a free account.</p> </div> </details> <details name="faq"> <summary>Can I cancel anytime?</summary> <div> <p>Yes, cancel anytime. No fees.</p> </div> </details> </accordion-wc>
How do I get started?

Getting started is easy! Sign up for a free account, and you will be guided through our onboarding process. No credit card required.

Can I cancel anytime?

Yes, you can cancel your subscription at any time. There are no long-term contracts or cancellation fees.

Milestone 3 Complete

Your landing page now has interactive elements that work with keyboard and screen readers.

11. Responsive and Accessible

Vanilla Breeze is designed to be responsive and accessible by default.

Built-in Responsiveness

The layout primitives are inherently responsive:

Accessibility Checklist

Test Early: Test your page with keyboard navigation and a screen reader during development, not after.

12. Next Steps and Resources

Congratulations! You have built a complete landing page. Here is where to go next.

Explore More

Design Tokens

Deep dive into colors, spacing, typography, and shadows.

All Elements

Browse all 84 native, 15 custom, and 9 web components.

Kitchen Sink

See every component in action on a single page.

Copy-Paste Snippets

Ready-to-use patterns for common UI needs.

Community and Support

Tutorial Complete!

You have learned the core concepts of Vanilla Breeze. Now go build something amazing with simple, elegant markup.