Getting Started `v1.0.0`

Quick Start

Include the CSS and JS files in your HTML. No build tools needed.

<!-- CSS -->
<link rel="stylesheet" href="css/vanduo.css">

<!-- JS (order matters) -->
<script src="js/utils/helpers.js"></script>
<script src="js/vanduo.js"></script>

<!-- Add only the components you need -->
<script src="js/components/navbar.js"></script>
<script src="js/components/modals.js"></script>
<!-- ... -->

Modular CSS Imports

Import only what you need instead of the full bundle:

<!-- Full framework -->
<link rel="stylesheet" href="css/vanduo.css">

<!-- Or pick individual modules -->
<link rel="stylesheet" href="css/core/reset.css">
<link rel="stylesheet" href="css/core/colors.css">
<link rel="stylesheet" href="css/core/typography.css">
<link rel="stylesheet" href="css/core/grid.css">
<link rel="stylesheet" href="css/components/buttons.css">
<!-- ... add what you need -->

CSS Variable Customization

Override CSS variables in your own stylesheet to customize the entire framework:

:root {
  /* Brand colors */
  --color-primary: #6366f1;
  --color-primary-dark: #4f46e5;
  --color-primary-light: #818cf8;

  /* Typography */
  --font-family-base: 'Inter', sans-serif;
  --font-size-base: 1rem;

  /* Spacing (Fibonacci-based) */
  --spacing-1: 1px;   --spacing-2: 2px;
  --spacing-3: 3px;   --spacing-5: 5px;
  --spacing-8: 8px;   --spacing-13: 13px;

  /* Borders */
  --border-color: #e2e8f0;
  --btn-border-radius: 8px;
}

Theme Switching

Vanduo supports light, dark, and system themes. Preference is stored in localStorage.

<!-- Select-based toggle -->
<select data-toggle="theme">
  <option value="system">System</option>
  <option value="light">Light</option>
  <option value="dark">Dark</option>
</select>

<!-- Or button toggle (cycles modes) -->
<button data-toggle="theme">Toggle</button>

How it works:

data-toggle="theme" binds the element
Preference saved to vanduo-theme-preference key
Sets [data-theme="dark"] on <html>
System mode removes the attribute, deferring to prefers-color-scheme

Data Attributes Reference

JavaScript components are configured via data-* attributes:

Attribute	Component
`data-modal="#id"`	Modal trigger
`data-dismiss="modal"`	Modal close button
`data-tooltip="text"`	Tooltip content
`data-placement="top\|right\|bottom\|left"`	Tooltip position
`data-toggle="theme"`	Theme switcher
`data-toggle="font"`	Font switcher
`data-collapsible`	Collapsible container
`data-speed="0.5"`	Parallax layer speed

JavaScript API

All components register with the global Vanduo object:

// Re-initialize a component after DOM changes
Vanduo.reinit('dropdown');

// Destroy all component instances (cleanup)
Vanduo.destroyAll();

// Register a custom component
Vanduo.register('myComponent', {
  init: function() { /* ... */ }
});

// Show a toast notification
Vanduo.components.toast.show({
  title: 'Success',
  message: 'Item saved.',
  type: 'success'
});

CSS State Classes:

.is-open — open state (modals, dropdowns, sidenav)
.is-active — active state (tabs, accordion items)
.disabled — disabled state

Icons

Vanduo includes Phosphor Icons — a flexible icon family with 1,500+ icons in 6 weights. Icons are bundled locally with no external dependencies.

Quick Start

Include the icons stylesheet and use <i> elements with the appropriate classes:

<!-- Include default weights (regular + fill) -->
<link rel="stylesheet" href="css/icons/icons.css">

<!-- Use icons -->
<i class="ph ph-heart"></i>
<i class="ph-fill ph-star"></i>
<i class="ph ph-house"></i>

Import Options

<!-- Default (regular + fill) - Recommended -->
<link rel="stylesheet" href="css/icons/icons.css">

