Modern Atomic CSS Framework for Lightning Fast UIs – Mojo

Category: CSS & CSS3 , Frameworks , Recommended | June 7, 2024
Views Total:12 views
Official Page:Go to website
Last Update:June 7, 2024


Modern Atomic CSS Framework for Lightning Fast UIs – Mojo


Mojo CSS is a next-generation atomic CSS framework that allows developers to create beautiful user interfaces without writing any CSS. Like the familiar TailwindCSS, Mojo CSS generates CSS based on your HTML in real-time with near zero runtime.

it scans HTML and generates required CSS on the fly, which eliminates unused styles and enables real-time updates without page reloads. This atomic approach means faster page loads, better performance, and easier maintenance than traditional CSS frameworks.

With Mojo, developers can build custom, responsive UIs faster using utility classes instead of writing CSS. The customizable color engine provides access to any color and shade needed. Mojo also allows combining atomic utilities within standard CSS selectors for more flexibility.

How to use it:

1. Install & download the Mojo CSS framework.

# Yarn
$ yarn add mojocss
$ npm install mojocss

2. Import the mojo into your project.

// ES Module
import mojo from from 'mojocss'
// Browser
<script src=""></script>

3. Initialize the mojo.


4. Available utilities.

  • Background
  • Typography
  • Border
  • Colors
  • Effects
  • Filters
  • Display
  • Position
  • Transform
  • Z-Index
  • Positional Offsets
  • Flexbox
  • Grid System
  • Arrange
  • Box
  • Margin
  • Padding
  • Gap
  • Width
  • Height
  • Transition
  • Animation
  • User Controls
  • Object
  • Opacity & Visibility

5. See the official documentation for details.


v0.2.0 (06/07/2024)

  • SCG(Static CSS Generation): Generates CSS from HTML. Useful for Progressive Rendering.
  • New color utilities: now you can change color’s tinting or hading amount without specifying the color name. (e.g. bg-c:+5)
  • Using variants inside arbitrary selectors: _=”(@dark:hover .testclass) bg-c-red” is now possible.
  • Logical margin and padding utilities: Added ms-* me-* ps-* pe-*
  • Color System: Optimized the color engine to use HSLA instead of RGBA.
  • Compile Algorithm: Improved compile speed and reduced memory usage.
  • Utilities: Created mappings for specific utilities.
  • Optimization: ~10% reduction in Mojo’s overall size.
  • Shorter border and rounded namings: Changed top, right, bottom, left to t, r, b, l. (e.g. border-top-1 => border-t-1)
  • Patten bugs: Fixed some bugs in patterns.
  • CSS String Bugs: Fixed some bugs in CSS string generation.
  • Media Query Bugs: Fixed bugs in generating media queries for variants like print.

You Might Be Interested In:

Leave a Reply