Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📝 Add documentation implementation with several frameworks #181

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

📝 Add documentation implementation with several frameworks #181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38b7e67
:fire: Remove vanilla implementation from README in favour for IMPLEM…
SindreKjelsrud Oct 19, 2024
4579c3e
:construction: Added Astro-guide to IMPLEMENTATION.md
SindreKjelsrud Oct 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 144 additions & 0 deletions IMPLEMENTATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
# ➕ Implement ChimeraCSS

You can implement ChimeraCSS into your private project by installing the ChimeraCSS package and directly linking to the `chimera.css` file:

```bash
npm install chimeracss
yarn add chimeracss
pnpm add chimeracss
```
```javascript
import "chimeracss/build/chimera.css"; // Import the default ChimeraCSS styles
```

Alternatively, you can include this `<link>` tag in your HTML `<head>` section:

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

## Responsiveness

ChimeraCSS is built with responsiveness in mind. Ensure your application is responsive by including the following meta viewport tag in your `<head>`:

```html
<meta name="viewport" content="width=device-width, initial-scale=1" />
```

## Themes

ChimeraCSS includes multiple themes:

- chimera
- chimera-dark
- chimera-golden
- chimera-autumn
- chimera-blues
- chimera-plain

To use an alternative theme, change the filename in your import statement to match the theme. For example, to implement the dark theme:

```javascript
import "chimeracss/build/chimera-dark.css"; // Use the dark theme
```

Alternatively, you can include a theme from the CDN in your HTML `<head>`:

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

## Framework Implementations

### Astro

#### Step 1: Initialize an Astro Project

If you don’t have an Astro project already, you can create one with the following commands:

```bash
npm create astro@latest
cd my-astro-site
npm install
```

#### Step 2.1: Add ChimeraCSS via `<link>` tag

You can add ChimeraCSS directly in the `<head>` of your Astro HTML files:

```html
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- HERE -->
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/chimeracss/build/chimera.css"
/>
<!-- Remember to add this for responsiveness-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
```

#### Step 2.2: Add ChimeraCSS via NPM

Alternatively, you can install ChimeraCSS via npm (or `yarn`/`pnpm` if that's what you like):

```bash
npm install chimeracss
```

In your `index.astro` file:

```js
---
import "chimeracss/build/chimera.css"; // Import ChimeraCSS for this page
---

<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
```

#### Global Import of ChimeraCSS in Astro

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):

```html
<head>
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/chimeracss/build/chimera.css"
/>
<!-- Remember to add this for responsiveness-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
```

This method ensures that ChimeraCSS styles are applied globally across all pages in your site.
48 changes: 0 additions & 48 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,54 +44,6 @@ What we want to achieve with this framework is as following:
- 🪽 Fast and lightweight
- 🎨 Theme based - Easy to customize

## ➕ Implement Chimera

You can implement Chimera into your private project by downloading the ChimeraCSS package and directly link to the Chimera.css file:

```bash
npm install chimeracss
yarn add chimeracss
pnpm add chimeracss
```

```javascript
import "chimeracss/build/chimera.css";
```
or by including this tag in your HTML header.

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

### Responsiveness

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>``:

```HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
```

### Themes

Chimera has multiple themes:

- chimera
- chimera-dark
- chimera-golden
- chimera-autumn
- chimera-blues
- chimera-plain

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:

```javascript
import "chimeracss/build/chimera-dark.css";
```

## 🧑‍⚖️ License

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.
Expand Down
Loading