Atomic CSS

Note

Atomic CSS will no longer be updated as we moved to TailwindCSS with our custom Tailwind preset here.

⚛️ 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.

Usage

NPM

Install NPM package with basic config

npm i @viivue/atomic-css

Import

import "@viivue/atomic-css";

Or, you can download the default Atomic CSS files in the /dist folder.

CDN

Check the CDN served by jsDelivr here

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/viivue/[email protected]/dist/atomic.min.css">

Customization

To add custom classes for a specific project, you will have to:

1. Clone this repo to your local machine.
2. Edit the /scss/_config.scss, you will find some example templates there.
3. Generate the new Atomic CSS by npm run prod.

Deployment

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