https://github.com/viivue/atomic-css
⚛️ Customizable Atomic CSS Framework for everyone.
https://github.com/viivue/atomic-css
atomic-css css css-framework sass scss stacks
Last synced: 3 months ago
JSON representation
⚛️ Customizable Atomic CSS Framework for everyone.
- Host: GitHub
- URL: https://github.com/viivue/atomic-css
- Owner: viivue
- License: mit
- Created: 2022-05-16T10:12:10.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-10T09:33:31.000Z (about 1 year ago)
- Last Synced: 2024-12-12T05:35:05.833Z (11 months ago)
- Topics: atomic-css, css, css-framework, sass, scss, stacks
- Language: SCSS
- Homepage:
- Size: 188 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Atomic CSS
> [!NOTE]
> Atomic CSS will no longer be updated as we moved to TailwindCSS with our [custom Tailwind preset here](https://github.com/viivue/tailwindcss-preset).
[](https://www.npmjs.com/package/@viivue/atomic-css)
[](https://www.jsdelivr.com/package/gh/viivue/atomic-css)
[](https://www.jsdelivr.com/package/gh/viivue/atomic-css)
[](https://github.com/viivue/atomic-css/blob/main/LICENSE)
> ⚛️ Customizable Atomic CSS Framework for everyone.
- 💡Inspirited by [Atomic CSS, Vì Một Thế Giới Hoà Bình](https://ehkoo.com/bai-viet/introduction-to-functional-utility-first-atomic-css)
- 👀 Guided by [Stacks](https://stackoverflow.design/product/guidelines/using-stacks/)
- ✨ Build with [SCSS](https://sass-lang.com/)
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](https://tailwindcss.com/)), 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
```shell
npm i @viivue/atomic-css
```
Import
```js
import "@viivue/atomic-css";
```
Or, you can download the default Atomic CSS files in the [`/dist` folder](https://github.com/viivue/atomic-css/tree/main/dist).
### CDN
Check the CDN served by jsDelivr [here](https://www.jsdelivr.com/package/gh/viivue/atomic-css?tab=files&path=dist)
```html
```
### 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
```shell
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
```