Mojo CSS Capsule Example

An example showcasing how to create components, use options and add utilities to Mojo CSS using capsules. This capsule will add a button component and s-[*] utilities to your project.

Usage

NPM

1. Install the capsule package via npm:

npm install @mojocss/capsule-example

2. Import the capsuleExample function from the installed package:

import capsuleExample from "@mojocss/capsule-example";

3. Add the capsule to your Mojo config:

mojo({
  // Mojo CSS Config
  capsules: [capsuleExample],
});

Alternatively, you can configure specific options:

mojo({
  // Mojo CSS Config
  capsules: [
    {
      capsule: capsuleExample,
      options: {
        rounded: 5, // Border radius
        px: 6, // Padding left and right
        height: "2.5rem", //  Button Height
        text: 100, // Font size (100 = 1rem)
        textW: 400, // Font weight
      },
    },
  ],
});

CDN

<script src="https://unpkg.com/@mojocss/capsule-example"></script>

and then

mojo({
  // Mojo CSS Config
  capsules: [capsuleExample],
});

Button

This is how you use the button:

<button class="m-button"><span>My Button</span></button>

Use any color you want:

<button class="m-button bg-c-blue"><span>My Button</span></button>

Square utility

Using this utility you can control both width and height of an element.

<!-- s-6 ==> w-6 h-6 -->
<div class="s-6">...</div>

Related Resources

• Mojo CSS
• Capsules Documentation