Introduction
Klass is a class variant utility library that allows elegant and efficient usage of utility-first CSS framework classes, such as TailwindCSS, UnoCSS, and MasterCSS. It also supports responsive variants, grouping, and slots. Klass is framework agnostic, seamlessly working with any framework. Additionally, Klass provides built-in framework integration for Preact, React, and Solid.
Building A Klass Components
Button
import { klass } from '@klass/core';
const button = klass({
base: [
'inline-flex items-center justify-center space-x-1.5 shrink-0 border transition',
'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10',
'disabled:opacity-50 disabled:pointer-events-none',
],
variants: {
intent: {
default: ['bg-white hover:bg-neutral-50 text-neutral-900 border-neutral-300 focus:ring-neutral-500'],
primary: [
'bg-blue-600 hover:bg-blue-700 text-white border-blue-700/75 focus:ring-blue-600 hover:border-blue-700',
],
secondary: [
'bg-orange-600 hover:bg-orange-700 text-white border-orange-700/75 focus:ring-orange-600 hover:border-orange-700',
],
},
size: {
sm: 'px-3 py-1.5 text-xs font-medium',
md: 'px-4 py-2 text-sm font-medium',
lg: 'px-5 py-2.5 text-lg font-semibold',
},
radius: {
md: 'rounded-md',
},
},
defaultVariants: {
intent: 'default',
size: 'md',
radius: 'md',
},
});
export default button;
Box
import { reklass } from '@klass/core';
const box = reklass({
conditions: {
base: '',
sm: 'sm:',
md: 'md:',
lg: 'lg:',
xl: 'xl:',
'2xl': '2xl:',
},
defaultCondition: 'base',
variants: {
d: {
none: 'hidden',
block: 'block',
iblock: 'inline-block',
flex: 'flex',
iflex: 'inline-flex',
},
ai: {
start: 'items-start',
end: 'items-end',
center: 'items-center',
},
jc: {
start: 'justify-start',
end: 'justify-end',
center: 'justify-center',
},
gap: {
none: 'gap-0',
xs: 'gap-2',
sm: 'gap-4',
md: 'gap-6',
lg: 'gap-8',
xl: 'gap-10',
},
m: {
none: 'm-0',
xs: 'm-2',
sm: 'm-4',
md: 'm-6',
lg: 'm-8',
xl: 'm-10',
},
p: {
none: 'p-0',
xs: 'p-2',
sm: 'p-4',
md: 'p-6',
lg: 'p-8',
xl: 'p-10',
},
sx: {
none: 'space-x-0',
xs: 'space-x-2',
sm: 'space-x-4',
md: 'space-x-6',
lg: 'space-x-8',
xl: 'space-x-10',
},
sy: {
none: 'space-y-0',
xs: 'space-y-2',
sm: 'space-y-4',
md: 'space-y-6',
lg: 'space-y-8',
xl: 'space-y-10',
},
tz: {
xs: 'text-xs',
sm: 'text-sm',
md: 'text-base',
lg: 'text-lg',
xl: 'text-xl',
},
ff: {
sans: 'fomt-sans',
mono: 'fomt-mono',
},
fw: {
'3': 'font-light',
'4': 'font-normal',
'5': 'font-medium',
'6': 'font-semibold',
'7': 'font-bold',
},
},
});
export default box;
Usage Of Klass Components
This is an example usage with Astro.
<div class={box({ d:"block", p: "sm", sy: { base: "xs", md: "md", xl: "lg" } })}>
<div>
<h2 class={box({ tz: "lg", fw: "7" })}>Intent</h2>
<div class={box({ d:"flex", ai: "center", gap: "sm", p: "sm" })}>
<button class={button()}>default</button>
<button class={button({ intent: "primary" })}>primary</button>
<button class={button({ intent: "secondary" })}>secondary</button>
</div>
</div>
<div>
<h2 class={box({ tz: "lg", fw: "7" })}>Size</h2>
<div class={box({ d:"flex", ai: "center", gap: "sm", p: "sm" })}>
<button class={button({ size: "sm" })}>small</button>
<button class={button({ size: "md" })}>medium</button>
<button class={button({ size: "lg" })}>large</button>
</div>
</div>
<div>
<h2 class={box({ tz: "lg", fw: "7" })}>Disabled</h2>
<div class={box({ d:"flex", ai: "center", gap: "sm", p: "sm" })}>
<button disabled class={button({ size: "sm" })}>small</button>
<button disabled class={button({ size: "md", intent: "primary" })}>medium</button>
<button disabled class={button({ size: "lg", intent: "secondary" })}>large</button>
</div>
</div>
</div>
There are numerous reusable components available for use, such as cards, forms, and many others.
Conclusion
Building efficient and maintainable applications relies heavily on the use of reusable UI components. When we combine the power of utility-first css and Klass, we unlock the ability to create reusable components that not only save time but also elevate our app's visual appeal. With Klass at our disposal, we can effortlessly craft sleek and professional-looking components, boosting productivity and fostering seamless collaboration among team members. By embracing the concept of reusability, we pave the way for enhanced productivity and smooth integration of new features into our application.
Link to GitHub repository
More examples
Top comments (0)