Four pages · one package · no build step
Four pages, one package
Four finished pages that share the framework and nothing else: a different composition, a different density and a different default theme in each. Every one is a single HTML file linking the prebuilt assets from a sibling ivolt/ folder. Open one, then take the folder.
Photograph by Clark Street Mercantile on Unsplash.
The recipes
Studio
A creative studio: a transparent navbar over a cinematic cover with parallax, a marquee, stacked service cards, a gallery with the viewer, a team of avatars, a timeline and a contact stepper.
- navbar
- hero
- marquee
- card
- lightbox
- avatar
- timeline
- stepper
Console
A product console: a megamenu, a side drawer, counted figures, a data table with filter and sort, tabs, progress, skeletons, toasts, dialogs, a command palette, a datepicker and a validated form.
- megamenu
- drawer
- countup
- datatable
- tabs
- command
- datepicker
- toast
Journal
An editorial magazine: typography as the subject, a cover, a masonry of articles, text effects, a reading bar, the viewer, pagination, breadcrumbs, tooltips and popovers for notes, and a printed layout that works.
- typography
- text
- progress
- lightbox
- pagination
- breadcrumb
- popover
Store
A catalogue and a purchase that buys nothing: filters with a rich picker and a combobox, a product carousel, badges, prices as stats, a checkout stepper with a delivery date, a cart drawer, a confirmation dialog and a toast.
- picker
- combobox
- carousel
- badge
- stat
- stepper
- drawer
- dialog
Downloads
Every archive comes from the same sources as the pages above, so it always matches this version. Each recipe zip carries its own copy of the ivolt/ assets: unzip it and open index.html.
index.html, README.md and ivolt/.dist/ (CSS and JS), plus LICENSE and README.md.Sizes and file lists are listed in manifest.json.
Copy a recipe into your project
Each recipe lives in examples/recipes/<name>/index.html in the repository. Copy that folder together with examples/recipes/ivolt/ and open the page. The plain starter in examples/plain-html is the smallest possible version of the same setup.