Utilities

Quick Flexbox tweaks, visibility controls, and responsive adjustments.

Luxa has a small and simple collection of utility classes designed for quick modifications to HTML.

These utilities can be convenient, with easy Flexbox properties, visibility controls, and simple media query-based responsiveness.

Visibility

Control the visibility of elements across different screen sizes using these utility classes.

Class NameDescriptionProperties / Media Query
.hideHides elements on all screen sizes.display: none; visibility: hidden;
.hide-on-deskHides elements on desktop, visible on mobile.@media (max-width: $breakpoint) { display: none; visibility: hidden; } on desktop.
{ display: block; visibility: visible; } on mobile.
.hide-on-mbHides elements on mobile, visible on desktop.@media (max-width: $breakpoint) { display: none; visibility: hidden; } on mobile.
{ display: block; visibility: visible; } on desktop.

Flexbox

Utilize these Flexbox utilities to establish flexible and responsive layouts quickly.

Class NameDescriptionProperties
.flexEstablishes a flex container.display: flex;
.flex-centerCenter-aligns items in a flex container.display: flex; align-items: center; justify-content: center;

Flow Direction

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

Class NameDescriptionProperties
.flow-column-wrapSets a column flow with wrapping.flex-direction: column; flex-wrap: wrap;
.flow-column-nowrapSets a column flow without wrapping.flex-direction: column; flex-wrap: nowrap;
.flow-row-wrapSets a row flow with wrapping.flex-direction: row; flex-wrap: wrap;
.flow-row-nowrapSets a row flow without wrapping.flex-direction: row; flex-wrap: nowrap;
Alignment

Align flex items effectively using these alignment utilities.

Class NameDescriptionProperties
.align-centerAligns items at the center.align-items: center;
.align-endAligns items at the end.align-items: flex-end;
.align-startAligns items at the start.align-items: flex-start;
.align-stretchStretches items to fit the container.align-items: stretch;
Justification

Justify content within your flex wrappers using these specific utilities.

Class NameDescriptionProperties
.justify-aroundDistributes space around items.justify-content: space-around;
.justify-betweenDistributes space between items.justify-content: space-between;
.justify-evenlyDistributes space evenly amongst items.justify-content: space-evenly;
.justify-centerCenters items along the main axis.justify-content: center;
.justify-endAligns items to the end of the container.justify-content: flex-end;
.justify-startAligns items to the start of the container.justify-content: flex-start;
Gap Management

Manage the spacing between flex items with gap utilities.

Class NameDescriptionProperties
.gap-01Applies a small gap between flex items.gap: var(--space-01);
.gap-02Applies a moderate gap.gap: var(--space-02);
.gap-03Applies a larger gap.gap: var(--space-03);
.gap-04Applies a significant gap.gap: var(--space-04);
.gap-05Applies a very large gap.gap: var(--space-05);
.gap-06Applies the largest gap.gap: var(--space-06);
.is-gaplessRemoves the gap between flex items.gap: 0;
Responsives

Adapt your layout to different screen sizes with responsive utilities.

Class NameDescriptionMedia Query
.hide-on-deskHides on desktop, visible on mobile.@media (max-width: $breakpoint)
.hide-on-mbHides on mobile, visible on desktop.@media (max-width: $breakpoint)