Getting Started

Dashvar is a collection of CSS Variables that will help you setting up a design system. There is a multitude of reasons why having a design system is beneficial to your development.

Just a few carefully selected CSS Variables could make a huge impact in your development experience.

The easiest way to get started is by adding the tiny (<1.5KB) CSS file to the <head> element of your HTML. We recommend using jsDelivr as a CDN to make it faster. Just add the following link to your head:

<!-- Optional base styles (Reset + Remove common styles to start from scratch) -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/dashvars/dashvar/dist/base.css"
/>

<!-- Add Dashvar CSS Variables -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/dashvars/dashvar/dist/dashvar.css"
/>

<!-- Optional tiny helpers (<1KB). Body media classes. -->
<script src="https://cdn.jsdelivr.net/gh/dashvars/dashvar/dist/dashvar-helpers.js"></script>

NPM

You can also install the NPM Package and import the CSS file from the dist folder.

npm i dashvar

# or with yarn
yarn add dashvar

After this, you will need to import the CSS in your build. There are many ways in which you could do this, and it highly depends on your build setup. If you are using Webpack or a similar bundler, it is likely the following import statements would work for you:

import "dashvar/dist/base.css"; // Optional
import "dashvar/dist/dashvar.css";
import "dashvar/dist/dashvar-helpers"; // Optional for media queries