Responsive Design

Mojo's responsive design works by using breakpoint variants, which tell the website how to arrange its content based on the screen size.

Defining the breakpoints as variants allows for easy adaptation of element styling to different screen sizes.

You can effortlessly make any utility responsive by utilizing responsive variants. This includes utilities for transition, cursor, and animation.

By default, Mojo utilizes five breakpoints inspired by the screen sizes of popular devices:

breakpointCSS Rule
sm@media (min-width: 576px) { ... }
md@media (min-width: 768px) { ... }
lg@media (min-width: 992px) { ... }
xl@media (min-width: 1200px) { ... }
xxl@media (min-width: 1500px) { ... }
Learn how to modify and customize the breakpoints in config's breakpoints page.

As you can see, Mojo's default approach is mobile-first, which means you're starting with the smallest screens in mind. This responsive design system helps you avoid CSS overrides.

The example below demonstrates a grid that is single column on mobile phones, two columns on tablets, and four columns on desktops and larger screens.

Item
Item
Item
Item 


<div class="grid" -- md="cols-2" ** -- lg="cols-4" **>
    <div> Grid Item </div>
    <div> Grid Item </div>
    <div> Grid Item </div>
    <div> Grid Item </div>
</div>

Reverse Breakpoints

Sometimes it's more convinent to go the opposite direction of the confgured breakpoints (e.g. desktop-first), just slap an i- before the breakpoint name, and voilà, it works in reverse.

For instance, if you want something to take effect only on tablets and smaller screens, use i-md="...":



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