Framework CSS + JS utilities
npm install fluvia1. Installation
2. Background Colors
3. Borders
4. Container and Grids
5. Flexbox Utilities
6. Spacing Utilities
7. Typography
8. Display & Position
9. Shadows
10. Discord Module
---
``html
`
-> npm install fluvia
---
Use the .bg-* classes to apply background colors to any element.
| Color Category | Available Classes |
| :--- | :--- |
| Red | .bg-red, .bg-dark-red |.bg-blue
| Blue | , .bg-dark-blue, .bg-light-blue |.bg-lime-green
| Green | , .bg-green, .bg-dark-green |.bg-yellow
| Yellow | |.bg-orange
| Orange | , .bg-dark-orange |.bg-light-purple
| Purple | , .bg-purple, .bg-dark-purple |.bg-light-pink
| Pink | , .bg-pink, .bg-dark-pink |.bg-light-grey
| Grey | , .bg-grey, .bg-dark-grey |.bg-black
| Monochrome | , .bg-white |
---
#### Border Styles & Widths
| Property | Available Classes |
| :--- | :--- |
| Styles | .b-solid, .b-dashed, .b-dotted |.b-1
| Widths | (1px), .b-2 (2px), .b-3 (3px) |
---
#### Grid Utilities
| Layout Type | Available Classes |
| :--- | :--- |
| Grid Base | .grid (display: grid with 1rem gap) |.grid-2
| 2 Columns | |.grid-3
| 3 Columns | |.grid-4
| 4 Columns | |
---
| Property | Available Classes |
| :--- | :--- |
| Display | .fx (flex) |.fx-c
| Direction | (column) |.fx-jc-c
| Justify | (center), .fx-jc-sb (space-between) |.fx-ai-c
| Align | (center) |
---
#### Margin & Padding Scale
| Scale | Value |
| :--- | :--- |
| 0 | 0px |
| 1 | 4px |
| 2 | 8px |
| 3 | 16px |
| 4 | 32px |
---
#### Font Sizes & Weights
| Property | Available Classes |
| :--- | :--- |
| Sizes | .txt-xs, .txt-sm, .txt-md, .txt-lg, .txt-xl, .txt-xxl |.txt-light
| Weights | (300), .txt-normal (400), .txt-bold (700) |
#### Alignment & Transform
| Property | Available Classes |
| :--- | :--- |
| Alignment | .txt-left, .txt-center, .txt-right |.txt-uppercase
| Transform | , .txt-lowercase, .txt-capitalize |
---
| Property | Available Classes |
| :--- | :--- |
| Display | .d-block, .d-inline, .d-inline-block, .d-none |.pos-rel
| Position | , .pos-abs, .pos-fixed |.overflow-hidden
| Overflow | , .overflow-scroll |.z-0
| Z-Index | , .z-10, .z-20 |
---
| Shadow Size | Available Classes |
| :--- | :--- |
| Small | .shadow-sm |.shadow-md
| Medium | |.shadow-lg
| Large | |
---
Fluvia also provides JavaScript modules to handle advanced interactions and features such as Discord forms, notifications, and interactive UI behaviors.
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
`
`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);
});
`
| 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`.