<!-- All 6 weights (~3MB) -->
<link rel="stylesheet" href="css/icons/icons-all.css">

<!-- Individual weights -->
<link rel="stylesheet" href="icons/phosphor/bold/style.css">
<link rel="stylesheet" href="icons/phosphor/light/style.css">

Icon Weights

6 distinct weights for different visual styles:

Regular
.ph

Fill
.ph-fill

Bold
.ph-bold

Light
.ph-light

Thin
.ph-thin

Duotone
.ph-duotone

Note: Only regular and fill weights are loaded by default. Other weights require importing their CSS.

Example Icons

Browse all 1,500+ icons at phosphoricons.com

Styling Icons

Icons are font-based — style them with CSS:

<!-- Size with font-size -->
<i class="ph ph-heart" style="font-size: 48px;"></i>

<!-- Color with color -->
<i class="ph-fill ph-star" style="color: gold;"></i>

<!-- Use CSS variables -->
<i class="ph ph-check" style="color: var(--color-success);"></i>

Icons in Buttons

Icons by Phosphor Icons — MIT Licensed

Color Palette

Vanduo uses the Open Color palette (MIT License) — a battle-tested, accessible color system with 10-step scales for each hue. Perfect for the "no-build" philosophy.

Primary — Cyan (Brand)

The "Water" brand color for Vanduo

primary-0 #e3fafc

primary-1 #c5f6fa

primary-2 #99e9f2

primary-3 #66d9e8

primary-4 #3bc9db

primary-5 ★ #22b8cf

primary-6 #15aabf

primary-7 #1098ad

primary-8 #0c8599

primary-9 #0b7285

Secondary — Teal

Complementary to Cyan for secondary actions

secondary-0 #e6fcf5

secondary-1 #c3fae8

secondary-2 #96f2d7

secondary-3 #63e6be

secondary-4 #38d9a9

secondary-5 ★ #20c997

secondary-6 #12b886

secondary-7 #0ca678

secondary-8 #099268

secondary-9 #087f5b

Gray — Neutrals

Used for backgrounds, borders, text, and UI structure

gray-0 #f8f9fa

gray-1 #f1f3f5

gray-2 #e9ecef

gray-3 #dee2e6

gray-4 #ced4da

gray-5 #adb5bd

gray-6 #868e96

gray-7 #495057

gray-8 #343a40

gray-9 #212529

Danger — Red

Error states, destructive actions

danger-0 #fff5f5

danger-1 #ffe3e3

danger-2 #ffc9c9

danger-3 #ffa8a8

danger-4 #ff8787

danger-5 #ff6b6b

danger-6 ★ #fa5252

danger-7 #f03e3e

danger-8 #e03131

danger-9 #c92a2a

Success — Green

Success states, confirmations

success-0 #ebfbee

success-1 #d3f9d8

success-2 #b2f2bb

success-3 #8ce99a

success-4 #69db7c

success-5 #51cf66

success-6 ★ #40c057

success-7 #37b24d

success-8 #2f9e44

success-9 #2b8a3e

Warning — Yellow

Warnings, cautions, attention

warning-0 #fff9db

warning-1 #fff3bf

warning-2 #ffec99

warning-3 #ffe066

warning-4 #ffd43b

warning-5 #fcc419

warning-6 ★ #fab005

warning-7 #f59f00

warning-8 #f08c00

warning-9 #e67700

Info — Blue

Information, help, neutral feedback

info-0 #e7f5ff

info-1 #d0ebff

info-2 #a5d8ff

info-3 #74c0fc

info-4 #4dabf7

info-5 #339af0

info-6 ★ #228be6

info-7 #1c7ed6

info-8 #1971c2

info-9 #1864ab

CSS Variable Usage

/* Direct scale access */
.my-element {
  background: var(--primary-0);  /* Lightest */
  color: var(--primary-9);       /* Darkest */
}

/* Semantic aliases (recommended) */
.my-button {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
}

