CSS Variables Library. Strong defaults for good looking designs. Inspired by Tailwind CSS.
We recommend you follow the getting started page.
- Tiny (<1.8KB gzipped)
- Only CSS variables, no global styles. No risk to start using with an existing project.
- Colour palette
- Sizing and Scaling System
- Typography:
- Many more at full documentation
- [Optional modern (and opinionated) CSS reset](https://dashvar.com/default/docs/base-styles
- VS Code extension with IntelliSense
- NPM package
- Export variables as JS object from NPM package
- Good documentation
- Examples:
-
styled-components -
styled-jsx -
CSS modules
-
.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 */
}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);
}Please, we welcome any contributions to the project. Together, we can build a great, yet simple library for the long run.
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.