🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%

Utilities (CSS)

The 📁base/_util.scss file contains a set of utility classes used across multiple components.

⚠️ The files inside the base/ folder contain essential CSS rules and utility classes. We suggest you don't modify them. Use the custom-style/ folder to add your own style.

🔍 On this page:

  1. Flexbox
  2. Display
  3. Visibility
  4. Margin
  5. Padding
  6. Vertical Alignment
  7. Typography
  8. Color
  9. Width
  10. Height
  11. Max-width
  12. Min-width
  13. Position
  14. Overflow
  15. Background
  16. Border
  17. Border Radius
  18. Box Shadow
  19. Media Wrapper
  20. Float
  21. Object Fit

Flexbox #

The flexbox utility classes help you align content and create 2D layouts:

Class Description
.flex display: flex;
.inline-flex display: inline-flex;
.flex-wrap flex-wrap: wrap;
.flex-column flex-direction: column;
.flex-column-reverse flex-direction: column-reverse;
.flex-row flex-direction: row;
.flex-row-reverse flex-direction: row-reverse;
.flex-center justify-content: center; align-items: center;
.justify-start justify-content: flex-start;
.justify-end justify-content: flex-end;
.justify-center justify-content: center;
.justify-between justify-content: space-between;
.items-center align-items: center;
.items-start align-items: flex-start;
.items-end align-items: flex-end;

Edit the flexbox utility classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl).


Classes for flex items:

Class Description
.flex-grow flex-grow: 1;
.flex-shrink-0 flex-shrink: 0;
.flex-basis-0 flex-basis: 0;

Flex gap: set a gap among flex items using one of the .flex-gap-{size} classes:

Class Description
.flex-gap-xxxs set gap equal to var(--space-xxxs)
.flex-gap-xxs set gap equal to var(--space-xxs)
.flex-gap-xs set gap equal to var(--space-xs)
.flex-gap-sm set gap equal to var(--space-sm)
.flex-gap-md set gap equal to var(--space-md)
.flex-gap-lg set gap equal to var(--space-lg)
.flex-gap-xl set gap equal to var(--space-xl)
.flex-gap-xxl set gap equal to var(--space-xxl)
.flex-gap-xxxl set gap equal to var(--space-xxxl)


Display #

Display utility classes:

Class Description
.block display: block;
.flex display: flex;
.inline-block display: inline-block;
.inline-flex display: inline-flex;
.inline display: inline;

Edit the display utility classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl).


<h1>Line one, <span class="[email protected]">line two at 'medium' media query.</span></h1>

Visibility #

Visibility utility classes. More information on how these classes work on the Visibility documentation page.

Class Description
[email protected] hide element until breakpoint 'xs'
[email protected] hide element until breakpoint 'sm'
[email protected] hide element until breakpoint 'md'
[email protected] hide element until breakpoint 'lg'
[email protected] hide element until breakpoint 'xl'
[email protected] hide element at breakpoint 'xs'
[email protected] hide element at breakpoint 'sm'
[email protected] hide element at breakpoint 'md'
[email protected] hide element at breakpoint 'lg'
[email protected] hide element at breakpoint 'xl'

Margin #

Margin utility classes:

Class Description
.margin-xxxxs margin: var(--space-xxxxs);
.margin-xxxs margin: var(--space-xxxs);
.margin-xxs margin: var(--space-xxs);
.margin-xs margin: var(--space-xs);
.margin-sm margin: var(--space-sm);
.margin-md margin: var(--space-md);
.margin-lg margin: var(--space-lg);
.margin-xl margin: var(--space-xl);
.margin-xxl margin: var(--space-xxl);
.margin-xxxl margin: var(--space-xxxl);
.margin-xxxxl margin: var(--space-xxxxl);
.margin-auto margin: auto;

Target a specific side using .margin-{side}-{size}:

Class Description
.margin-top-xs margin-top: var(--space-xs);
.margin-bottom-xl margin-bottom: var(--space-xl);
.margin-right-auto margin-right: auto;
.margin-left-md margin-left: var(--space-md);

