From 38b7e6759d0e957e5aa5ef491c6e25230b8440fd Mon Sep 17 00:00:00 2001 From: SindreKjelsrud Date: Sat, 19 Oct 2024 11:22:57 +0200 Subject: [PATCH 1/2] :fire: Remove vanilla implementation from README in favour for IMPLEMENTATION.md file Signed-off-by: SindreKjelsrud --- README.md | 48 ------------------------------------------------ 1 file changed, 48 deletions(-) diff --git a/README.md b/README.md index b67fb4b..03f8f41 100644 --- a/README.md +++ b/README.md @@ -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 - -``` - -### 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 ``
``: - -```HTML - -``` - -### 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. From 4579c3eb47ec594a861cf4d6e7ae4ccf0495f455 Mon Sep 17 00:00:00 2001 From: SindreKjelsrud Date: Sat, 19 Oct 2024 11:23:52 +0200 Subject: [PATCH 2/2] :construction: Added Astro-guide to IMPLEMENTATION.md Signed-off-by: SindreKjelsrud --- IMPLEMENTATION.md | 144 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 IMPLEMENTATION.md diff --git a/IMPLEMENTATION.md b/IMPLEMENTATION.md new file mode 100644 index 0000000..148b731 --- /dev/null +++ b/IMPLEMENTATION.md @@ -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 `` tag in your HTML `` section: + +```html + +``` + +## Responsiveness + +ChimeraCSS is built with responsiveness in mind. Ensure your application is responsive by including the following meta viewport tag in your ``: + +```html + +``` + +## 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 ``: + +```html + +``` + +## 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 `` tag + +You can add ChimeraCSS directly in the `` of your Astro HTML files: + +```html + + + + + + + + + + Astro + + +

Astro

+ + +``` + +#### 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 +--- + + + + + + + + Astro + + +

Astro

+ + +``` + +#### 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 + + + + + +``` + +This method ensures that ChimeraCSS styles are applied globally across all pages in your site. \ No newline at end of file