fluvia

v2.0.7

Published

6 days ago

Framework CSS + JS utilities

0High
0Medium
0Low

noblemp4

css js framework utilities

Installation

Via CDN

Include the stylesheet in the <head> of your HTML document:

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/fluvia@latest/dist/fluvia.min.css'>

<script src="https://cdn.jsdelivr.net/npm/fluvia@latest/dist/fluvia.min.js"></script>

Via NPM

Install the package into your project using the following command:

-> npm install fluvia

Background Colors

Use the .bg-* classes to apply background colors to any element.

Borders

Border Styles & Widths

Container and Grids

Grid Utilities

Flexbox Utilities

Spacing Utilities

Margin & Padding Scale

| Scale | Value | | :--- | :--- | | 0 | 0px | | 1 | 4px | | 2 | 8px | | 3 | 16px | | 4 | 32px |

Typography

Font Sizes & Weights

Alignment & Transform

Display & Position

Shadows

JavaScript Utilities

Fluvia also provides JavaScript modules to handle advanced interactions and features such as Discord forms, notifications, and interactive UI behaviors.

Discord Module

Easily send form data to a Discord webhook.
The module supports confirmations, customizable messages, callbacks, and includes a default styled popup that can be overridden with CSS.

HTML

<form id="form-discord" class="card">
  <input name="name" placeholder="Name" required>
  <input name="email" type="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message" required></textarea>
  <button>Send</button>
</form>

Example JS

// Initialize the Discord module
const discord = ui.modules.discord({
    webhook: "https://discord.com/api/webhooks/XXXX/XXXX",
    title: "📩 New Message",

    fields: {
        name: "Name",
        email: "Email",
        message: "Message"
    },

    log: true,
    confirm: true,
    showPopup: true,

    messages: {
        success: "Message sent successfully!",
        error: "Error sending message!",
        confirm: "Do you want to send this message?"
    },

    onSuccess: () => console.log("Message sent successfully!"),
    onError: (err) => console.error("Error sending message:", err)
});

// Bind the form
const form = document.querySelector("#form-discord");
form.addEventListener("submit", e => {
    e.preventDefault();
    discord.send(form);
});

Available Options

| Option | Type | Default | Description | |-------------|----------|---------|-------------| | webhook | string | — | Discord webhook URL (required) | | title | string | "Form" | Title of the Discord embed | | fields | object | {} | Object mapping form fields { fieldName: label } | | log | boolean | false | Logs the payload in the console | | confirm | boolean | false | Enables a confirmation dialog before sending | | showPopup | boolean | false | Displays a styled popup after submission | | messages | object | {} | Custom messages for success, error, and confirm | | onSuccess | function | — | Callback triggered after successful submission | | onError | function | — | Callback triggered in case of submission error |

You can customize the popup style via CSS by targeting #ui-discord-popup.