🔧 Using TenoxUI as a Utility-First or Utility-Classes Engine
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
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!
...
🔧 TypeScript : Utility Utility Types
📈 16.23 Punkte
🔧 Programmierung
💾 CORSAIR Utility Engine 2.13.80
📈 14.32 Punkte
💾 Downloads
🔧 Reasoning Engine vs. Search Engine
📈 12.41 Punkte
🔧 Programmierung