dashvar
CSS Variables Library. Strong defaults for good looking designs. Inspired by Tailwind CSS.
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.