Skip to content

Commit b3f0bad

Browse files
SindreKjelsrudSindreKjelsrud
authored
docs: Add Astro-implementation docs (#181)
* 🔥 Remove vanilla implementation from README in favour for IMPLEMENTATION.md file Signed-off-by: SindreKjelsrud <[email protected]> * 🚧 Added Astro-guide to IMPLEMENTATION.md Signed-off-by: SindreKjelsrud <[email protected]> --------- Signed-off-by: SindreKjelsrud <[email protected]>
2 parents 26b4d61 + 4579c3e commit b3f0bad

File tree

2 files changed

+144
-48
lines changed

2 files changed

+144
-48
lines changed

‎IMPLEMENTATION.md‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
# ➕ Implement ChimeraCSS
2+
3+
You can implement ChimeraCSS into your private project by installing the ChimeraCSS package and directly linking to the `chimera.css` file:
4+
5+
```bash
6+
npm install chimeracss
7+
yarn add chimeracss
8+
pnpm add chimeracss
9+
```
10+
```javascript
11+
import "chimeracss/build/chimera.css"; // Import the default ChimeraCSS styles
12+
```
13+
14+
Alternatively, you can include this `<link>` tag in your HTML `<head>` section:
15+
16+
```html
17+
<link
18+
rel="stylesheet"
19+
type="text/css"
20+
href="https://unpkg.com/chimeracss/build/chimera.css"
21+
/>
22+
```
23+
24+
## Responsiveness
25+
26+
ChimeraCSS is built with responsiveness in mind. Ensure your application is responsive by including the following meta viewport tag in your `<head>`:
27+
28+
```html
29+
<meta name="viewport" content="width=device-width, initial-scale=1" />
30+
```
31+
32+
## Themes
33+
34+
ChimeraCSS includes multiple themes:
35+
36+
- chimera
37+
- chimera-dark
38+
- chimera-golden
39+
- chimera-autumn
40+
- chimera-blues
41+
- chimera-plain
42+
43+
To use an alternative theme, change the filename in your import statement to match the theme. For example, to implement the dark theme:
44+
45+
```javascript
46+
import "chimeracss/build/chimera-dark.css"; // Use the dark theme
47+
```
48+
49+
Alternatively, you can include a theme from the CDN in your HTML `<head>`:
50+
51+
```html
52+
<link
53+
rel="stylesheet"
54+
type="text/css"
55+
href="https://unpkg.com/chimeracss/build/chimera-dark.css"
56+
/>
57+
```
58+
59+
## Framework Implementations
60+
61+
### Astro
62+
63+
#### Step 1: Initialize an Astro Project
64+
65+
If you don’t have an Astro project already, you can create one with the following commands:
66+
67+
```bash
68+
npm create astro@latest
69+
cd my-astro-site
70+
npm install
71+
```
72+
73+
#### Step 2.1: Add ChimeraCSS via `<link>` tag
74+
75+
You can add ChimeraCSS directly in the `<head>` of your Astro HTML files:
76+
77+
```html
78+
<html lang="en">
79+
<head>
80+
<meta charset="utf-8" />
81+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
82+
<!-- HERE -->
83+
<link
84+
rel="stylesheet"
85+
type="text/css"
86+
href="https://unpkg.com/chimeracss/build/chimera.css"
87+
/>
88+
<!-- Remember to add this for responsiveness-->
89+
<meta name="viewport" content="width=device-width, initial-scale=1" />
90+
<meta name="generator" content={Astro.generator} />
91+
<title>Astro</title>
92+
</head>
93+
<body>
94+
<h1>Astro</h1>
95+
</body>
96+
</html>
97+
```
98+
99+
#### Step 2.2: Add ChimeraCSS via NPM
100+
101+
Alternatively, you can install ChimeraCSS via npm (or `yarn`/`pnpm` if that's what you like):
102+
103+
```bash
104+
npm install chimeracss
105+
```
106+
107+
In your `index.astro` file:
108+
109+
```js
110+
---
111+
import "chimeracss/build/chimera.css"; // Import ChimeraCSS for this page
112+
---
113+
114+
<html lang="en">
115+
<head>
116+
<meta charset="utf-8" />
117+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
118+
<meta name="viewport" content="width=device-width" />
119+
<meta name="generator" content={Astro.generator} />
120+
<title>Astro</title>
121+
</head>
122+
<body>
123+
<h1>Astro</h1>
124+
</body>
125+
</html>
126+
```
127+
128+
#### Global Import of ChimeraCSS in Astro
129+
130+
To apply ChimeraCSS across your entire Astro site, you can import it globally by modifying your `src/layouts/BaseLayout.astro` file (or whichever layout file you use):
131+
132+
```html
133+
<head>
134+
<link
135+
rel="stylesheet"
136+
type="text/css"
137+
href="https://unpkg.com/chimeracss/build/chimera.css"
138+
/>
139+
<!-- Remember to add this for responsiveness-->
140+
<meta name="viewport" content="width=device-width, initial-scale=1" />
141+
</head>
142+
```
143+
144+
This method ensures that ChimeraCSS styles are applied globally across all pages in your site.

‎README.md‎

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -44,54 +44,6 @@ What we want to achieve with this framework is as following:
4444
- 🪽 Fast and lightweight
4545
- 🎨 Theme based - Easy to customize
4646

47-
## ➕ Implement Chimera
48-
49-
You can implement Chimera into your private project by downloading the ChimeraCSS package and directly link to the Chimera.css file:
50-
51-
```bash
52-
npm install chimeracss
53-
yarn add chimeracss
54-
pnpm add chimeracss
55-
```
56-
57-
```javascript
58-
import "chimeracss/build/chimera.css";
59-
```
60-
or by including this tag in your HTML header.
61-
62-
```html
63-
<link
64-
rel="stylesheet"
65-
type="text/css"
66-
href="https://unpkg.com/chimeracss/build/chimera.css"
67-
/>
68-
```
69-
70-
### Responsiveness
71-
72-
ChimeraCSS is built with responsiveness in mind. All you have to do is to ensure that your application is responsive when using Chimera, and to include the ``Responsiveness tag`` in your ``<header>``:
73-
74-
```HTML
75-
<meta name="viewport" content="width=device-width, initial-scale=1">
76-
```
77-
78-
### Themes
79-
80-
Chimera has multiple themes:
81-
82-
- chimera
83-
- chimera-dark
84-
- chimera-golden
85-
- chimera-autumn
86-
- chimera-blues
87-
- chimera-plain
88-
89-
To use an alternative theme, change the filename in the import to the same as the theme. Here is an example of how to implement chimera-dark using the `node_modules` import method:
90-
91-
```javascript
92-
import "chimeracss/build/chimera-dark.css";
93-
```
94-
9547
## 🧑‍⚖️ License
9648

9749
You can check out the full license [here](https://github.com/J0hans1/Chimera/blob/master/LICENSE). This project is licensed under the terms of the **Apache License 2.0** license.

0 commit comments

Comments
 (0)