Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 2 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 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-10T09:33:31.000Z (5 months ago)
- Last Synced: 2024-12-12T05:35:05.833Z (about 2 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
[![npm](https://badgen.net/npm/v/@viivue/atomic-css)](https://www.npmjs.com/package/@viivue/atomic-css)
[![minified](https://badgen.net/badge/minified/~8KB/cyan)](https://www.jsdelivr.com/package/gh/viivue/atomic-css)
[![jsdelivr](https://data.jsdelivr.com/v1/package/gh/viivue/atomic-css/badge?style=rounded)](https://www.jsdelivr.com/package/gh/viivue/atomic-css)
[![license](https://badgen.net/github/license/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
```