Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including vrembem with all npm packages installed. Try it out:

var vrembem = require("vrembem")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vrembem v1.24.1

A component library based on the BEM methodology.

Vrembem

A complete collection of all Vrembem components into a single comprehensive package for convenience.

npm version

Documentation

Installation

Via CDN

<!-- Include styles -->
<link rel="stylesheet" href="https://unpkg.com/vrembem/dist/styles.css">

<!-- Include scripts -->
<script src="https://unpkg.com/vrembem"></script>

<script>
  // All Vrembem JS modules are loaded into the vrembem namespace
  console.log(vrembem);
</script>

Via NPM

npm install vrembem

Styles

To include all Vrembem components into your styles, just import the vrembem package in your Sass manifest file.

@use "vrembem";

All component variables, functions and mixins are forwarded under their respective namespace and can be customized:

@use "vrembem" with (
  $button-padding: 1rem 2rem
);

Customize core variables which all components inherit from. The example below will prefix all components with vb- to help namespace styles:

@use "vrembem" with (
  $core-prefix-block: "vb-"
);

JavaScript

Import and initialize the components you'll need:

// Import all under the vb namespace
import * as vb from 'vrembem';
const drawer = new vb.Drawer({ autoInit: true });

// Or import individual components
import { Drawer } from 'vrembem';
const drawer = new Drawer({ autoInit: true });

Note that core modules do not need to be initialized since they're just a set of helpful utility and functional modules.

Markup

Include the component's markup into your project. Use the online documentation for more information, customization options, code examples and available modifiers.

<div class="drawer__wrapper">
  <aside data-drawer="[unique-id]" class="drawer">
    <div class="drawer__item">
      <button data-drawer-close>...</button>
    </div>
  </aside>
  <div class="drawer__main">
    <button data-drawer-toggle="[unique-id]">...</button>
  </div>
</div>

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free