LEARN

Get started

RevaCSS styles native HTML and adds a small set of classes for component patterns. Your application does not need browser JavaScript or a CSS build step to use the generated files.

1. Get the stylesheets

This version is in development. Download the documentation stylesheet for experimentation, or build from source using the instructions below. Versioned GitHub downloads appear here after release publication is verified.

For an existing site, copy dist/ into your public assets and update the stylesheet path. Start with reva.css; reva.min.css is the minified equivalent. Fonts are optional: using reva-fonts.css also requires its adjacent fonts/ directory.

Build the stylesheets from source

For contributors who want to edit the framework’s CSS or design tokens:

BASHSelect text to copy
git clone https://github.com/eristavi/RevaCSS.git
cd RevaCSS
npm ci
npm run build:css

You can also download this documentation build’s stylesheet for experimentation. Use a versioned release when deploying your own site.

These pages describe RevaCSS 2.0.0 in development. Use the documentation build for a preview or build the stylesheets from source.

2. Create a page

Save this complete example beside the downloaded dist directory. Native buttons need no component class; card and container identify layout patterns.

HTMLSelect text to copy
<!doctype html>
<html lang="en" data-theme="auto" data-palette="default">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My RevaCSS page</title>
  <link rel="stylesheet" href="dist/reva.css">
</head>
<body>
  <main class="container">
    <h1>Your projects</h1>
    <article class="card">
      <h2>First project</h2>
      <p>Start with native content.</p>
      <button type="button">Save changes</button>
    </article>
  </main>
</body>
</html>

3. Configure the parent

Settings on html supply defaults for supported descendants. Omit anything you do not want to change.

HTMLSelect text to copy
<html lang="en" data-theme="dark" data-accent="violet"
      data-shape="rounded" data-density="comfortable">
  <!-- Components inherit these appearance settings. -->
</html>

Keep attributes on the parent where possible. Individual exceptions can override one setting without replacing the others. See styling and inheritance before adding configuration to every component.

4. Style part of an existing site

Load the scoped build instead of the global build. Put configuration on its .reva boundary; each boundary starts with its own defaults.

HTMLSelect text to copy
<link rel="stylesheet" href="/assets/reva/reva.scoped.css">
<section class="reva" data-theme="dark" data-accent="teal">
  <h2>A styled part of the page</h2>
  <button type="button">Save changes</button>
</section>

A CSS scope is not Shadow DOM isolation. Keep overlay markup within its boundary and use the matching scoped glass extension when needed.

Where to go next