Forem: NOuSantx

TenoxUI: Creating Conditional Style

NOuSantx — Sun, 02 Mar 2025 01:52:12 +0000

In TenoxUI, the easiest way to define the class names is by defining a shorthand for CSS properties or variables you want. For example :

import { TenoxUI } from '@tenoxui/static'
const ui = new TenoxUI({
  property: {
    bg: 'background',
    p: 'padding',
    size: ['width', 'height']
    "my-color": "--my-color-var"
    d: "display",
    jc: "justifyContent",
    js: "justifySelf",
    ji: "justifyItems",
    ai: "alignItems",
    // ...
  }
})

And then use the class names like this :

<div class="bg-red p-1rem d-flex jc-center ai-center">
  <div class="box-300px my-color-[rgb(255,0,0)] bg-$my-color-var"></div>
</div>

But now, you can use only one type with different properties with different keys. What is key in TenoxUI? key is just a unique identifier for the value, can be defined as ({key}:value) or [{key}:value]. Example :

const ui = new TenoxUI({
  property: {
    // regular shorthand
    d: 'display',
    // shorthand for multiple properties
    tui: ({ key }) => key, // as long as the key is matched, use the key as property
    // condition shorthand with multiple properties
    justify: {
      property: ({ key }) => {
        const keys = {
          content: 'justifyContent',
          items: 'justifyItems',
          self: 'justifySelf'
        }
        return keys[key] || 'justifyBetween' // default: justify-between
      },
      value: ({ value }) =>
        ['between', 'evenly', 'around'].includes(value) ? `space-${value}` : value
    }
  }
})

console.log(
  ui
    .processClassNames([
      'd-flex',
      'justify-center',
      'justify-between',
      'justify-flex-start',
      'justify-(items:center)',
      'justify-(items:end)',
      'justify-(self:center)',

      // custom key from tui- shorthand
      'tui-(justify-content:center)',
      'tui-(color:red)',
      'tui-(text-align:left)',
      'tui-(--red-500:rgb(255_0_0))'
    ])
    .generateStylesheet()
)

And this is the final output :

.d-flex {
  display: flex;
}
.justify-center {
  justify-between: center;
}
.justify-between {
  justify-between: space-between;
}
.justify-flex-start {
  justify-between: flex-start;
}
.justify-\(items\:center\) {
  justify-items: center;
}
.justify-\(items\:end\) {
  justify-items: end;
}
.justify-\(self\:center\) {
  justify-self: center;
}
.tui-\(justify-content\:center\) {
  justify-content: center;
}
.tui-\(color\:red\) {
  color: red;
}
.tui-\(text-align\:left\) {
  text-align: left;
}
.tui-\(--red-500\:rgb\(255_0_0\)\) {
  --red-500: rgb(255 0 0);
}

The tui-* will matching the included key and treat it as CSS property or variable.

Using TenoxUI as a Utility-First or Utility-Classes Engine

NOuSantx — Sat, 01 Mar 2025 22:00:57 +0000

TenoxUI is a CSS framework designed with a utility-first approach, allowing you to quickly style elements using predefined class names. However, TenoxUI is also highly flexible, enabling you to create custom utility classes effortlessly. This article will guide you through both approaches.

Installation

Before you begin, install TenoxUI and its dependencies by running the following command:

npm install @tenoxui/static @nousantx/someutils

Defining Your First Class

TenoxUI allows you to define utility classes using the classes field. Here’s an example:

import { TenoxUI } from '@tenoxui/static'
import { transformClasses } from '@nousantx/someutils'

const ui = new TenoxUI({
  classes: transformClasses({
    btn: {
      display: 'flex',
      alignItems: 'center',
      paddingInline: '1rem',
      height: '35px',
      borderRadius: '6px',
      border: '1px solid #777',
      outline: 'none',
      background: '#ddd',
      color: 'black',
      transition: '300ms'
    },
    'btn-primary': {
      background: '#ccf654'
    },
    'btn-secondary': {
      background: '#888',
      color: 'white'
    }
  })
})

console.log(
  ui
    .processClassNames(['btn', 'btn-primary', 'btn-secondary', 'hover:btn-secondary'])
    .generateStylesheet()
)

Generated CSS Output

The above configuration produces the following CSS:

.btn {
  display: flex;
  align-items: center;
  padding-inline: 1rem;
  height: 35px;
  border-radius: 6px;
  border: 1px solid #777;
  outline: none;
  background: #ddd;
  color: black;
  transition: 300ms;
}
.btn-primary {
  background: #ccf654;
}
.btn-secondary {
  background: #888;
  color: white;
}
.hover\:btn-secondary:hover {
  background: #888;
  color: white;
}

Dynamic Values with Custom Inputs

TenoxUI also supports dynamic values within class definitions. You can define placeholders and provide default values using {} syntax.

Here’s an example:

const ui = new TenoxUI({
  classes: transformClasses({
    'my-type': {
      display: '{0} || block', // Default: block
      justifyContent: '{1} || initial' // Default: initial
    },
    text: {
      '--text-opacity': '{1}% || 1', // Default opacity: 1
      color: 'rgb({0} / var(--text-opacity)) || red' // Default color: red
    }
  }),
  values: {
    'red-400': '249 108 108',
    'red-500': '255 0 0'
  }
})

console.log(
  ui
    .processClassNames([
      'my-type', // Uses default values
      'my-type-flex', // Sets display to flex
      'my-type-inline-flex/center', // Sets display to inline-flex, justifyContent to center
      'text-red-500', // Uses red-500 from values
      'text-red-400/60', // Uses red-400 with 60% opacity
      'text-[#ccf654]' // Uses a custom hex color
    ])
    .generateStylesheet()
)

Generated CSS Output

.my-type {
  display: block;
  justify-content: initial;
}
.my-type-flex {
  display: flex;
  justify-content: initial;
}
.my-type-inline-flex\/center {
  display: inline-flex;
  justify-content: center;
}
.text-red-500 {
  --text-opacity: 1;
  color: rgb(255 0 0 / var(--text-opacity));
}
.text-red-400\/60 {
  --text-opacity: 60%;
  color: rgb(249 108 108 / var(--text-opacity));
}
.text-\[\#ccf654\] {
  --text-opacity: 1;
  color: #ccf654;
}

NOTE: The transformClasses function is just a simple function to convert class-name-based style into TenoxUI's classes value. For instance :

transformClasses({
  'flex-center': {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  }
})

Same as :

{
  display: {
   "flex-center": "flex"
  },
  justifyContent: {
   "flex-center": "center"
  },
  alignItems: {
   "flex-center": "center"
  },
}

Conclusion

With TenoxUI, you can:

Use utility-first class names for rapid styling.
Define custom utility classes to fit your needs.
Leverage dynamic placeholders for flexible styling.

This approach allows you to streamline your CSS workflow, keeping styles organized and reusable. Explore more on TenoxUI’s documentation and start building efficient, scalable styles today!

TenoxUI – A Lightweight Utility-First CSS Framework

NOuSantx — Sat, 01 Mar 2025 13:15:06 +0000

🚀 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!

Hello World!!

NOuSantx — Thu, 04 Apr 2024 13:24:20 +0000

Great day isn't it? 😄