Utilities

Quick Flexbox tweaks, visibility controls, and responsive adjustments.

Visibility

Control element visibility across screen sizes:

Class	Description
`.hide`	Hides elements on all screen sizes.
`.hide-on-desk`	Hides elements on desktop, visible on mobile.
`.hide-on-mb`	Hides elements on mobile, visible on desktop.

Flexbox

Quick Flexbox layout utilities:

Class	Description
`.flex`	Establishes a flex container.
`.flex-center`	Center-aligns items in a flex container.

Flexbox is a layout model that automatically arranges elements within a container depending on screen size, device type, and other factors. It enables the creation of complex and responsive layouts with simple CSS rules. To learn more, visit MDN Web Docs on Flexbox.

Flow Direction

Adjust the flow direction of your flex wrappers with these classes.

Class	Description
`.flow-column-wrap`	Sets a column flow with wrapping.
`.flow-column-nowrap`	Sets a column flow without wrapping.
`.flow-row-wrap`	Sets a row flow with wrapping.
`.flow-row-nowrap`	Sets a row flow without wrapping.

Alignment

Align flex items effectively using these alignment utilities.

Class	Description
`.align-center`	Aligns items at the center.
`.align-end`	Aligns items at the end.
`.align-start`	Aligns items at the start.
`.align-stretch`	Stretches items to fit the container.

Justification

Justify content within your flex wrappers using these specific utilities.

Class	Description
`.justify-around`	Distributes space around items.
`.justify-between`	Distributes space between items.
`.justify-evenly`	Distributes space evenly amongst items.
`.justify-center`	Centers items along the main axis.
`.justify-end`	Aligns items to the end of the container.
`.justify-start`	Aligns items to the start of the container.

Gap Management

Manage the spacing between flex items with gap utilities.

Class	Description
`.gap-01`	Applies a small gap between flex items.
`.gap-02`	Applies a moderate gap.
`.gap-03`	Applies a larger gap.
`.gap-04`	Applies a significant gap.
`.gap-05`	Applies a very large gap.
`.gap-06`	Applies the largest gap.
`.is-gapless`	Removes the gap between flex items.

Responsives

Adapt your layout to different screen sizes with responsive utilities.

Class	Description
`.hide-on-desk`	Hides on desktop, visible on mobile.
`.hide-on-mb`	Hides on mobile, visible on desktop.

Usage example

<div class="flex flex-center flow-row-wrap justify-between gap-03">
  <div class="hide-on-mb">Desktop only</div>
  <div>Always visible</div>
  <div class="hide-on-desk">Mobile only</div>
</div>

This example creates a flexible, responsive layout with centered items, row flow, space-between justification, and medium gap. It also demonstrates visibility control for different screen sizes.

Getting Help

Need help? Open an issue. I'll be happy to help. 🎈