REVACSS / COMPLETE WEBSITES

A shop with room to breathe.

Explore a product catalogue, category collections, individual products and a sample bag. Reuse the same saved appearance settings and download complete starting HTML.

Customize this demo

Every setting updates the website immediately. Your choices are remembered across demo pages when browser storage is available. You can also close with Escape or a click outside.

Theme

Palette

Material

Shape

Advanced options · motion, spacing and more

MotionAction transitions, accordion expansion and chevron rotation (expressive adds a fade), press movement, decorative edges, custom spinners, switch transitions and skeleton shimmer. Reduced motion wins; native progress is browser-owned.

Decorative edgesDecorative borders on buttons, .button links and cards. Shine sweeps on interaction; animated turns continuously. Native action inputs keep regular borders.

DensityControl and surface padding, list and description spacing, card sections and layout spacing.

ShadowsAction and surface shadows. Text-control inset shadows are configured with data-controls.

FillButton, badge and alert gradients; optional glass sheen. Does not change material.

TypographyPage or subtree typography.

Control sizeControls, menu actions, badges, alerts, accordion summaries, breadcrumbs, pagination, form labels, choice labels, spinners and avatars.

BordersStyled control and surface borders, table rules and navigation boundaries. Invalid-state and forced-colour boundaries take priority.

Page widthMaximum width of .container.

Navbar layout

ContrastForeground and boundary contrast; optional glass becomes opaque. System preferences retain their component-specific priority.

Motion changes transitions and popover entrances; edges can animate continuously or shine on interaction. Device accessibility preferences take priority.

<html lang="en"
  data-theme="auto"
  data-theme="light"
  data-theme="dark"
  data-palette="default"
  data-palette="mono"
  data-palette="sand"
  data-palette="ocean"
  data-palette="cobalt"
  data-palette="citrus"
  data-palette="violet"
  data-palette="forest"
  data-material="solid"
  data-material="glass"
  data-material="veil"
  data-material="soft"
  data-shape="square"
  data-shape="subtle"
  data-shape="rounded"
  data-shape="pill"
  data-motion="none"
  data-motion="subtle"
  data-motion="expressive"
  data-edge="plain"
  data-edge="gradient"
  data-edge="shine"
  data-edge="animated"
  data-density="compact"
  data-density="comfortable"
  data-density="spacious"
  data-depth="flat"
  data-depth="subtle"
  data-depth="pronounced"
  data-fill="gradient"
  data-fill="solid"
  data-type="compact"
  data-type="standard"
  data-type="large"
  data-size="small"
  data-size="medium"
  data-size="large"
  data-border="subtle"
  data-border="defined"
  data-border="none"
  data-width="narrow"
  data-width="standard"
  data-width="wide"
  data-navbar="standard"
  data-navbar="centered"
  data-navbar="floating"
  data-navbar="split"
  data-contrast="auto"
  data-contrast="more">

Download starting HTML

Downloads include your current settings with the optional helper enabled. Without JavaScript, the preview still works; copy the selected attributes into the starting HTML. Reset clears saved demo choices and restores this page’s defaults.

LESS, BUT LOVELIER.

Lighting.

Considered pieces for the spaces you make your own.

Explore the collection

Simple forms. A little warmth. Room to breathe.

Lighting

Bestseller

Arc table lamp

€89.00

THE STILL APPROACH

Keep what matters.

We believe the things you use every day deserve a little more thought. Familiar materials, useful shapes, and details that make you want to keep them.

Honest materials

Natural textures and carefully chosen finishes.

A considered collection

Fewer objects, with more room for each one.

Made for everyday

Useful pieces that belong in your daily rituals.

Delivery and returns

This fictional collection illustrates a store with €8 delivery and returns within 30 days. No orders or payments are processed.

Make this shop yours.

Products, prices, stock and the two-item bag are fictional sample data. Category and product links open complete pages. A commerce backend supplies inventory, cart updates and checkout; this starter does not accept orders or payments.

View complete starting HTML

