/jibe-css

A CSS Custom Property framework based on Tailwind

Primary LanguageCSSMIT LicenseMIT

⛵ Jibe CSS

A teeny tiny CSS Custom Property framework based on Tailwind.

With Custom Properties and CSS modules, CSS is suddenly very easy to tame!

Example usage

// button.jsx
import styles from 'button.module.css'

function Button({ children }) {
    return (
        <button className={styles.button}>
            {children}
        </button>
    )
}
/* button.module.css */

.button {
    height: var(--size-10);
    padding: 0 var(--size-6);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-slate-200);
    color: var(--color-slate-900);
}

How to use it

  1. Copy the CSS files from the jibe/ folder into your project.

  2. Modify jibe.css to customize semantic styles that are specific to your project, such as:

    :root {
  --color-primary: var(--color-blue-500);
}

  3. Use CSS as usual but, instead of writing values like 3px or 5rem, always use the variables from jibe.css (preferably) and jibe-base.css (as a fallback).

API Reference

This framework is just a bunch of CSS Custom Properties. So just look at jibe.css and jibe-base.css to see the properties that are available.

Why not just use Tailwind?

Tailwind is awesome, and I use it all the time. I built this because I was working on a project where the component framework (Ark) required the use of actual CSS files for styling things like selected states.

My initial reaction was "Great, I'll just use Tailwind's @apply!" -- except that the app framework we were using (Remix) didn't support @apply inside CSS modules out of the box, and it wasn't easy to add support.

So I built this 😃

Reasons you may want to use Jibe

  1. You're one of those people who are just averse to utility classes.

  2. You want to write code that anyone who knows CSS can just pick up and immediately understand.

  3. You want to write framework-agnostic components.

  4. You want to make it easy for users to change the colors of your web site / web app.

    How? Just overwrite the semantic CSS variables from jibe.css using JS:

    const root = document.documentElement;
root.style.setProperty('--color-primary', 'var(--color-red-500)');
root.style.setProperty('--color-secondary', 'var(--color-pink-500)');