About
TenoxUI stands as a nimble Utility-First CSS framework meticulously crafted to elevate web development by enhancing speed and efficiency. It delivers a curated collection of customizable styles and embraces a utility-first approach, simplifying and expediting the styling process for developers.
Feature
- Fast and Efficient: The majority of classes are managed through JavaScript, ensuring a lightweight and fast user experience.
- No CSS: No more generated CSS files. Elevate your design journey as styles are seamlessly applied directly to each element, unleashing simplicity and efficiency.
- Utility-First Approach: Seamlessly apply pre-defined utility classes to elements by simply invoking their associated classes, fostering a utility-first approach to styling.
- Tailored to Your Taste: Easily customize your unique style with user-friendly configuration options, providing a personalized and bespoke design experience.
Getting Started
Installation
Using npm:
npm i tenoxui@latest
Using CDN :
<script src="https://cdn.jsdelivr.net/npm/tenoxui@latest/dist/js/tui.min.js"></script>
Documentation
Using Class
<div class="box-200px flex-parent-center br-8px bg-#0d0d0d p-2rem">
<h1 class="fs-1.5rem fw-500 tc-lightgreen">Hello World!</h1>
</div>
Using Function
-
makeStylefunction
Using selector and the class names as parameter, you can change the style of the element.
makeStyle("body", "bg-#0d0d0d tc-white p-20px");
Note: makeStyle only give styles to one selector
-
makeStylesfunction
Using object as parameter to give the styles
makeStyles({
body: "bg-#0d0d0d tc-white p-20px",
nav: "position-fixed top-0 p-10px",
"h1.logo": "fs-1rem fw-600",
// Try re-usable class
".card": "display-flex flex-parent-center",
".flex": "display-flex",
".center": "flex-parent-center",
});
Using re-usable class:
<div class="flex center">...</div>
The div above will have style of :
div {
display: flex;
align-items: center;
justify-content: center;
}
- Nested Style
makeStyles also support nested styles because it's defined as an object.
HTML:
<div class="container">
<div class="card">
<h2 class="title">Hello</h2>
<p class="desc">Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="card">
<h2 class="title">World</h2>
<p class="desc">Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
JavaScript :
makeStyles({
body: "bg-#0d0d0d tc-white p-20px",
".container": {
"": " display-flex gap-20px jc-center", // Empty string will treated as parent's style
// Card class will only applied when its inside container class, outside it will not styled
".card": {
"": "p-20px br-8px",
".title": "fs-1.4rem fw-600",
".desc": "fs-14px fw-500 lh-1.4 ta-justify",
},
},
});
The css style will be like this :
.container {
display: flex;
gap: 20px;
justify-content: center;
.card {
padding: 20px;
border-radius: 8px;
.title {
font-size: 1.4rem;
font-weight: 600;
}
.desc {
font-size: 14px;
font-weight: 500;
line-height: 1.4;
text-align: justify;
}
}
}
More
Full documentation on TenoxUI Documentation.
Top comments (0)