Atomic CSS

⚛️ 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/npm/@viivue/atomic-css@1.2.5/dist/atomic.min.css">

Customization

Option 1 — CLI (recommended)

Build a custom Atomic CSS directly from your project without cloning this repo.

1. Install the package

npm i @viivue/atomic-css

2. Copy _config.scss into your project

Download the config file directly from GitHub — it contains commented-out examples for all available variables (colors, fonts, breakpoints, etc.):

curl -o _config.scss https://raw.githubusercontent.com/viivue/atomic-css/main/scss/_config.scss

Or view it on GitHub and copy it manually.

Uncomment and edit only the variables you want to override; everything else falls back to the built-in defaults automatically.

3. Add a build script to your package.json

{
  "scripts": {
    "build:css": "atomic-css --config scss/_config.scss --output dist/"
  }
}

4. Run

npm run build:css

This generates atomic.css and atomic.min.css in the output folder.

Option 2 — Clone & edit

For contributors or anyone who wants to fork and modify the framework itself.

1. Clone this repository to your local machine.
2. Run npm install to install dependencies.
3. Edit /scss/_config.scss to override variables (colors, fonts, breakpoints, etc.).
4. Run npm run prod to compile the output CSS.

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