Introducing Mojo CSS: Your New Styling Superpower

Today, we're beyond excited to introduce you to Mojo CSS, a game-changing CSS framework born out of our frustration and passion for making web development smoother, more customizable, and downright fun.

The Journey Begins

It all started a few years ago when the struggle was real. I found myself drowning in the complexity of setting up existing CSS frameworks for my projects. The setup was overwhelming, and the lack of customization options left me feeling constrained. Determined to break free from these limitations, I embarked on a journey to create a framework that's not only a breeze to set up but also offers unparalleled flexibility. Enter Mojo.

Fast forward to today, and Mojo has become the brainchild of not just one, but two passionate developers—myself and my friend, Ali Mirabbasi.

Countless iterations and a couple of procrastination hurdles later, we're finally ready to share Mojo with the world.

What Makes Mojo Special?

Mojo CSS is not just another framework; it's a new way of styling that prioritizes ease of use, customization, and speed. At its core, Mojo boasts an ultra-lightweight (~15kb gzipped) JavaScript engine that dynamically generates CSS on the fly by scanning your page for utilities. But that's just the tip of the iceberg.

Here's why Mojo stands out:

Infinite Color Themes

Say goodbye to being limited to just dark mode. Mojo empowers you to define infinite theme colors, giving you the creative freedom to make your projects truly unique. And the best part? It's incredibly simple, just pick three main colors and you're good to go!

  mojo({
    base: {
      themes: {
        default: {
          body: "#f2f7f9",
          invert: "#6b88a5",
          primary: "#ff6145",
        },
        // Try out different color themes,
        // make as many you want without worrying about overloading the project.
        dim: {
          body: "#1a2a39",
          invert: "#90a4b8",
        },
        blackout: {
          body: "#000",
          invert: "#999",
        },
      },
    }
  });

Endless Color Possibilities

Mojo takes color customization to the next level by allowing you to use infinite colors, along with their countless tints and shades. Your creativity knows no bounds.

<div>
    <div class="bg-c-primary:-- -10**"></div>
    <div class="bg-c-primary:-- -5**"></div>
    <div class="bg-c-primary"></div>
    <div class="bg-c-primary:-- +5**"></div>
    <div class="bg-c-primary:-- +10**"></div>
</div>

Real CSS Selectors

Mojo breaks the mold by letting you use real CSS selectors right inside your HTML, seamlessly integrated with the framework's utilities. It's a game-changer for those who crave flexibility and readability.

<ul -- _="(li.active) bg-c-red text-c-white" **>
    <li>First Item</li>
    <li class="active">Second Item</li>
    <li>Third Item</li>
</ul>

Atomic CSS, Elevated

Mojo follows the Atomic CSS approach but adds a touch of readability and anti-repetition magic. No more convoluted classes—simply write clean and concise code that makes sense.

<!-- Typical Atomic CSS frameworks -->
<div class="bg-red-400 px-5 -- hover:bg-red-600 hover:px-8 **">
    ...
</div>

<!-- Mojo CSS -->
<div class="bg-c-red px-5" -- hover="bg-c-red:+2 px-8" **>
    ...
</div>

Size Matters

We understand the importance of a lightweight framework. Mojo weighs in at only ~50kb minified and a mere ~15kb gzipped. It's a powerhouse in a small package.

Size reduction in Mojo doesn't mean sacrificing features or flexibility. Despite its compact size, Mojo CSS offers a comprehensive set of utilities, allowing you to craft beautiful and feature-rich UIs. It's the perfect balance between efficiency and capability, making your development journey smoother and more enjoyable.