/* Hover states using scale */
.my-button:hover {
  background: var(--primary-6);
}

.my-button:active {
  background: var(--primary-7);
}

Theming Guide

To change the primary color to another Open Color hue (e.g., Violet):

:root {
  /* Swap Cyan with Violet */
  --primary-0: #f3f0ff;
  --primary-1: #e5dbff;
  --primary-2: #d0bfff;
  --primary-3: #b197fc;
  --primary-4: #9775fa;
  --primary-5: #845ef7;
  --primary-6: #7950f2;
  --primary-7: #7048e8;
  --primary-8: #6741d9;
  --primary-9: #5f3dc4;
}

All components using --primary-* or --color-primary will automatically update.

Color palette based on Open Color by Heeyeun Jeong — MIT Licensed

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Utilities

Primary text color

Secondary text color

Success text color

Warning text color

Error text color

Info text color

Muted text color

Small text

Large text

Bold text

Italic text

Color Utilities

Primary

Secondary

Success

Warning

Error

Info

Dark

Light

Grid System

A comprehensive 12-column flexbox grid with Fibonacci/Golden Ratio proportional layouts, responsive containers, order utilities, and an interactive toggle between standard and Fibonacci modes.

2XL Breakpoint (1400px)

The grid now supports all 6 breakpoints: base, sm (576px), md (768px), lg (992px), xl (1200px), and 2xl (1400px).

2xl-1

Responsive Containers

Responsive containers are fluid below their breakpoint and fixed-width above. They scale up at each subsequent breakpoint.

.container-sm — fixed from 576px (540px, scales up)

.container-md — fixed from 768px (720px, scales up)

.container-lg — fixed from 992px (960px, scales up)

.container-xl — fixed from 1200px (1140px, scales up)

.container-2xl — fixed from 1400px (1320px)

Order Utilities

Reorder columns visually without changing HTML source order. Responsive variants available at all breakpoints.

1st in HTML
.order-3

2nd in HTML
.order-1

3rd in HTML
.order-2

1st in HTML
.order-last

2nd in HTML
.order-first

Fibonacci 4-Column (1:2:3:5)

Ratio 1:2:3:5 (total 11 parts). Use .row-fib-4 with .col-fib-1, .col-fib-2, .col-fib-3, .col-fib-5.

Fibonacci 3-Column (3:5:8)

Ratio 3:5:8 (total 16 parts). Use .row-fib-3-alt with .col-fib-3, .col-fib-5, .col-fib-8.

CSS Grid: 4-Column Fibonacci

1fr

2fr

3fr

5fr

CSS Grid: 3:5:8 Fibonacci

3fr

5fr

8fr

Fibonacci Gap Utilities

Gap utilities using Fibonacci values. Works with CSS Grid and flex containers using the gap property.

.gap-fib-3 (3px)

.gap-fib-8 (8px)

.gap-fib-21 (21px)

Grid Mode Toggle

Toggle between standard 12-column flexbox and Fibonacci CSS Grid proportions. Uses data-layout-mode attribute with a data-grid-toggle button. The Fibonacci mode auto-detects column count and applies golden ratio (2 cols), 2:3:5 (3 cols), or 1:2:3:5 (4 cols) proportions.

3-column row:

Col 1

Col 2

Col 3

2-column row (becomes golden ratio):

Col 1

Col 2

4-column row (becomes 1:2:3:5):

Offset Utilities

Complete offset utilities from 0-11 at all breakpoints. Use .offset-0 to reset an offset at a specific breakpoint.

.offset-0 .col-4

.offset-2 .col-4

.offset-4 .col-3

.offset-8 .col-2

Golden Ratio Grid

This framework uses the Fibonacci sequence and Golden Ratio (phi = 1.618) as its proportional foundation. Spacing, typography, component dimensions, and grid layouts all derive from these mathematical relationships.

Golden Split (38.2% / 61.8%)

Minor
38.2% (1/phi)

