Introduction to Klass

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