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

From the repository, install its development dependencies and build the distributable files. This build creates dist/; copy the files into your own public assets directory. There is currently no published npm installation command.

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

You can also download the current preview stylesheet directly from this documentation site. It is a development build, not a versioned release package.

Start with reva.css. If you use reva-fonts.css, copy its adjacent fonts/ directory too. Fonts are optional.

2. Create a page

Choose HTML for its meaning. Native buttons need no component class; card and container identify layout patterns.

HTMLSelect text to copy
<!doctype html>
<html lang="en" data-theme="auto">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My RevaCSS page</title>
  <link rel="stylesheet" href="/assets/reva/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