Target left and right using .margin-x-{size}:

Class Description
.margin-x-sm margin-left: var(--space-sm); margin-right: var(--space-sm);

Target top and bottom using .margin-y-{size}:

Class Description
.margin-y-md margin-top: var(--space-md); margin-bottom: var(--space-md);

Specify that margin is active only past a specific breakpoint using [email protected]{breakpoint}:

Padding #

Padding utility classes:

Class Description
.padding-xxxxs padding: var(--space-xxxxs);
.padding-xxxs padding: var(--space-xxxs);
.padding-xxs padding: var(--space-xxs);
.padding-xs padding: var(--space-xs);
.padding-sm padding: var(--space-sm);
.padding-md padding: var(--space-md);
.padding-lg padding: var(--space-lg);
.padding-xl padding: var(--space-xl);
.padding-xxl padding: var(--space-xxl);
.padding-xxxl padding: var(--space-xxxl);
.padding-xxxxl padding: var(--space-xxxxl);
.padding-component padding: var(--component-padding);

Target a specific side using .padding-{side}-{size}:

Class Description
.padding-top-sm padding-top: var(--space-sm);
.padding-bottom-xl padding-bottom: var(--space-xl);
.padding-right-xs padding-right: var(--space-xs);
.padding-left-component padding-left: var(--component-padding);

Target left and right using .padding-x-{size}:

Class Description
.padding-x-sm padding-left: var(--space-sm); padding-right: var(--space-sm);

Target top and bottom using .padding-y-{size}:

Class Description
.padding-y-xs padding-top: var(--space-xs); padding-bottom: var(--space-xs);

Specify that padding is active only past a speficif breakpoint using [email protected]{breakpoint}:

Vertical Alignment #

Vertical alignment utility classes:

Class Description
.align-baseline vertical-align: baseline;
.align-top vertical-align: top;
.align-middle vertical-align: middle;
.align-bottom vertical-align: bottom;

Typography #

Typography utility classes:

Class Description
.link apply same style of link elements
.text-bold font-weight: bold;
.text-underline text-decoration: underline;
.text-truncate truncate text if it exceeds its parent (example)
.text-replace replace text with img
.text-nowrap white-space: nowrap;

Text size:

Class Description
.text-xs font-size: var(--text-xs);
.text-sm font-size: var(--text-sm);
.text-base font-size: 1em;
.text-md font-size: var(--text-md);
.text-lg font-size: var(--text-lg);
.text-xl font-size: var(--text-xl);
.text-xxl font-size: var(--text-xxl);
.text-xxxl font-size: var(--text-xxxl);

Text alignment:

Class Description
.text-center text-align: center;
.text-left text-align: left;
.text-right text-align: right;

Edit the text alignment classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl).


Modify the line-height of the .text-component:

Class Description
.line-height-xs --heading-line-height: 1; --body-line-height: 1;
.line-height-sm --heading-line-height: 1.1; --body-line-height: 1.2;
.line-height-md --heading-line-height: 1.15; --body-line-height: 1.4;
.line-height-lg --heading-line-height: 1.22; --body-line-height: 1.58;
.line-height-xl --heading-line-height: 1.3; --body-line-height: 1.72;

Modify the vertical spacing (margins) of the .text-component:

Class Description
.v-space-xxs --text-vspace-multiplier: 0.25;
.v-space-xs --text-vspace-multiplier: 0.5;
.v-space-sm --text-vspace-multiplier: 0.75;
.v-space-md --text-vspace-multiplier: 1.25;
.v-space-lg --text-vspace-multiplier: 1.5;
.v-space-xl --text-vspace-multiplier: 1.75;
.v-space-xxl --text-vspace-multiplier: 2;

Color #

Color utility classes:

