<picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/mojocss/mojocss/HEAD/.github/logo-dark.png"> </picture>

The Next-Gen Atomic CSS Framework for crafting gorgeous UIs without shipping any CSS.

Documentation · Blog · Play

Community

Stay in the loop with Mojo CSS development progress and engage in conversations with the project maintainers and community members.

• Follow @mojocss on X (Twitter).
• Ask questions and suggest new features on our GitHub Discussions.
• Discuss, ask questions, and more on the community Discord server.

Contributing

Please read our contribution guidelines before making a pull request.

Copyright and license

Code copyright 2024 Mojo CSS Authors. Code released under the MIT license.

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[0.2.0] - 2024-04-19

Added

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

Changed

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

Fixed

• Patten bugs: Fixed some bugs in patterns.
• CSS String Bugs: Fixed some bugs in CSS string generation.
• User Reported Bugs: More details in #13, #17, #20, #21
• Media Query Bugs: Fixed bugs in generating media queries for variants like print.

[0.1.1] - 2024-02-12

Fixed

• Patten Bug: Media query ordering (#5)