Skip to content

Commit

Permalink
47 color themes (#48)
Browse files Browse the repository at this point in the history
* Add chimera-dark and chimera-golden theme

* Updated CI/CD to compile themes, readme update, minor fixes

* created elements folder for partial sass

* remove test-code
  • Loading branch information
MarkusJohansen authored Sep 29, 2023
1 parent 8904290 commit ccd3f30
Show file tree
Hide file tree
Showing 32 changed files with 706 additions and 89 deletions.
10 changes: 8 additions & 2 deletions .github/workflows/npm-publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,14 @@ jobs:
with:
node-version: 16
- run: npm ci
- run: npm install -g sass
- run: sass sass/main.scss css/chimera.css
- name: install sass dependency
run: npm install -g sass
- name: compile chimera theme
run: sass sass/chimera.scss css/chimera.css
- name: compile chimera-dark theme
run: sass sass/chimera-dark.scss css/chimera-dark.css
- name: compile chimera-golden theme
run: sass sass/chimera-golden.scss css/chimera-golden.css

publish-npm:
needs: [format-prettier, compile-sass]
Expand Down
60 changes: 59 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

# ChimeraCSS

Classless CSS framework with a Clean, soft and modern design inspired By SakuraCSS and Marx.
Classless CSS framework with a clean, soft and modern design inspired By SakuraCSS and Marx.

## Why?

Expand Down Expand Up @@ -55,6 +55,64 @@ or
yarn add chimeracss
```

### Themes

Chimera has three themes: chimera, chimera-dark, chimera-golden. to use an alternative theme, change the filename in the import to the same as the theme:

Chimera-dark

```html
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/chimeracss@:version/css/chimera-dark.css"
/>
```

Chimera-golden

```html
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/chimeracss@:version/css/chimera-golden.css"
/>
```

### Theme comparisons

<div>
<p>No css/HTML only</p>
<img
align="center"
src="./public/img/no-css.png"
alt="Chimera"
width="50%"
/>
<p>Chimera:</p>
<img
align="center"
src="./public/img/chimera.png"
alt="Chimera"
width="50%"
/>
<p>Chimera-dark:</p>
<img
align="center"
src="./public/img/chimera-dark.png"
alt="Chimera"
width="50%"
/>
<p>Chimera-golden:</p>
<img
align="center"
src="./public/img/chimera-golden.png"
alt="Chimera"
width="50%"
/>

</div>

## License

You can check out the full license [here](https://github.com/J0hans1/Chimera/blob/master/LICENSE)
Expand Down
268 changes: 268 additions & 0 deletions css/chimera-dark.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions css/chimera-dark.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit ccd3f30

Please sign in to comment.