Class Description
.color-inherit color: inherit;
.color-bg color: var(--color-bg);
.color-contrast-lower color: var(--color-contrast-lower);
.color-contrast-low color: var(--color-contrast-low);
.color-contrast-medium color: var(--color-contrast-medium);
.color-contrast-high color: var(--color-contrast-high);
.color-contrast-higher color: var(--color-contrast-higher);
.color-primary color: var(--color-primary);
.color-accent color: var(--color-accent);
.color-success color: var(--color-success);
.color-warning color: var(--color-warning);
.color-error color: var(--color-error);


Width utility classes:

Class Description
.width-xxxxs width: 0.25rem; (~4px)
.width-xxxs width: 0.5rem; (~8px)
.width-xxs width: 0.75rem; (~12px)
.width-xs width: 1rem; (~16px)
.width-sm width: 1.25rem; (~24px)
.width-md width: 2rem; (~32px)
.width-lg width: 3rem; (~48px)
.width-xl width: 4rem; (~64px)
.width-xxl width: 6rem; (~96px)
.width-xxxl width: 8rem; (~128px)
.width-xxxxl width: 16rem; (~256px)
.width-10% width: 10%;
.width-20% width: 20%;
.width-25% width: 25%;
.width-30% width: 30%;
.width-33% width: calc(100% / 3);
.width-40% width: 40%;
.width-50% width: 50%;
.width-60% width: 60%;
.width-66% width: calc(100% / 1.5);
.width-70% width: 70%;
.width-75% width: 75%;
.width-80% width: 80%;
.width-90% width: 90%;
.width-100% width: 100%;
.width-100vw width: 100vw;


Height utility classes:

Class Description
.height-xxxxs height: 0.25rem; (~4px)
.height-xxxs height: 0.5rem; (~8px)
.height-xxs height: 0.75rem; (~12px)
.height-xs height: 1rem; (~16px)
.height-sm height: 1.25rem; (~24px)
.height-md height: 2rem; (~32px)
.height-lg height: 3rem; (~48px)
.height-xl height: 4rem; (~64px)
.height-xxl height: 6rem; (~96px)
.height-xxxl height: 8rem; (~128px)
.height-xxxxl height: 16rem; (~256px)
.height-10% height: 10%;
.height-20% height: 20%;
.height-25% height: 25%;
.height-30% height: 30%;
.height-33% height: calc(100% / 3);
.height-40% height: 40%;
.height-50% height: 50%;
.height-60% height: 60%;
.height-66% height: calc(100% / 1.5);
.height-70% height: 70%;
.height-75% height: 75%;
.height-80% height: 80%;
.height-90% height: 90%;
.height-100% height: 100%;
.height-100vh height: 100vh;

Max-width #

The .max-width-{size} classes can be used to set the max-width of an element:

Class Description
.max-width-xxxxs set max-width equal to 20rem (~320px)
.max-width-xxxs set max-width equal to 26rem (~416px)
.max-width-xxs set max-width equal to 32rem (~512px)
.max-width-xs set max-width equal to 38rem (~608px)
.max-width-sm set max-width equal to 48rem (~768px)
.max-width-md set max-width equal to 64rem (~1024px)
.max-width-lg set max-width equal to 80rem (~1280px)
.max-width-xl set max-width equal to 90rem (~1440px)
.max-width-xxl set max-width equal to 100rem (~1600px)
.max-width-xxxl set max-width equal to 120rem (~1920px)
.max-width-xxxxl set max-width equal to 150rem (~2400px)

If you want to have different max-widths at different breakpoints, you can use one of the .max-width-adaptive-{size} classes (example):

Class Description
.max-width-adaptive-sm set max-width equal to 48rem (~768px) at breakpoint md
.max-width-adaptive-md set max-width equal to 64rem (~1024px) at breakpoint md
.max-width-adaptive-lg set max-width equal to 64rem (~1024px) at breakpoint md and to 80rem (~1280px) at breakpoint xl
.max-width-adaptive-xl set max-width equal to 64rem (~1024px) at breakpoint md and to 90rem (~1440px) at breakpoint xl

