Vanilla Site Boilerplate

A lightweight sandbox project focused entirely on experimenting with the latest native web features in 2026.

It is a space to build zero-dependency components using Native Modals, Native Popovers, Container Queries, and other cutting-edge standards to explore what's new (2026) in vanilla web development today.

Stack

• Vite — dev server and production build
• Vanilla JavaScript (native ES modules)
• Sass/SCSS
• ESLint (flat config) and Prettier

Prerequisites

• Node.js 20 or later recommended

Setup

npm install

Development

npm run dev

Opens a local dev server at http://localhost:5173.

Production build

npm run build

Output is written to dist/.

Preview production build

npm run preview

Linting and formatting

npm run lint
npm run format
npm run format:check

Project structure

/
├── public/              # Static assets (favicon, robots.txt)
├── src/
│   ├── scripts/
│   │   ├── main.js              # Application entry point
│   │   └── features/            # Feature-specific modules
│   └── styles/
│       ├── abstracts/           # Design tokens
│       ├── base/                # Reset and global styles
│       ├── components/          # Component styles
│       └── main.scss            # Style entry point
├── index.html                   # HTML entry point
├── eslint.config.js
├── package.json
└── AGENTS.md                    # AI/coding-agent guidance

Customizing

1. Replace placeholder content in index.html (site name, sections, footer).
2. Adjust design tokens in src/styles/abstracts/_tokens.scss.
3. Add feature modules under src/scripts/features/ and import them from main.js.
4. Add component styles under src/styles/components/ and @use them in main.scss.

PWA

Basic Progressive Web App support is included:

• public/manifest.webmanifest — app name, icons, theme color, and display mode.
• public/sw.js — a service worker that caches the app shell for offline use (network-first for navigations, stale-while-revalidate for other assets).
• The service worker is registered from src/scripts/features/pwa.js, and only in production builds — run npm run build && npm run preview to test it.

Bump CACHE_NAME in public/sw.js when you want clients to refresh cached assets.

Modern platform features

The #platform section in index.html demonstrates native, framework-free browser capabilities, each as a progressive enhancement with a graceful fallback:

• <dialog> modal — src/scripts/features/platform.js
• Popover API + CSS anchor positioning (declarative, no JS)
• View Transitions API for crossfading DOM state
• Container queries (resize the demo to see it react to its container)
• Scroll-driven animations (scroll() progress bar + view() reveals)
• Native form/UI: :user-valid / :user-invalid, <datalist>, <details>

Styles live in src/styles/components/_platform.scss. To remove the demos, delete that partial, the #platform section, and features/platform.js.

License

MIT