Snippets

Ready-to-use code snippets for building with Vanilla Breeze.

Snippets are copy-paste ready code patterns that follow Vanilla Breeze conventions. They use the correct token names, layout elements, and progressive enhancement patterns.

HTML Snippets

Page structure and layout patterns.

Page Shell

Base HTML5 document with header, main, and footer structure.

Tree Navigation

Collapsible tree navigation using native details/summary.

Article Layout

Content page with sidebar navigation using layout-sidebar.

Basic Form

Accessible form with form-field elements and validation.

Card Grid

Responsive card layout using layout-grid and layout-card.

Hero Section

Hero patterns using layout-cover for vertical centering.

CSS Snippets

Token configurations and style patterns.

Tokens Starter

Minimal token setup for new projects with sizes, colors, and typography.

Layer Setup

CSS @layer configuration for cascade control.

Dark Mode Toggle

Theme switching styles using light-dark() and data-mode.

Responsive Grid

Grid layout patterns with auto-fit and fixed columns.

Typography Scale

Type hierarchy with headings, prose, and display text.

Loading States

Spinner, skeleton, shimmer, and overlay patterns for loading.

Component Snippets

Interactive component usage examples.

Accordion

Accordion patterns with exclusive mode and custom styling.

Tabs

Tab interface examples with icons, badges, and vertical orientation.

Toast Notifications

Toast patterns with variants, positions, and JavaScript API.

Modal Dialog

Native dialog patterns with forms, confirmation, and scrolling.

Dropdown Menu

Dropdown patterns with icons, submenus, and checkmarks.

Drawer Dialog

Slide-in side panel using native dialog with CSS animation.

Bulk Selection

Select-all checkbox patterns for tables and lists.

Using Snippets

To use a snippet:

  1. Click on a snippet card to view the source code
  2. Copy the relevant HTML, CSS, or component markup
  3. Paste into your project and customize as needed

All snippets follow these conventions:

  • Tokens: Use --size-* for spacing, --color-* for colors
  • Layout: Use layout-* custom elements instead of utility classes
  • Configuration: Use data-* attributes for component options
  • Progressive Enhancement: Components work without JavaScript first