TenoxUI – A Lightweight Utility-First CSS Framework

🚀 Get Started with TenoxUI

1. Installation

To install TenoxUI, simply run the following command:

npm i @tenoxui/static

This will install the static version of TenoxUI, which allows you to process class names and generate styles dynamically.

---

2. Basic Usage

After installing TenoxUI, you can start using it in your project. Here’s a quick example:

import { TenoxUI } from '@tenoxui/static'

// Create a new instance of TenoxUI
const ui = new TenoxUI({
  property: {
    bg: 'background', // Defines a shorthand for the background property
    m: 'margin' // Defines a shorthand for margin
  }
})

// Process class names
ui.processClassNames(['bg-red', 'm-2px', 'm-1rem'])

// Generate the stylesheet
console.log(ui.generateStylesheet())

/* Output:
.bg-red { background: red }
.m-2px { margin: 2px }
.m-1rem { margin: 1rem }
*/

TenoxUI converts these short class names into actual CSS rules, making it incredibly easy to style your project!

---

Deep Dive into TenoxUI

You're still here? Great! Let’s explore how TenoxUI can handle more complex rules and customization.

1. Multiple Properties in One Rule

With TenoxUI, a single class can apply styles to multiple properties. For example:

const ui = new TenoxUI({
  property: {
    size: ['width', 'height'], // Apply both width and height
    m: { property: 'margin', value: '{0}px' }, // Custom value formatting
    '-m': { property: 'margin', value: '-{0}px' }, // Negative margin
    text: { property: 'color', value: 'rgb({0} / {1}%)' } // Custom color syntax
  },
  values: {
    'red-500': '255 0 0' // Define reusable color values
  }
})

ui.processClassNames(['size-50px', 'm-3', '-m-8', 'text-red-500/20'])

console.log(ui.generateStylesheet())

/* Output:
.size-50px { width: 50px; height: 50px }
.m-3 { margin: 3px }
.-m-8 { margin: -8px }
.text-red-500 { color: rgb(255 0 0 / 20%) }
*/

---

2. Prefix Variants & Responsive Design

TenoxUI supports prefix variants (like hover:, focus:) and custom breakpoints for responsive design.

const ui = new TenoxUI({
  property: {
    bg: 'background'
  },
  breakpoints: [
    { name: 'md', min: 768 }, // Min-width: 768px
    { name: 'max-md', max: 768 }, // Max-width: 768px
    { name: 'md-only', min: 768, max: 992 } // Between 768px and 992px
  ]
})

ui.processClassNames([
  'bg-red', // Default
  'hover:bg-blue', // Hover state
  'focus:bg-purple', // Focus state
  'md:bg-yellow', // Applies for min-width: 768px
  'max-md:bg-green', // Applies for max-width: 768px
  'md-only:bg-[rgb(255_0_0)]', // Applies only between 768px and 992px
  'before:[content]-["Hello_World!"]' // Before pseudo-element
])

console.log(ui.generateStylesheet())

/* Output:
.bg-red { background: red }
.hover\:bg-blue:hover { background: blue }
.focus\:bg-purple:focus { background: purple }
.before\:\[content\]-\[\"Hello_World\!\"\]::before { content: "Hello World!" }

@media screen and (min-width: 768px) {
  .md\:bg-yellow { background: yellow }
}

@media screen and (max-width: 768px) {
  .max-md\:bg-green { background: green }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .md-only\:bg-\[rgb\(255_0_0\)\] { background: rgb(255 0 0) }
}
*/

This makes responsive design super easy without writing separate media queries manually!

---

3. Creating Utility Classes

If you prefer a traditional utility class approach, TenoxUI allows you to predefine utility classes, similar to TailwindCSS, but with complete flexibility:

const ui = new TenoxUI({
  classes: {
    color: {
      'text-red-500': 'rgb(255 0 0)'
    },
    fontSize: {
      'text-xs': '12px',
      'text-sm': '14px',
      'text-base': '16px',
      'text-md': '18px',
      'text-lg': '24px',
      'text-xl': '32px'
    }
  }
})

ui.processClassNames(['text-red-500', 'text-xs', 'text-md', 'text-base', 'text-lg', 'text-xl'])

console.log(ui.generateStylesheet())

/* Output:
.text-red-500 { color: rgb(255 0 0) }
.text-xs { font-size: 12px }
.text-md { font-size: 18px }
.text-base { font-size: 16px }
.text-lg { font-size: 24px }
.text-xl { font-size: 32px }
*/

With this approach, you can define your own utility classes while still keeping the flexibility of TenoxUI.

---

Why Use TenoxUI?

If you’re wondering why you should consider TenoxUI over something like TailwindCSS, here are some key advantages:

✅ Lightweight & Fast – No unnecessary bloat; only includes what you need.

✅ Fully Customizable – Define your own utility classes and values.

✅ Flexible Naming Convention – No predefined values like bg-red-500; use any valid CSS value.

✅ Dynamic Property Handling – Easily create shorthand rules and apply multiple properties.

✅ Responsive & Interactive – Supports media queries, pseudo-classes, and custom breakpoints.

✅ Supports Direct CSS Variables – Works seamlessly with modern styling approaches.

---

Final Thoughts

TenoxUI is a fresh, modern, and highly customizable alternative to TailwindCSS. If you’re looking for a lightweight, flexible, and scalable CSS framework that doesn’t lock you into predefined values, TenoxUI is definitely worth exploring.

Would you like to see more real-world examples or a detailed setup guide? Let me know in the comments! Happy coding!