jasgigli-css v1.2.1
# 🌟 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>
🤝 Contributing
Contributions are welcome! Please open an issue or submit a pull request on GitHub.
📜 License
This project is licensed under the MIT License. See the LICENSE file for details.