Major
61.8% (1 - 1/phi)

Fibonacci 3-Column (2:3:5)

CSS Grid Golden Layout

1fr

1.618fr

Fibonacci Spacing Scale

1px

2px

3px

5px

8px

13px

21px

34px

55px

89px

144px

Golden Ratio Type Scale

xs — base / phi

sm — base / sqrt(phi)

base — 16px

lg — base x sqrt(phi)

xl — base x phi

2xl — base x phi^2

Buttons

Button Variants

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-weight: var(--font-weight-medium);
  border-radius: var(--btn-border-radius);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

Button Sizes

.btn-sm {
  padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
  font-size: var(--font-size-lg);
}

.btn-block {
  display: flex;
  width: 100%;
}

Button States

Forms

Input Fields

Text Input

Email Input

Password Input

Textarea

Select

Custom Select

Form Controls

Checked checkbox

Unchecked checkbox

Disabled checkbox

Radio option 1

Radio option 2

Toggle switch

Range: 50

Form Validation States

Valid Input

Looks good!

Invalid Input

Please provide a valid value.

Cards

Elevated Card

This is an elevated card with shadow. It's the default card style.

Outlined Card

This is an outlined card with border and no shadow.

Filled Card

This is a filled card with background color and no border.

<div class="card">
  <div class="card-header">
    <h3>Card Title</h3>
  </div>
  <div class="card-body">
    <p>Card content goes here.</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary btn-sm">Action</button>
  </div>
</div>

<!-- Outlined variant -->
<div class="card card-outlined">...</div>

<!-- Filled variant -->
<div class="card card-filled">...</div>

