🔧 TenoxUI – A Lightweight Utility-First CSS Framework
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
🚀 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!
...
🔧 TypeScript : Utility Utility Types
📈 19.9 Punkte
🔧 Programmierung
🔧 Tailwind CSS: CSS framework for Kickstart
📈 19.2 Punkte
🔧 Programmierung