dashvar

CSS Variables Library. Strong defaults for good looking designs. Inspired by Tailwind CSS.

Full documentation

Getting started

We recommend you follow the getting started page.

Features:

• [x] Tiny (<1.8KB gzipped)
• [x] Only CSS variables, no global styles. No risk to start using with an existing project.
  • [x] Colour palette
  • [x] Sizing and Scaling System
  • [x] Typography:
    • [x] Font size scale
    • [x] Line height scale
    • [x] Font family
  • [x] Many more at full documentation
• [x] [Optional modern (and opinionated) CSS reset](https://dashvar.com/default/docs/base-styles
• [x] VS Code extension with IntelliSense
• [x] NPM package
  • [x] Export variables as JS object from NPM package
• [x] Good documentation
• [ ] Examples:
  • [ ] styled-components
  • [ ] styled-jsx
  • [ ] CSS modules

Usage example:

.component {
  color: var(--gray-800);
  font-size: var(--font-size-2); /* 1rem / 16px */
  line-height: var(--line-height-2); /* 1.5rem / 24px */
  padding: var(--size-5)); /* 1.25rem / 20px	*/
}

/* If preferred, you can use @media queries */
.md .component {
  padding: var(--size-10); /* 2.5rem / 40px	*/
}

Override variables

You can override any of the variables with your own if you need to:

:root {
  /* Just don't ever do this exact ugly override ;) */
  --blue-500: rgb(0, 0, 255);
}

Contributing

Please, we welcome any contributions to the project. Together, we can build a great, yet simple library for the long run.

Donations

Support the project on the Dashvar GitHub Sponsors page.

The project is maintained, time and financially wise, by me (Carlos Baraza). I live in London, UK. And I strive to create an organization that can return some value to society in the best way I know how, technology.

Unfortunately, creating Open Source Software, although a great philanthropic exercise for the mind and the soul, has some disadvantages in comparison with proprietary software. I would love to continue providing value, and your contribution really makes a difference, even if it is really small.

The funds will be used to maintain and create useful projects for the development community.