.card {
  background-color: var(--card-bg);
  border-radius: var(--card-border-radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.card-outlined {
  box-shadow: none;
  border: 1px solid var(--border-color);
}

.card-filled {
  box-shadow: none;
  background-color: var(--bg-secondary);
}

Navigation Components

Breadcrumbs

Pagination

Interactive Components

Tooltips

Hover over the buttons to see tooltips:

Dropdown

Modal

<!-- Trigger button -->
<button class="btn btn-primary" data-modal="#my-modal">Open Modal</button>

<!-- Modal structure -->
<div class="modal" id="my-modal">
  <div class="modal-backdrop"></div>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Title</h3>
        <button class="modal-close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">Content</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

// Open modal programmatically
const modal = Modal.open('#my-modal');

// Close modal
Modal.close('#my-modal');

// Listen for events
document.querySelector('#my-modal')
  .addEventListener('modal:open', (e) => {
    console.log('Modal opened');
  });

Collapsible / Accordion

This is the content of the first accordion item.

This is the content of the second accordion item.

This is the content of the third accordion item.

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-header">
      <span>Item Title</span>
      <span class="accordion-icon"></span>
    </button>
    <div class="accordion-body">
      <div class="accordion-content">
        Item content goes here
      </div>
    </div>
  </div>
</div>

// Accordion auto-initializes on page load
// Click accordion headers to toggle

// Programmatic control:
const accordion = document.querySelector('.accordion');
const item = accordion.querySelector('.accordion-item');

// Open item
item.classList.add('is-open');

// Close item
item.classList.remove('is-open');

Collections

Collection List

JD

John Doe

Software Engineer
JS

Jane Smith

Designer
MJ

Mike Johnson

Product Manager

Collection with Actions

Item with action

Click to view details
Another item

With action button

Tables

Bordered Table

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Mike Johnson	mike@example.com	User

Striped Table

Product	Price	Stock
Product A	$29.99	50
Product B	$39.99	30
Product C	$49.99	20

Hover Table

ID	Status	Date
#001	Active	2024-01-15
#002	Pending	2024-01-16
#003	Failed	2024-01-17

Badges

Badge Variants

Primary Secondary Success Warning Error Info

Badge Sizes

Small Default Large

Pill Badge

Alerts

Alert Variants

Primary! This is a primary alert message.

Success! Your action was completed successfully.

Warning! Please review before proceeding.

Error! Something went wrong.

Info! Here's some helpful information.

<div class="alert alert-success">
  <strong>Success!</strong> Your action was completed.
</div>

<!-- Variants: alert-primary, alert-success, alert-warning, alert-error, alert-info -->

<!-- Dismissible alert -->
<div class="alert alert-warning alert-dismissible">
  <strong>Warning!</strong> Please review.
  <button type="button" class="alert-close" aria-label="Close"></button>
</div>

.alert {
  padding: var(--alert-padding-y) var(--alert-padding-x);
  border-radius: var(--alert-border-radius);
  border-left: 4px solid;
}

.alert-success {
  background-color: var(--color-success-alpha-10);
  border-color: var(--color-success);
  color: var(--color-success-dark);
}

Dismissible Alerts

Dismissible! Click the X to close this alert.

Another one! This can also be dismissed.

Chips & Tags

Chip Variants

Default Primary Secondary Success Warning Error Info

Chip Sizes & Outline

Small Default Large

Outline Primary Outline Success Outline Error

Dismissible Chips

Removable Tag Category

Avatars

Avatar Sizes

XS SM MD LG XL 2XL

Avatar with Status

JD AB CD EF

Avatar Group

A B C D +5

Skeleton Loaders

Basic Skeletons

Skeleton Card

Tabs

Basic Tabs

Content for Tab 1. This is the first tab panel.

Content for Tab 2. This is the second tab panel.

Content for Tab 3. This is the third tab panel.

Boxed Tabs

Overview content goes here.

Details content goes here.

Settings content goes here.

Pills Tabs

Home tab content. Pills style gives a more button-like appearance.

Profile tab content.

Messages tab content.

Settings tab content.

Toast Notifications

Toast Types

Toast Options

Preloader & Progress Bars

Spinners

Progress Bars

Colored Progress Bars

Striped & Animated Progress

Striped:

Animated Striped:

Indeterminate:

Progress Sizes

Extra small (.progress-xs):

Small (.progress-sm):

Large (.progress-lg):

Extra large (.progress-xl):

Grow Spinner & Colors

Growing spinner:

Colored spinners:

Button Groups

Horizontal Group

Full width (.btn-group-full):

Vertical Group & Sizes

Small group (.btn-group-sm):

Large group (.btn-group-lg):

Getting Started v1.0.0

Quick Start

Modular CSS Imports

CSS Variable Customization

Theme Switching

Data Attributes Reference

JavaScript API

Icons

Quick Start

Import Options

Icon Weights

Example Icons

Styling Icons

Icons in Buttons

Color Palette

Primary — Cyan (Brand)

Secondary — Teal

Gray — Neutrals

Danger — Red

Success — Green

Warning — Yellow

Info — Blue

CSS Variable Usage

Theming Guide

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Utilities

Color Utilities

Grid System

2XL Breakpoint (1400px)

Responsive Containers

Order Utilities

Fibonacci 4-Column (1:2:3:5)

Fibonacci 3-Column (3:5:8)

CSS Grid: 4-Column Fibonacci

CSS Grid: 3:5:8 Fibonacci

Fibonacci Gap Utilities

Grid Mode Toggle

Offset Utilities

Golden Ratio Grid

Golden Split (38.2% / 61.8%)

Fibonacci 3-Column (2:3:5)

CSS Grid Golden Layout

Fibonacci Spacing Scale

Golden Ratio Type Scale

Buttons

Button Variants

Button Sizes

Button States

Forms

Input Fields

Form Controls

Form Validation States

Cards

Elevated Card

Outlined Card

Filled Card

Navigation Components

Breadcrumbs

Pagination

Interactive Components

Tooltips

Dropdown

Modal

Modal Title

Collapsible / Accordion

Collections

Collection List

Collection with Actions

Tables

Bordered Table

Striped Table

Hover Table

Badges

Getting Started `v1.0.0`