mojocss/mojocss

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

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.

mojocss's Issues

Typo in Installation Guide

Hey, thank you for the great job. I haven't spent much time on the framework, but I know that a lot has been done. Well done.

However, I noticed a typo in the installation guide as shown in the screenshot below (import mojo from from 'mojocss'):

The link to this typo is here.

[Documentation] Typo in [.github/CONTRIBUTING.md]

Hi there,
I hope you're doing well. While reviewing the "Contributing to Mojo CSS" documentation, I noticed a small typo that I'd like to bring to your attention.

Details:
Incorrect Word: [resquest]
Correction: [request]
Page/File: [.github/CONTRIBUTING.md]

Issue with media query ordering when using patterns

Hello!
There appears to be an issue with the order that media query breakpoints are generated when they are specified via a pattern.

For example:

 mojo({
    patterns: {
        '.listings': {
            'idle': 'grid-gap-1rem',
            'sm': 'cols-4',
            'md': 'cols-5',
            'lg': 'cols-6'
        },
    }
})

This will always output the media queries in reverse order (largest to smallest), which causes them not to take effect correctly.

If you do this:

<div class="listings" sm="cols-4" md="cols-5" lg="cols-6">

It generates the queries in the right order, and everything works as desired.

Changing the order of the variants in the pattern does not affect the output order in the generated CSS, it's always in reverse order.

If I remove this reverse() things work as expected.

And just to be clear, I am using the default breakpoints; and haven't changed them.

Documentation Updates

Hello!

There is a typo here: https://mojocss.com/docs/guide/color-themes#switchig-themes. "Switchig" should be "Switching".

In this section: https://mojocss.com/docs/guide/color-themes#how-it-works it us showing "undefined-", and I don't think that is the intention.

Cheers!

Discord link seems to have expired

Mojocss js file is too big (not small)

Mojocss docs says:

While a normal project typically requires at least 100kb of CSS to handle the styling,

I doubt it is not ture. Can you give us some real eaxmples / projects that have more than 100kb CSS?

Mojo requires only a single ~50kb (15kb gzipped) JS file to handle the styling of any size project.

A normal tailwind project only generate .css files less than 10kb (before gzipped). So why we need a ~50kb mojo.mini.js?

link: https://mojocss.com/docs/guide/what-is-mojocss#file-size

[Error] SyntaxError: Invalid regular expression: invalid group specifier name (anonymous function) (mojocss.min.js:2) on Safari IOS v15 and v16

I got this error on Safari IOS v15 and v16 and it causes mojocss not to load

Invalid certificate on the webpage

I get a warning when I try to access the mojocss.com webpage

Question about the "Size matters" part of the intro blogpost

In this blogpost this part:

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.

Do you also ship that 15kb to production or you only create the ouput css file ?