<!DOCTYPE html>
<html lang="en" data-theme="auto" data-palette="default" data-material="solid" data-shape="rounded">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Still · RevaCSS shop demo</title>
<script id="reva-settings-schema" type="application/json">{"kind":"demo","values":{"theme":["auto","light","dark"],"palette":["default","mono","sand","ocean","cobalt","citrus","violet","forest"],"material":["solid","glass","veil","soft"],"shape":["square","subtle","rounded","pill"],"motion":["none","subtle","expressive"],"edge":["plain","gradient","shine","animated"],"density":["compact","comfortable","spacious"],"depth":["flat","subtle","pronounced"],"fill":["gradient","solid"],"type":["compact","standard","large"],"size":["small","medium","large"],"border":["subtle","defined","none"],"width":["narrow","standard","wide"],"navbar":["standard","centered","floating","split"],"contrast":["auto","more"]}}</script>
<script id="reva-settings-runtime" src="/RevaCSS/settings.js?v=f9ab880ccb15b9eb488ca65ef2ad687a4870aa28">
</script>
<meta name="description" content="A fictional shop with considered objects, built with native HTML and RevaCSS.">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva-fonts.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.motion.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.selects.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.glass.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.veil.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/reva/reva.soft.css">
<link rel="stylesheet" href="https://eristavi.github.io/RevaCSS/demos/shop.css">
</head>
<body class="shop-site">
<a class="skip-link" href="#shop-title">Skip to content</a>
<header class="container">
<nav class="top-menu" aria-label="Still shop navigation" style="--re-menu-anchor: --still-navigation">
<a class="menu-brand" href="https://eristavi.github.io/RevaCSS/demos/shop/source.html">still.</a>
<ul class="menu-items menu-desktop">
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source.html" aria-current="page">Shop</a>
</li>
<li class="menu-dropdown" style="--re-menu-branch-anchor: --still-desktop-collection-anchor">
<button type="button" class="menu-toggle" popovertarget="still-desktop-collection">Collections</button>
<ul class="menu-panel" id="still-desktop-collection" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="still-desktop-collection" popovertargetaction="hide">Back to main menu</button>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-lighting.html">Lighting</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-furniture.html">Furniture</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-accessories.html">Accessories</a>
</li>
</ul>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source.html#shop-story">Our story</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/bag.html">Bag</a>
</li>
</ul>
<button type="button" class="menu-toggle menu-collapse" popovertarget="still-mobile-menu" aria-label="Menu">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<ul class="menu-items menu-mobile" id="still-mobile-menu" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="still-mobile-menu" popovertargetaction="hide">Close menu</button>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source.html" aria-current="page">Shop</a>
</li>
<li class="menu-dropdown">
<button type="button" class="menu-toggle" popovertarget="still-mobile-collection">Collections</button>
<ul class="menu-panel" id="still-mobile-collection" popover="auto">
<li class="menu-back">
<button type="button" class="menu-toggle" popovertarget="still-mobile-collection" popovertargetaction="hide">Back to main menu</button>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-lighting.html">Lighting</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-furniture.html">Furniture</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-accessories.html">Accessories</a>
</li>
</ul>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source.html#shop-story">Our story</a>
</li>
<li>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/bag.html">Bag</a>
</li>
</ul>
</nav>
</header>
<main class="container" aria-label="Still shop">
<header class="shop-intro shop-feature">
<div>
<p class="shop-kicker">LESS, BUT LOVELIER.</p>
<h1 id="shop-title">Lighting.</h1>
<p>Considered pieces for the spaces you make your own.</p>
<a class="button" href="#shop-products">Explore the collection <span aria-hidden="true">↘</span>
</a>
</div>
<figure>
<svg class="shop-art" viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="400" height="320" rx="12" fill="var(--re-surface-alt)">
</rect>
<ellipse cx="200" cy="271" rx="100" ry="13" fill="#000" opacity=".07"/>
<path d="M190 126v130" stroke="#756556" stroke-width="13"/>
<ellipse cx="190" cy="259" rx="60" ry="13" fill="#756556"/>
<path d="M113 137q15-91 77-91t77 91Z" fill="#ccb89b"/>
<path d="M122 137h137" stroke="#f1e6d3" stroke-width="7"/>
</svg>
<figcaption>Simple forms. A little warmth. Room to breathe.</figcaption>
</figure>
</header>
<div class="toolbar shop-collection">
<nav class="toolbar" aria-label="Shop categories">
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source.html">All objects</a>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-lighting.html" aria-current="page">Lighting</a>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-furniture.html">Furniture</a>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/category-accessories.html">Accessories</a>
</nav>
<span>1 objects</span>
</div>
<section class="shop-products" id="shop-products" aria-label="Products">
<article class="card">
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/product-arc-lamp.html" aria-label="View Arc table lamp">
<svg class="shop-art" viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="400" height="320" rx="12" fill="var(--re-surface-alt)">
</rect>
<ellipse cx="200" cy="271" rx="100" ry="13" fill="#000" opacity=".07"/>
<path d="M190 126v130" stroke="#756556" stroke-width="13"/>
<ellipse cx="190" cy="259" rx="60" ry="13" fill="#756556"/>
<path d="M113 137q15-91 77-91t77 91Z" fill="#ccb89b"/>
<path d="M122 137h137" stroke="#f1e6d3" stroke-width="7"/>
</svg>
</a>
<div class="row justify-between">
<p class="shop-kicker">Lighting</p>
<span class="badge">Bestseller</span>
</div>
<h2>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source/product-arc-lamp.html">Arc table lamp</a>
</h2>
<p>€89.00</p>
</article>
</section>
<section class="shop-story" id="shop-story" aria-labelledby="shop-story-title">
<p class="shop-kicker">THE STILL APPROACH</p>
<h2 id="shop-story-title">Keep what matters.</h2>
<p>We believe the things you use every day deserve a little more thought. Familiar materials, useful shapes, and details that make you want to keep them.</p>
<div class="grid">
<article>
<h3>Honest materials</h3>
<p>Natural textures and carefully chosen finishes.</p>
</article>
<article>
<h3>A considered collection</h3>
<p>Fewer objects, with more room for each one.</p>
</article>
<article>
<h3>Made for everyday</h3>
<p>Useful pieces that belong in your daily rituals.</p>
</article>
</div>
</section>
<section aria-label="Shop information">
<details>
<summary>Delivery and returns</summary>
<p>This fictional collection illustrates a store with €8 delivery and returns within 30 days. No orders or payments are processed.</p>
</details>
</section>
</main>
<footer class="container row justify-between">
<strong>still.</strong>
<small>Objects for everyday · Fictional shop demonstration</small>
<a href="https://eristavi.github.io/RevaCSS/demos/shop/source.html">Back to the collection</a>
</footer>
</body>
</html>

Downloads include the current appearance settings with the optional helper enabled. Download the linked CSS files and change their paths for your own hosting. Standalone product and category links lead to the hosted HTML examples.

shop.css supplies page composition. Cards, badges, navigation, breadcrumbs, buttons and disclosures use existing RevaCSS components. The product gallery reuses native-radio tabs with overview, detail and dimensions views. Illustrations are inline SVG; no new core component or data attribute is needed.