fass-ui v1.0.1

FASS-UI

Introduction

FASS-UI is a lightweight, customizable CSS library built using SCSS. It provides utility classes for spacing, typography, colors, backgrounds, and borders. Additionally, it includes a dynamic theming system that allows users to update colors in real time using JavaScript.

Installation

You can install this package via npm:

npm install fass-ui

or via yarn:

yarn add fass-ui

Usage

Importing the CSS

In your project, import the compiled CSS file:

import "fass-ui/min-css/style.min.css";

Or include it directly in your HTML:

<link rel="stylesheet" href="/fass-ui/min-css/style.min.css" />

Importing the JavaScript

If you need dynamic theming, import the JS file:

import { setColors } from "fass-ui/js/theme.js";

Default Root Colors

FASS-UI comes with a set of default root colors defined in CSS variables:

:root {
  --primary: #2196f3;
  --secondary: #eea920;
  --tertiary: #ff5722;
  --success: #4caf50;
  --warning: #ff9800;
  --error: #f44336;
  --info: #2196f3;
}

Dynamic Theming with setColors

FASS-UI provides a function to apply colors dynamically and generate utility classes:

Applying a Custom Theme

You can define a custom theme and apply it using setColors:

const theme = {
  primary: "#3498db",
  secondary: "#2ecc71",
  tertiary: "#0000ff",
  success: "#4caf50",
  warning: "#ff9800",
  error: "#f44336",
  info: "#2196f3",
};

setColors(theme);

Changing Theme Dynamically

To change the theme dynamically when a button is clicked:

<button id="applyTheme">Apply New Theme</button>

<script>
  document.getElementById("applyTheme").addEventListener("click", () => {
    const newTheme = {
      primary: "#ff0000",
      secondary: "#00ff00",
      tertiary: "#0000ff",
    };
    setColors(newTheme);
  });
</script>

TypeScript Usage

If you're using TypeScript, define the theme object using Record<string, string> for proper type safety:

const theme: Record<string, string> = {
  primary: "#ff0000",
  secondary: "#00ff00",
  tertiary: "#0000ff",
};

setColors(theme);

Available Utility Classes

FASS-UI provides a range of utility classes for styling elements efficiently.

Spacing Utilities

.p-1 {
  padding: 1px;
}
.p-2 {
  padding: 2px;
}
.m-1 {
  margin: 1px;
}
.m-2 {
  margin: 2px;
}

Typography Utilities

.text-primary {
  color: var(--primary);
}
.text-secondary {
  color: var(--secondary);
}
.text-success {
  color: var(--success);
}

Background Utilities

.bg-primary {
  background-color: var(--primary);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-success {
  background-color: var(--success);
}

Border Utilities

.border-primary {
  border-color: var(--primary);
}
.border-secondary {
  border-color: var(--secondary);
}
.border-success {
  border-color: var(--success);
}

License

This project is licensed under the MIT License.