1.2.1 • Published 12 months ago

jasgigli-css v1.2.1

Weekly downloads
-
License
MIT
Repository
github
Last release
12 months ago
# 🌟 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:

  1. Install the library:

    npm install jasgigli-css
  2. 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:

  1. Install the library:

    npm install jasgigli-css
  2. 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:

  1. Install the library:

    npm install jasgigli-css
  2. 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:

  1. Install the library:

    npm install jasgigli-css
  2. 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:

  1. Install the library:

    npm install jasgigli-css
  2. 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:

  1. Install the library:

    npm install jasgigli-css
  2. Include the CSS file in your HTML:

    <link rel="stylesheet" href="node_modules/jasgigli-css/dist/styles.css" />
  3. 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:

  1. Install the library:

    npm install jasgigli-css
  2. Include the CSS file in your HTML:

    <link rel="stylesheet" href="node_modules/jasgigli-css/dist/styles.css" />
  3. 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.

1.2.1

12 months ago

1.2.0

12 months ago

1.1.9

12 months ago

1.1.8

12 months ago

1.1.7

12 months ago

1.1.6

12 months ago

1.1.5

12 months ago

1.1.4

12 months ago

1.1.3

12 months ago

1.1.2

12 months ago

1.1.1

12 months ago

1.1.0

12 months ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago