Get Started

Vrembem is a framework agnostic CSS component library. Getting started only requires including a single CSS file into your project.

Using CDN

For fast prototyping, use your favorite CDN (Content Delivery Network) to get Vrembem into your project without needing to install and build from NPM.

<link href="https://unpkg.com/vrembem/dist/index.css" rel="stylesheet" />

<link href="https://cdn.jsdelivr.net/npm/vrembem/dist/index.css" rel="stylesheet" />

Starter templates

Use this minimal starter template to begin prototyping with Vrembem now. Just copy/paste the contents into an HTML file locally and open it with your browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vrembem - Minimal starter template</title>
    <link href="https://unpkg.com/vrembem/dist/index.css" rel="stylesheet" />
  </head>
  <body>
    <section class="display-flex padding" style="min-height: 100vh;">
      <div class="margin-auto">
        <div class="content spacing text-align-center">
          <h1>Hello World</h1>
          <p>A minimal starter template powered by Vrembem via CDN.</p>
          <div class="flex justify-content-center foreground-subtle">
            <a class="link" href="https://vrembem.com/">Docs</a>
            <span>/</span>
            <a class="link" href="https://github.com/sebnitu/vrembem">GitHub</a>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

A starter template using the modal component:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vrembem - Modal starter template</title>
    <link href="https://unpkg.com/vrembem/dist/index.css" rel="stylesheet" />
  </head>
  <body>
    <main class="display-flex padding" style="min-height: 100vh;">
      <div class="margin-auto content spacing text-align-center">
        <h1>Hello World</h1>
        <p>A modal based starter template powered by Vrembem via CDN.</p>
        <div class="flex justify-content-center foreground-subtle">
          <a class="link" href="https://vrembem.com/">Docs</a>
          <span>/</span>
          <a class="link" href="https://github.com/sebnitu/vrembem">GitHub</a>
        </div>
        <button class="button button--color-primary margin-top-lg" command="show-modal" commandfor="modal-example" type="button">Open modal</button>
      </div>
    </main>
    <dialog id="modal-example" class="modal panel" closedby="any">
      <div class="panel__container">
        <div class="panel__header">
          <h2 class="panel__title">Modal Title</h2>
          <button class="link" command="close" commandfor="modal-example" type="button">Close</button>
        </div>
        <div class="panel__body">
          <p>This is an example implementation of a modal component.</p>
        </div>
        <div class="panel__footer">
          Modal footer goes here...
        </div>
      </div>
    </dialog>
  </body>
</html>

Using NPM

Vrembem is a collection of packages built with Sass that compiles to CSS. Install Vrembem via NPM and integrate it into your build pipeline to leverage Sass configurations and modules.

npm install vrembem

@use "vrembem";

@import "vrembem";

Style entries

Vrembem provides both Sass (SCSS) and CSS entries. Which one to choose depends on project setup and how much control you need over the output.

SCSS

Control output including prefixes and BEM naming conventions.
Use Sass modules for managing config, tokens, palettes, and theming.
Best for projects already using Sass that want deeper integration.

CSS

Minimal setup and no build tools required.
Customizable components using design token CSS variables.
Best for projects that don't use Sass and want minimal dependencies.

Library entry

Use the entire library by importing the base vrembem entry.

// The entire Vrembem library
@use "vrembem";

/* The entire Vrembem library */
@import "vrembem";

Layer entries

Or, import specific layers using layer based entries.

// CSS layer order
@use "vrembem/layers";
// Output: @layer tokens, base, components, utilities;

// Design token CSS variables
@use "vrembem/tokens";

// Base styles
@use "vrembem/base";

// Component styles
@use "vrembem/components";

// Utility styles
@use "vrembem/utilities";

/* CSS layer order */
@import "vrembem/layers";
/* Output: @layer tokens, base, components, utilities; */

/* Design token CSS variables */
@import "vrembem/tokens";

/* Base styles */
@import "vrembem/base";

/* Component styles */
@import "vrembem/components";

/* Utility styles */
@import "vrembem/utilities";

Component entries

Components can be imported on a per-package basis using package imports. View specific package documentation for more information on a package config and usage.

// Component specific entries
@use "@vrembem/<package>";

/* Component specific entries */
@import "@vrembem/<package>";

JavaScript entries

Vrembem provides JavaScript entries for packages that expose custom elements. Use the root vrembem entry when you want to import the exported classes and define custom elements yourself.

import { Drawer, Popover } from "vrembem";

customElements.define("vb-drawer", Drawer);
customElements.define("vb-popover", Popover);

Use the vrembem/define entry when you want to register all packaged custom elements automatically.

import "vrembem/define";

For individual packages, the same pattern applies.

import "@vrembem/drawer/define";
import "@vrembem/popover/define";

import { Drawer } from "@vrembem/drawer";
import { Popover } from "@vrembem/popover";

customElements.define("vb-drawer", Drawer);
customElements.define("vb-popover", Popover);

Configuration

Vrembem packages expose a $config Sass map that can be set using either the config module or Sass with clause methods.

When configuring an individual package directly, option keys should not be prefixed with the package name:

@use "@vrembem/button" with (
  $config: (
    "block-breakpoints": false
  )
);

When configuring packages through the vrembem library entry, package specific configurations should be prefixed with their name. Core configurations are not prefixed.

@use "vrembem" with (
  $config: (
    // Core options are not prefixed
    "theme-output": false,

    // Package specific option should be prefixed with the package name
    "button-block-breakpoints": false
  )
);

Check each package's own documentation page for the specific options it supports. For more on how the configuration system works under the hood, see the core/config module documentation.

Edit page

Philosophy

Menu

On this page