Skip to content

Commit 5ead2c1

Browse files
committed
refactor(docs): improve readme instruction
1 parent 1dfffa9 commit 5ead2c1

1 file changed

Lines changed: 17 additions & 6 deletions

File tree

README.md

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ Or, you can download the default Atomic CSS files in the [`/dist` folder](https:
3838
Check the CDN served by jsDelivr [here](https://www.jsdelivr.com/package/gh/viivue/atomic-css?tab=files&path=dist)
3939

4040
```html
41-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/viivue/atomic-css@1.1.10/dist/atomic.min.css">
41+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/viivue/atomic-css@1.2.5/dist/atomic.min.css">
4242
```
4343

4444
### Customization
@@ -53,16 +53,24 @@ Build a custom Atomic CSS directly from your project without cloning this repo.
5353
npm i @viivue/atomic-css
5454
```
5555

56-
**2. Copy `_config.scss` from the repository into your project**
56+
**2. Copy `_config.scss` into your project**
5757

58-
Copy the file from `node_modules/@viivue/atomic-css/scss/_config.scss` — it already contains commented-out examples for all available variables (colors, fonts, breakpoints, etc.). Uncomment and edit only the variables you want to override; everything else falls back to the built-in defaults automatically.
58+
Download the config file directly from GitHub — it contains commented-out examples for all available variables (colors, fonts, breakpoints, etc.):
59+
60+
```shell
61+
curl -o _config.scss https://raw.githubusercontent.com/viivue/atomic-css/main/scss/_config.scss
62+
```
63+
64+
Or [view it on GitHub](https://github.com/viivue/atomic-css/blob/main/scss/_config.scss) and copy it manually.
65+
66+
Uncomment and edit only the variables you want to override; everything else falls back to the built-in defaults automatically.
5967

6068
**3. Add a build script to your `package.json`**
6169

6270
```json
6371
{
6472
"scripts": {
65-
"build:css": "atomic-css --config path/to/_config.scss --output path/to/output/"
73+
"build:css": "atomic-css --config scss/_config.scss --output dist/"
6674
}
6775
}
6876
```
@@ -77,9 +85,12 @@ This generates `atomic.css` and `atomic.min.css` in the output folder.
7785

7886
#### Option 2 — Clone & edit
7987

88+
For contributors or anyone who wants to fork and modify the framework itself.
89+
8090
1. Clone this repository to your local machine.
81-
2. Edit the `/scss/_config.scss`, you will find some example templates there.
82-
3. Generate the new Atomic CSS by `npm run prod`.
91+
2. Run `npm install` to install dependencies.
92+
3. Edit `/scss/_config.scss` to override variables (colors, fonts, breakpoints, etc.).
93+
4. Run `npm run prod` to compile the output CSS.
8394

8495
## Deployment
8596

0 commit comments

Comments
 (0)