1.2.1 • Published 1 year ago

jasgigli-css v1.2.1

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year 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

1 year ago

1.2.0

1 year ago

1.1.9

1 year ago

1.1.8

1 year ago

1.1.7

1 year ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.1.1

1 year ago

1.1.0

1 year 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