Min-width #

Min-width utility classes:

Class Description
.min-width-0 min-width: 0;
.min-width-25% min-width: 25%;
.min-width-33% min-width: calc(100% / 3);
.min-width-50% min-width: 50%;
.min-width-66% min-width: calc(100% / 1.5);
.min-width-75% min-width: 75%;
.min-width-100% min-width: 100%

Position #

Position utility classes:

Class Description
.position-relative position: relative;
.position-absolute position: absolute;
.position-fixed position: fixed;
.position-sticky position: sticky;

Overflow #

Overflow utility classes:

Class Description
.overflow-hidden overflow: hidden;
.overflow-auto overflow: auto;

Background #

Background color utility classes:

Class Description
.bg-inherit background-color: inherit;
.bg background-color: var(--color-bg, hsl(0, 0%, 100%));
.bg-contrast-lower background-color: var(--color-contrast-lower, hsl(0, 0%, 95%));
.bg-contrast-low background-color: var(--color-contrast-low, hsl(240, 1%, 83%));
.bg-contrast-medium background-color: var(--color-contrast-medium, hsl(240, 1%, 48%));
.bg-contrast-high background-color: var(--color-contrast-high, hsl(240, 4%, 20%));
.bg-contrast-higher background-color: var(--color-contrast-higher, hsl(240, 8%, 12%));
.bg-primary background-color: var(--color-primary, hsl(220, 90%, 56%));
.bg-accent background-color: var(--color-accent, hsl(355, 90%, 61%));
.bg-success background-color: var(--color-success, hsl(94, 48%, 56%));
.bg-warning background-color: var(--color-warning, hsl(46, 100%, 61%));
.bg-error background-color: var(--color-error, hsl(355, 90%, 61%));
.bg-white background-color: var(--color-white, white);
.bg-black background-color: var(--color-black, black);

Border #

Border utility classes:

Class Description
.border border: 1px solid var(--color-contrast-low);
.border-top border-top: 1px solid var(--color-contrast-low);
.border-bottom border-bottom: 1px solid var(--color-contrast-low);
.border-left border-left: 1px solid var(--color-contrast-low);
.border-right border-right: 1px solid var(--color-contrast-low);
.border-2 border-width: 2px;
.border-contrast-lower border-color: var(--color-contrast-lower);
.border-contrast-medium border-color: var(--color-contrast-medium);

Border Radius #

Border radius utility classes:

Class Description
.radius-sm border-radius: var(--radius-sm);
.radius-md border-radius: var(--radius-md);
.radius-lg border-radius: var(--radius-lg);

Box Shadow #

Box shadow utility classes:

Class Description
.shadow-xs box-shadow: var(--shadow-xs);
.shadow-sm box-shadow: var(--shadow-sm);
.shadow-md box-shadow: var(--shadow-md);
.shadow-lg box-shadow: var(--shadow-lg);
.shadow-xl box-shadow: var(--shadow-xl);

Media Wrapper #

Media Wrapper utility classes:

Class Description
.media-wrapper make iframe responsive + prevent img jump when page loads. Default ratio is 16:9 (example).
.media-wrapper--4:3 set 4:3 ratio
.media-wrapper--1:1 set 1:1 ratio (square)

To create additional .media-wrapper--x:y classes, define your custom $media-wrapper-aspect-ratios SASS map and import it before the 'base' and 'custom-style' files of the framework.

$media-wrapper-aspect-ratios: (
  (4 3),
  (1 1),
  (21 9) // custom ratio

@import 'base';
@import 'custom-style';

Make sure to include the ratios 4/3 and 1/1 when defining your custom $media-wrapper-aspect-ratios map (as shown in the snippet above).

Float #

Float utility classes:

Class Description
.float-left float: left;
.float-right float: right;
.clearfix clear float of child elements

Object Fit #

Object fit utility classes:

Class Description
.object-contain object-fit: contain;
.object-cover object-fit: cover;

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us