Jasgigli-css NPM

# 🌟 JasGigli CSS Library 🌟

JasGigli CSS is a modern CSS library designed to work seamlessly with multiple JavaScript frameworks including React, Next.js, SvelteKit, Vue, Nest.js, jQuery, and HTMX. It provides a set of reusable styled components and themes to help you build beautiful and consistent user interfaces effortlessly.

## 🚀 Installation

You can install JasGigli CSS via npm:

```bash
npm install jasgigli-css
```

🛠 Usage

React

To use JasGigli CSS in a React project:

Install the library:
```
npm install jasgigli-css
```

Wrap your application with JasgigliProvider and use the provided components:

// App.js
import React from "react";
import { JasgigliProvider, Navbar } from "jasgigli-css";

const App = () => (
  <JasgigliProvider>
    <Navbar />
  </JasgigliProvider>
);

export default App;

More Components like Cards, Buttons etc

// App.js
import React from "react";
import {
  JasgigliProvider,
  Button,
  Container,
  Navbar,
  Card,
} from "jasgigli-css";

const App = () => (
  <JasgigliProvider>
    <Navbar />
    <Container>
      <Button>Click me</Button>
      <Card>
        <p>Content inside a card</p>
      </Card>
    </Container>
  </JasgigliProvider>
);

export default App;

Next.js

To use JasGigli CSS in a Next.js project:

Install the library:
```
npm install jasgigli-css
```

Wrap your application with JasgigliProvider and use the provided components:

// pages/_app.js
import React from "react";
import { JasgigliProvider } from "jasgigli-css";

const MyApp = ({ Component, pageProps }) => (
  <JasgigliProvider>
    <Component {...pageProps} />
  </JasgigliProvider>
);

export default MyApp;

// pages/index.js
import React from "react";
import { Button, Container, Navbar, Card } from "jasgigli-css";

const Home = () => (
  <>
    <Navbar />
    <Container>
      <Button>Click me</Button>
      <Card>
        <p>Content inside a card</p>
      </Card>
    </Container>
  </>
);

export default Home;

SvelteKit

To use JasGigli CSS in a SvelteKit project:

Install the library:
```
npm install jasgigli-css
```

Import and use the provided components:

<!-- src/routes/+page.svelte -->
<script>
  import { Navbar } from "jasgigli-css";
</script>

<Navbar />

Vue

To use JasGigli CSS in a Vue project:

Install the library:
```
npm install jasgigli-css
```

Import and use the provided components:

<!-- src/App.vue -->
<template>
  <Navbar />
</template>

<script>
import { Navbar } from "jasgigli-css";

export default {
  components: {
    Navbar,
  },
};
</script>

Nest.js

To use JasGigli CSS in a Nest.js project:

Install the library:
```
npm install jasgigli-css
```

For server-side rendering (SSR), you may need to include JasGigli CSS in your frontend code.

// In your NestJS frontend application setup
import "jasgigli-css"; // Ensure the CSS is applied

jQuery

To use JasGigli CSS with jQuery:

Install the library:
```
npm install jasgigli-css
```

Include the CSS file in your HTML:

<link rel="stylesheet" href="node_modules/jasgigli-css/dist/styles.css" />

Use the components in your HTML with jQuery:

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/jasgigli-css/dist/jasgigli-css.js"></script>
<script>
  $(document).ready(function () {
    // Initialize components or use them as needed
  });
</script>

HTMX

To use JasGigli CSS with HTMX:

Install the library:
```
npm install jasgigli-css
```

Include the CSS file in your HTML:

<link rel="stylesheet" href="node_modules/jasgigli-css/dist/styles.css" />

Use HTMX for AJAX requests and update the DOM with JasGigli CSS components:

<div hx-get="/your-endpoint" hx-target="#content">
  <button>Load Content</button>
</div>

<div id="content">
  <!-- Content updated by HTMX -->
</div>