⚛️ Customizable Atomic CSS Framework for everyone.
- 💡Inspirited by Atomic CSS, Vì Một Thế Giới Hoà Bình
- 👀 Guided by Stacks
- ✨ Build with SCSS
We all might agree that Atomic CSS is a helpful tool for both FE and BE development. There's a lot of Atomic CSS frameworks out there (like tailwindcss), however, to elevate the advantage of Atomic CSS, while keeping it in as light-weight as possible, and even customizable for each project, we have this project on the go.
Install NPM package with basic config
npm i @viivue/atomic-cssImport
import "@viivue/atomic-css";Or, you can download the default Atomic CSS files in the /dist folder.
Check the CDN served by jsDelivr here
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/viivue/[email protected]/dist/atomic.min.css">To add custom classes for a specific project, you will have to:
- Clone this repo to your local machine.
- Edit the
/scss/_config.scss, you will find some example templates there. - Generate the new Atomic CSS by
npm run prod.
npm install
# Watch SCSS files, then compile to previewed CSS
npm run dev
# Compile compressed CSS for distribution.
# Check version at `_defs.scss` and `package.json`
npm run prod
# Publish NPM package
# Auto-publish package on release using GitHub workflow
npm publish