uxlib

v1.0.5

Published

4 months ago

A clean and powerful utility library by Subrata

Downloads

0High
0Medium
0Low

subratap

ulib uxlib utils js-library utility-library subrata helpers

🔧 UXLIB – The Ultimate JavaScript & CSS Utility Toolkit

UXLIB is a flexible, developer-friendly utility library designed to simplify and speed up your web development workflow with prebuilt JavaScript helpers and CSS utility classes – no config, no fuss, just plug and use.

Made with ❤️ by Subrata

🚀 Features

✅ 50+ powerful JavaScript utility functions
🎨 Custom-built CSS utility classes (like Tailwind, but focused)
🔁 Simple plug-n-play usage (CDN or NPM)
⚙️ ES, CJS, and UMD builds for flexible integration
📦 Lightweight, tree-shakable, no external dependencies
🔥 Perfect for websites, admin panels, or rapid prototyping

📚 Important Links

Explore full documentation and usage examples:

🟨 UXLIB JS Documentation
🎨 UXLIB CSS Documentation

📄 View Release Notes

📦 Installation

📦 Option 1: CDN Integration (Browser Usage)

Easily integrate UXLIB into your project using either npm-based CDN or GitHub CDN.
You can switch between debug-friendly and minified versions based on your environment.

🧪 Development vs Production

| File Type | File Name | Use For | Logs in Console? | |----------------|----------------------|-------------------|------------------| | Development | ulib.js | Debugging | ✅ Yes (when debug mode is on) | | Production | ulib.min.js | Live Deployment | ❌ No (console disabled) |

🔹 Development (with enable/disable logs)

<!-- UXLIB-JavaScript CDN (jsDelivr) -->
<script src="https://cdn.jsdelivr.net/npm/uxlib/dist/uxlib.js"></script>

<!-- UXLIB-CSS CDN (jsDelivr) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uxlib/dist/uxlib.css"></link>

🔹 How to Enable Debug Mode

✅ If you add a debug attribute to the <script> tag,
UXLIB will automatically enable console logs for development and debugging.

🧪 Example:

<script src="..." debug></script>

<!-- Use Debug attribute in the script tag -->
<script src="https://cdn.jsdelivr.net/npm/uxlib/dist/uxlib.js" debug></script>

✅ In browser just add ?debug querry parameter after the app/page url UXLIB will automatically enable console logs for development and debugging.

🧪 Example:

https://yourapp.com/?debug
https://yourapp.com/login?debug

🔹 Production (no logs)

<!-- UXLIB-JavaScript Minified CDN (jsDelivr) -->
<script src="https://cdn.jsdelivr.net/npm/uxlib/dist/uxlib.min.js"></script>

<!-- UXLIB-CSS Minified CDN (jsDelivr) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uxlib/dist/uxlib.min.css"></link>

🔹 Version Based cdn (Recomended)

⚠️ Always specify the version when importing from CDN in production. This avoids unexpected issues if the library gets updated later.

<!-- UXLIB-JavaScript v1.1.1 Minified CDN (jsDelivr) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/uxlib.min.js"></script>

<!-- UXLIB-CSS v1.1.1 Minified CDN (jsDelivr) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/uxlib.min.css"></link>

Using Of Latest Version

<!-- UXLIB-JavaScript latest Minified CDN (jsDelivr) -->
<script src="https://cdn.jsdelivr.net/npm/uxlib@latest/dist/uxlib.min.js"></script>

<!-- UXLIB-CSS latest Minified CDN (jsDelivr) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uxlib@latest/dist/uxlib.min.css"></link>

📦 Option 2: NPM (For Node Based Projects)

For latest version

npm install uxlib

For any particular version

npm install [email protected]

Import into project

// Import Full UXLIB-JS in project
import * as uxlib from "uxlib";

// Import Particular Functions in project
import { formatDate, isOnline } from "uxlib";

// Import UXLIB-CSS (inside a css File)
@import "uxlib/css"

// Import UXLIB-CSS (inside a js File)
import * as uxlibCss from 'uxlib/css';

🚀 Quick Start

Utility Example For CDN Based Import:

