vitre-css

v1.5.10

Published

3 days ago

Class-free and style-free web with a high-end glass finish for semantic HTML.

0High
0Medium
0Low

appurist

css classless class-free styleless style-free semantic-html stylesheet theme dark-mode

Vitre CSS

Vitre UI

The transparent style layer. Class-free, style-free web with a high-end finish. Clear. Light. Vitre.

A great looking web page without class="..." or style="..." on your HTML elements.

Just add <link rel="stylesheet" href="vitre.css"> (or equivalent) and you're done.

Vitre CSS is single-file CSS for making raw semantic HTML look polished by default. It honors semantic tags without polluting markup, so ordinary elements such as headings, links, buttons, forms, tables, code blocks, dialogs, and details receive modern light and dark theme styling without required classes.

Work has begun on a related but opposite project, vitre-js: styleless interactivity for semantic components. Use either package on its own, or pair them when you want Vitre styling and Vitre behavior together.

Install

Use the file directly:

<link rel="stylesheet" href="vitre.css">

Install from npm:

npm install vitre-css

Use a CDN:

<link rel="stylesheet" href="https://unpkg.com/vitre-css/vitre-base.css">
<link rel="stylesheet" href="https://unpkg.com/vitre-css/vitre.css">

For CDN usage, prefer the unversioned unpkg URLs. They resolve to the latest published npm version quickly while keeping copy/paste usage simple. vitre-base.css is optional; include it before vitre.css when you want Vitre's first-paint background, typography, theme, and page-width baseline to apply immediately.

Documentation

Read the documentation and examples.

Usage

Write semantic HTML and let Vitre style the elements directly:

<main>
  <section>
    <h1>Account settings</h1>
    <p>Manage your profile and notification preferences.</p>

    <form>
      <label>
        Email
        <input type="email" placeholder="[email protected]">
      </label>

      <button>Save changes</button>
    </form>
  </section>
</main>

Themes

Vitre follows the user's operating system preference by default with prefers-color-scheme. You can force a theme with data-theme on the root element:

<html data-theme="dark">

Supported values are light and dark.

Customization

The main customization API is CSS variables. Add your own stylesheet after Vitre and override --vitre-* values there:

<link rel="stylesheet" href="vitre.css">
<link rel="stylesheet" href="custom.css">

In custom.css, start with variable overrides:

:root {
  --vitre-hue: 168;
  --vitre-primary: hsl(var(--vitre-hue) 76% 42%);
  --vitre-font-weight: 400;
  --vitre-radius: 0.5rem;
  --vitre-measure: 80ch;
  --vitre-button-height: 40px;
  --vitre-button-bg-angle: 180deg;
}

Useful tokens include colors, spacing, typography, surfaces, borders, focus rings, forms, tables, shadows, and code blocks. See vitre.css for the full variable surface.

Buttons expose background and hover variables. Use data-variant for common button treatments:

:root {
  --vitre-button-bg-image: none;
}

For a single flat button, use the variant attribute instead of adding a class:

<button type="button" data-variant="flat">Flat button</button>

Other supported variants are outline, ghost, and plain:

<button type="button" data-variant="outline">Outline button</button>
<button type="button" data-variant="ghost">Ghost button</button>
<button type="button" data-variant="plain">Plain button</button>

Use data-color for semantic button intent. Supported values are primary, info, success, warning, and error; each variant decides whether that color is used as a fill, foreground, border, or hover tint:

<button type="button" data-color="success">Save</button>
<button type="button" data-color="error" data-variant="outline">Delete</button>
<button type="button" data-color="info" data-variant="ghost">Details</button>

The same data-color values are also supported on progress and meter:

<progress data-color="success" max="100" value="72">72%</progress>
<meter data-color="warning" min="0" max="100" value="68">68</meter>

Iframes are responsive by default with a 16 / 9 aspect ratio. Use data-fit="contain" on embedded or framed media that should opt into the same stable responsive ratio:

<iframe data-fit="contain" src="https://www.youtube.com/embed/..."></iframe>

Token swatches can use data-token:

<mark data-token="primary"></mark>
<mark data-token="surface"></mark>

If a selector does not expose the exact customization you need, override the element rule in your stylesheet after Vitre:

button {
  text-transform: none;
}

Prefer variables when they exist. If you find yourself repeatedly overriding the same kind of rule, that is a good sign Vitre should expose another --vitre-* variable for that customization.

What It Styles

Page layout primitives: body, header, main, section, article, aside, footer, and nav
Typography: headings, paragraphs, links, lists, blockquotes, mark, small, and horizontal rules
Code: code, pre, kbd, and samp
Forms: labels, buttons, inputs, textareas, selects, fieldsets, checkboxes, radios, ranges, and color inputs
Data and disclosure: tables, details, summary, dialog, progress, and meter
Data patterns: [data-kind="alert"], [data-color="warning"], [data-variant="outline"], [role="dialog"], and grouped form controls
Media: images, videos, SVGs, canvas, and iframes

Browser Support

Vitre targets modern browsers and uses current CSS features including cascade layers, color-mix(), :where(), :has(), logical properties, clamp(), and backdrop-filter. It favors a small, expressive stylesheet over legacy fallbacks.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme