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

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!