au-css

v1.2.6

Published

a year ago

A styling library by AU-Techies.

0High
0Medium
0Low

ajaymehra

css utility tailwind bootstrap ui

💅 au-css

A lightweight utility-first CSS framework inspired by Tailwind — designed to give you common utilities and support for arbitrary values like p-[20px] or w-[100%].

Website

Get help with our library: Visit Website

🚀 Installation

Option 1: Using via CDN

Add this to your HTML <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/au-css@latest/dest/index.css" />

And add this before your </body> tag (for support of arbitrary values):

<script src="https://cdn.jsdelivr.net/npm/au-css@latest/js/arbitary-values.js"></script>

✅ Example:

<div class="bg-red text-white p-[40px] rounded hover:bg-[blue]">
  Hello from AU-CSS!
</div>

Option 2: Using via NPM (Recommended for React/Next.js)

Install the package:

npm install au-css

Import in your app:

For Next.js: In pages/_app.js or pages/_app.tsx:

import 'au-css/dest/index.css'; // Main styles
import 'au-css/js/arbitary-values.js'; // Optional: Enables support for custom utilities like p-[40px]

✅ Usage in JSX:

<div className="bg-blue text-white w-[300px] rounded-full hover:scale-[1.05]">
  Welcome to AU-CSS 🚀
</div>

✨ Features

Utility-first classes (like p-4, m-2, rounded, text-center)
Arbitrary value support (p-[30px], w-[50%], etc.)
Hover effects for arbitrary utilities (hover:bg-[blue], hover:scale-[1.05], etc.)
Background utilities (bg-cover, bg-center, bg-no-repeat, etc.)
Outline utilities (outline-[color], outline-offset-[value], outline-1, etc.)
Text transform utilities (uppercase, lowercase, capitalize, normal-case)
Line height utilities (leading-[value], leading-tight, leading-normal, etc.)
Letter spacing utilities (tracking-[value], tracking-tight, tracking-wide, etc.)
Card UI utility classes (.card, .card-hover, .card img, .card-image)
Real-time DOM watching with MutationObserver for new elements
Responsive utility compatibility for future extension (sm:, md:, etc.)
Extended arbitrary value support for various utilities (p-[20px], gap-[10px], rotate-[15deg], etc.)
CDN & NPM support
Small, customizable, and extendable

🛠️ Custom Class Support

Supports:

p-[value] (padding)
m-[value] (margin)
w-[value] (width)
h-[value] (height)
hover:bg-[value] (hover background)
hover:scale-[value] (hover scale)
outline-[value] (outline color)
outline-offset-[value] (outline offset)
leading-[value] (line height)
tracking-[value] (letter spacing)
gap-[value] (grid/flex gap)
rotate-[value] (rotation)
and more...

Examples:

p-[50px], w-[70%], m-[1rem]
hover:bg-[#ff5500], hover:scale-[1.1]
outline-[blue], outline-offset-[3px]
leading-[1.5], tracking-[0.1em]

📌 Text Utilities

Control text presentation with utilities:

Text transform: uppercase, lowercase, capitalize, normal-case
Line height: leading-tight, leading-normal, leading-[2.5]
Letter spacing: tracking-tight, tracking-wide, tracking-[0.05em]

🖼️ Background Utilities

Easily control background behavior:

bg-cover, bg-contain
bg-center, bg-top, bg-bottom
bg-no-repeat, bg-repeat-x, bg-repeat-y

🃏 Card Component Utilities

Build card layouts quickly:

<div class="card w-[300px] card-hover">
  <div class="card-image">
    <img src="image.jpg" alt="Card image">
  </div>
  <div class="p-4">
    <h3 class="text-lg">Card Title</h3>
    <p>Card content goes here</p>
  </div>
</div>

Add hover effects with .card-hover

🔗 CDN Reference

Provided via jsDelivr:

https://cdn.jsdelivr.net/npm/au-css@latest/dest/index.css
https://cdn.jsdelivr.net/npm/au-css@latest/js/arbitary-values.js

📃 License

MIT

🤝 Contribute

PRs are welcome! Feel free to fork and improve the project.

# Clone the repository
git clone https://github.com/ajaymehra8/AUCSS

# Install dependencies
npm install

# Build the project
npm run build