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
<!-- 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>
You can also install the NPM Package and import the CSS file from the
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