Integrations

Using Vanilla Breeze with static site generators and frameworks.

Static Site Generators

Framework-specific components and templates for popular SSGs.

Astro

8 components, 4 layouts, TypeScript support. Modern content-focused sites with islands architecture.

Eleventy (11ty)

Nunjucks templates, 3 layouts, 6 partials. Simple and flexible static site generation.

Framework Philosophy

Vanilla Breeze follows HTML-first, CSS-second, JavaScript-third principles. This means:

  1. Universal compatibility - Components work with any backend that generates HTML
  2. No build step required - Use directly in the browser for basic usage
  3. Progressive enhancement - Content is accessible without JavaScript
  4. Web Components - Provide interactivity when needed

The integrations provide idiomatic components for each framework while maintaining Vanilla Breeze conventions.

Integration Features

Components

  • BaseHead - Standard head setup with meta tags
  • ThemeToggle - Theme switcher button
  • NavTree - Tree navigation from data
  • PageToc - Auto-generated table of contents
  • Card, FormField - Layout element wrappers
  • CodeBlock, BrowserWindow - Demo helpers

Layouts

  • BaseLayout - Minimal page structure
  • DocsLayout - Documentation with sidebar
  • BlogLayout - Blog post with metadata
  • LandingLayout - Marketing page

Conventions

  • Uses --size-* tokens for spacing
  • Uses --color-* tokens for colors
  • Uses layout-* custom elements
  • Uses data-* attributes for config
  • Follows progressive enhancement

Other Libraries

Vanilla Breeze components are framework-agnostic and work seamlessly with any HTML-first approach:

  • HTMX - Hypermedia-driven applications with minimal JavaScript
  • Alpine.js - Lightweight reactive JavaScript framework
  • Hotwire/Turbo - HTML over the wire for fast navigation
  • Plain HTML - No framework needed for static sites

Since Vanilla Breeze uses standard HTML, CSS, and Web Components, it integrates naturally with any tool that outputs HTML.

Installation

The integration files are located in the /integrations/ directory:

 integrations/ ├── astro/ # Astro components and layouts │ ├── components/ # .astro component files │ ├── layouts/ # Page layout templates │ └── styles/ # Astro-specific CSS └── eleventy/ # Eleventy templates ├── _includes/ # Nunjucks partials ├── _layouts/ # Page layouts ├── _data/ # Site configuration └── assets/ # 11ty-specific CSS

Copy the relevant integration folder into your project and customize as needed. See the individual integration pages for detailed setup instructions.