Exploring Mojo CSS: A Developer’s Guide

April 11, 2024 (7mo ago)

With CSS frameworks, anyone can now design and develop beautiful user interfaces more easily and reliably. By providing users with pre-configured elements like unique color schemes, font, size, shadows, and much more, frameworks enhance CSS.

One such framework is Mojo CSS. It is a lightweight, responsive, and customizable CSS framework that helps developers create modern and visually appealing websites. Mojo CSS offers a novel approach to web styling and challenges the current state of CSS frameworks. It was created with the modern developer in mind.

What is Mojo CSS?

Mojo CSS is a modern CSS framework that aims to simplify the process of styling web applications. It provides a set of pre-designed components and utilities that can be easily customized to create unique and visually appealing designs. Mojo CSS is built on top of modern CSS features like CSS variables, Flexbox, and Grid, making it easy to create responsive layouts and interactive components.

Instead of using static CSS files as in other traditional techniques, Mojo CSS processes and outputs everything in real time so you don't have to reload the website to view the changes.

Utility classes are also preferred to writing new CSS when using Mojo CSS. Atomic utilities can be combined with CSS selectors. Additionally, Mojo provides attribute variants, which simplify the maintenance of CSS components.

Getting Started with Mojo CSS

To get started with Mojo CSS, you can include the framework in your project using a CDN link or by installing it via npm. Here's how you can include Mojo CSS in your project using a CDN link:

<script src="https://unpkg.com/mojocss"></script>

Alternatively, you can install Mojo CSS via npm using the following command:

npm install mojo-css # yarn add mojo-css

Then import it in your project's main.js and initiate mojo():

// Import Mojo CSS
import mojo from "mojocss";
 
// Initialize
mojo();

Once you've included Mojo CSS in your project, you can start using its components and utilities to style your web applications. Mojo CSS provides a wide range of components like buttons, forms, cards, and navigation bars, as well as utilities like spacing, typography, and colours.

Modifiers in Mojo CSS

The Important Modifier

Prefixing any utility with an exclamation mark ! will make make it !important. This is useful when you want to override a utility class.

<div class="!bg-c-red bg-c-blue">
  This will have a red background even if blue is defined later.
</div>

m-load

The m-load modifier is used to hide the content of the page until the page is fully loaded. This is useful when you want to prevent the content from being displayed until all the assets are loaded.

<body m-load style="display:none">
  ...
</body>

Variants

Mojo CSS provides variants for attributes like hover, focus, and active. These variants can be used to apply different styles to an element based on user interaction.

Hover Variant

The hover variant is used to apply styles to an element when the user hovers over it.

<div class="..." hover="bg-c-blue">
  This element has a blue background when hovered
</div>

State Variants

State variants like focus and active can be used to apply styles to an element when it is in focus or active.

<input
  type="text"
  class="..."
  focus="bg-c-blue"
  placeholder="This input's background color will change on focus."
/>
 
<div class="..." active="bg-c-blue">
  This element has a blue background when pressed down.
</div>

Parent Variants

Parent variants can be used to apply styles to a child element based on its parent element. You just need to add parent- before the variant and add the parent attribute to the parent element.

<div parent class="...">
  <div class="..." parent-hover="bg-c-blue">Child</div>
</div>

Parent Variants table

Sibling Variants

Sibling variants can be used to apply styles to a sibling element based on the target element. You just need to add sibling- before the variant and add the sibling attribute to the target element.

<div sibling class="...">Hover me</div>
<div class="d-none ..." sibling-hover="d-block">Hey!</div>

Responsive Design in Mojo

Mojo CSS provides a set of responsive utilities that can be used to create responsive layouts for your web applications. You can use these utilities to define different styles for different screen sizes.

Breakpoints

<table style={{"width": "100%",
"border-collapse": "collapse"}}>
    <thead style={{"border": "1px solid #ddd",
"padding": "8px",
"text-align": "center",
"color":"var(--pink)"}}>
        <tr>
            <th>Breakpoint</th>
            <th>CSS Rule</th>
        </tr>
    </thead>
    <tbody style={{"border": "1px solid #ddd",
"text-align": "center"}}>
        <tr>
            <td>sm</td>
            <td>`@media (min-width: 576px) {  }`</td>
        </tr>
        <tr>
            <td>md</td>
            <td>`@media (min-width: 768px) {  }`</td>
        </tr>
        <tr>
            <td>lg</td>
            <td>`@media (min-width: 992px) {  }`</td>
        </tr>
        <tr>
            <td>xl</td>
            <td>`@media (min-width: 1200px) {  }`</td>
        </tr>
        <tr>
            <td>xxl</td>
            <td>`@media (min-width: 1500px) {  }`</td>
        </tr>
    </tbody>
</table>

Mojo's default approach is mobile-first, meaning styles are applied to smaller screens by default and then overridden for larger screens using media queries.

Reverse Breakpoints

You can also use reverse breakpoints to apply styles to larger screens by default and then override them for smaller screens. You just need to add i- before the breakpoint.

<div i-md="d-none"  ">
    This element is hidden on tablets and smaller screens.
</div>

Color System

In Mojo CSS, along with the color, you can also specify the amount of tint or shade you want to apply to the color. It's essentially a color pallette maker on the go.

<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>

Add a colon (:) to the colour utility, then a plus sign (+) and the desired intensity value to indicate the tinting level, as in bg-c-blue:+10.

Similarly, to modify the shading, replace the plus sign (+) with a minus sign (-) and specify the desired intensity value.bg-c-blue:-10

VSCode Extension

Mojo CSS also provides a VSCode extension that helps developers use Mojo CSS more efficiently. The extension provides IntelliSense support for Mojo CSS classes, utilities, and variants, making it easier to write and maintain CSS code.

You can install the Mojo CSS extension from the Visual Studio Code Marketplace and start using it in your projects.

Conclusion

Mojo CSS is a powerful and versatile CSS framework that simplifies the process of styling web applications. By providing a wide range of components, utilities, and modifiers, Mojo CSS makes it easy to create modern and visually appealing designs. With its responsive design utilities, color system, and VSCode extension, Mojo CSS offers a complete solution for developers looking to enhance their web styling capabilities. You can learn more about Mojo CSS and start using it in your projects by visiting the official documentation.

LinkedIn
X