Javascript Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>UXLIB v1.1.1 JS Test</title>

  <!-- UXLIB-JavaScript v1.1.1 CDN -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/uxlib.min.js"></script>
</head>
<body>
  <h2>✅ Check your console for output</h2>

  <script>
    // Check if online
    if (uxlib.isOnline()) {
      console.log("You are online ✅");
    } else {
      console.log("You are offline ❌");
    }

    // Format a date using UXLIB
    const formatted = uxlib.formatDate('2025-07-10');
    console.log("Formatted Date:", formatted);
  </script>
</body>
</html>

CSS Example

<!DOCTYPE html>
<html lang="en">
  <title>UXLIB v1.1.1 CSS Test</title>
<head>
  <!-- UXLIB-CSS CDN (replace version if needed) -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/uxlib.css" />
</head>
<body>

  <h2 class="ux-heading">🎨 UXLIB CSS Demo</h2>

  <button class="ux-button-primary">Primary Button</button>
  <button class="ux-button-secondary">Secondary Button</button>

  <div class="ux-card" style="margin-top: 20px;">
    <h3 class="ux-card-title">Card Title</h3>
    <p>This is a sample card using UXLIB CSS classes.</p>
  </div>

</body>
</html>

Utility Example For NPM Based Import:

Javascript Example

// if importing particular functions
import { isOnline, formatDate } from "uxlib";

if (isOnline()) {
  console.log("You are online ✅");
}

formatDate('2025-07-10')

// if importing full library
import * as uxlib from "uxlib";

if (uxlib.isOnline()) {
  console.log("You are online ✅");
}

uxlib.formatDate('2025-07-10')

CSS Utility Example:

// import in any css file (eg: index.css)
@import "uxlib/css"

or

// import in any js file (eg: main.js)
import "uxlib/css"

<!DOCTYPE html>
<html lang="en">
  <title>UXLIB v1.1.1 CSS Test</title>
  
  <head>
    <!-- link your stylesheet -->
    <link rel="stylesheet" href="index.css"/>
    or
    <!-- link your script file -->
    <script src="main.js"></script>
  </head>

  <body>
    <h2 class="ux-heading">🎨 UXLIB CSS via NPM</h2>

    <button class="ux-button-primary">Primary Button</button>
    <button class="ux-button-secondary">Secondary Button</button>

    <div class="ux-card" style="margin-top: 20px;">
      <h3 class="ux-card-title">Card Title</h3>
      <p>This is a sample card using UXLIB CSS (imported via npm).</p>
    </div>
  </body>
</html>

📚 Documentation Links

Explore full documentation and usage examples:

🟨 UXLIB JS Documentation
🎨 UXLIB CSS Documentation

📄 View Release Notes

🌐 Build Formats

| Format | File | Use Case | |------------|-------------------------------|------------------| | ESM | dist/ulib.es.js | Vite, Modern JS | | CJS | dist/ulib.cjs.js | Node.js | | UMD | dist/ulib.js | CDN, Global use (With Console log option)| | Minified | dist/ulib.min.js | Production CDN (no console log option)|

🤝 Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you’d like to change.

📄 View Contribution Guide

🧾 License

💬 Support or Feedback

Found a bug? Have a feature request?
Open an issue or contribute via pull request.
⭐ Star the repo to support this project!⭐

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

🔧 UXLIB – The Ultimate JavaScript & CSS Utility Toolkit

Made with ❤️ by Subrata

🚀 Features

📚 Important Links

📦 Installation

📦 Option 1: CDN Integration (Browser Usage)

🧪 Development vs Production

🔹 Development (with enable/disable logs)

🔹 How to Enable Debug Mode

🔹 Production (no logs)

🔹 Version Based cdn (Recomended)

📦 Option 2: NPM (For Node Based Projects)

Import into project

🚀 Quick Start

Utility Example For CDN Based Import:

Javascript Example

CSS Example

Utility Example For NPM Based Import:

Javascript Example

CSS Utility Example:

📚 Documentation Links

🌐 Build Formats

🤝 Contributing

🧾 License

💬 Support or Feedback