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

Projects

Progress value is 30%

Utilities (CSS)

CodyFrame comes packed with an essential set of utility classes.

Optionally, you can add your own utility classes in the 📁 custom-style/_util.scss file.


🔍 On this page:

  1. Align Items
  2. Backdrop-filter
  3. Background
  4. Border
  5. Border Radius
  6. Box Shadow
  7. Color
  8. Cursor
  9. Display
  10. Flexbox
  11. Float
  12. Font Family
  13. Font Size
  14. Font Style
  15. Font Weight
  16. Height
  17. Justify Content
  18. Letter Spacing
  19. Line Height
  20. Margin
  21. Max-height
  22. Max-width
  23. Media Wrapper
  24. Min-height
  25. Min-width
  26. Mix-blend-mode
  27. Object Fit
  28. Opacity
  29. Order
  30. Overflow
  31. Padding
  32. Pointer Events
  33. Position
  34. Text Align
  35. Text Decoration
  36. Text Transform
  37. Transform
  38. Typography
  39. User Select
  40. Vertical Align
  41. Visibility
  42. White Space
  43. Width
  44. Z-Index

Align Items #

Align-items utility classes:

Class Description
.items-center align-items: center;
.items-start align-items: flex-start;
.items-end align-items: flex-end;
.items-baseline align-items: baseline;

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

Backdrop Filter #

Apply graphical effects to the area behind an element using the backdrop-filter utility classes:

Class Description
.backdrop-blur-10 backdrop-filter: blur(10px);
.backdrop-blur-20 backdrop-filter: blur(20px);

Background #

Background color utility classes:

Class Description
.bg-transparent background-color: transparent;
.bg-inherit background-color: inherit;
.bg background-color: var(--color-bg);
.bg-contrast-lower background-color: var(--color-contrast-lower);
.bg-contrast-low background-color: var(--color-contrast-low);
.bg-contrast-medium background-color: var(--color-contrast-medium);
.bg-contrast-high background-color: var(--color-contrast-high);
.bg-contrast-higher background-color: var(--color-contrast-higher);
.bg-primary-darker background-color: var(--color-primary-darker);
.bg-primary-dark background-color: var(--color-primary-dark);
.bg-primary background-color: var(--color-primary);
.bg-primary-light background-color: var(--color-primary-light);
.bg-primary-lighter background-color: var(--color-primary-lighter);
.bg-accent-darker background-color: var(--color-accent-darker);
.bg-accent-dark background-color: var(--color-accent-dark);
.bg-accent background-color: var(--color-accent);
.bg-accent-light background-color: var(--color-accent-light);
.bg-accent-lighter background-color: var(--color-accent-lighter);
.bg-success-darker background-color: var(--color-success-darker);
.bg-success-dark background-color: var(--color-success-dark);
.bg-success background-color: var(--color-success);
.bg-success-light background-color: var(--color-success-light);
.bg-success-lighter background-color: var(--color-success-lighter);
.bg-warning-darker background-color: var(--color-warning-darker);
.bg-warning-dark background-color: var(--color-warning-dark);
.bg-warning background-color: var(--color-warning);
.bg-warning-light background-color: var(--color-warning-light);
.bg-warning-lighter background-color: var(--color-warning-lighter);
.bg-error-darker background-color: var(--color-error-darker);
.bg-error-dark background-color: var(--color-error-dark);
.bg-error background-color: var(--color-error);
.bg-error-light background-color: var(--color-error-light);
.bg-error-lighter background-color: var(--color-error-lighter);
.bg-white background-color: var(--color-white, white);
.bg-black background-color: var(--color-black, black);

If you use a background color utility class, you can modify the background opacity using one of the following classes:

Class Description
.bg-opacity-0 background opacity 0%
.bg-opacity-10% background opacity 10%
.bg-opacity-20% background opacity 20%
.bg-opacity-30% background opacity 30%
.bg-opacity-40% background opacity 40%
.bg-opacity-50% background opacity 50%
.bg-opacity-60% background opacity 60%
.bg-opacity-70% background opacity 70%
.bg-opacity-80% background opacity 80%
.bg-opacity-90% background opacity 90%

Usage example:

<div class="bg-primary bg-opacity-50%"> <!-- content --> </div> 

How to create custom background opacity classes:

.bg-opacity-075\% {
  --bg-o: 0.075;
}

.bg-opacity-15\% {
  --bg-o: 0.15;
}

⚠️ The background opacity utility classes are based on CSS variables and work only in modern browsers.

Background size and background position utility classes:

Class Description
.bg-cover background-size: cover;
.bg-center background-position: center;
.bg-no-repeat background-repeat: no-repeat;

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-3 border-width: 3px;
.border-4 border-width: 4px;
.border-contrast-lower border-color: var(--color-contrast-lower);
.border-contrast-low border-color: var(--color-contrast-low);
.border-contrast-medium border-color: var(--color-contrast-medium);
.border-contrast-high border-color: var(--color-contrast-high);
.border-contrast-higher border-color: var(--color-contrast-higher);
.border-primary-darker border-color: var(--color-primary-darker);
.border-primary-dark border-color: var(--color-primary-dark);
.border-primary border-color: var(--color-primary);
.border-primary-light border-color: var(--color-primary-light);
.border-primary-lighter border-color: var(--color-primary-lighter);
.border-accent-darker border-color: var(--color-accent-darker);
.border-accent-dark border-color: var(--color-accent-dark);
.border-accent border-color: var(--color-accent);
.border-accent-light border-color: var(--color-accent-light);
.border-accent-lighter border-color: var(--color-accent-lighter);
.border-success-darker border-color: var(--color-success-darker);
.border-success-dark border-color: var(--color-success-dark);
.border-success border-color: var(--color-success);
.border-success-light border-color: var(--color-success-light);
.border-success-lighter border-color: var(--color-success-lighter);
.border-warning-darker border-color: var(--color-warning-darker);
.border-warning-dark border-color: var(--color-warning-dark);
.border-warning border-color: var(--color-warning);
.border-warning-light border-color: var(--color-warning-light);
.border-warning-lighter border-color: var(--color-warning-lighter);
.border-error-darker border-color: var(--color-error-darker);
.border-error-dark border-color: var(--color-error-dark);
.border-error border-color: var(--color-error);
.border-error-light border-color: var(--color-error-light);
.border-error-lighter border-color: var(--color-error-lighter);
.border-white border-color: var(--color-white);
.border-black border-color: var(--color-black);

If you use a border utility class, you can modify the border opacity using one of the following classes:

Class Description
.border-opacity-0 border opacity 0%
.border-opacity-10% border opacity 10%
.border-opacity-20% border opacity 20%
.border-opacity-30% border opacity 30%
.border-opacity-40% border opacity 40%
.border-opacity-50% border opacity 50%
.border-opacity-60% border opacity 60%
.border-opacity-70% border opacity 70%
.border-opacity-80% border opacity 80%
.border-opacity-90% border opacity 90%

Usage example:

<div class="border border-2 border-opacity-70%"> <!-- content --> </div> 

How to create custom border opacity classes:

.border-opacity-075\% {
  --border-o: 0.075;
}

.border-opacity-15\% {
  --border-o: 0.15;
}

⚠️ The border opacity utility classes are based on CSS variables and work only in modern browsers.

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);
.radius-50% border-radius: 50%;
.radius-full border-radius: 50em;
.radius-top-left-0 border-top-left-radius: 0;
.radius-top-right-0 border-top-right-radius: 0;
.radius-bottom-right-0 border-bottom-right-radius: 0;
.radius-bottom-left-0 border-bottom-left-radius: 0;

Optionally, you can update the default border radius variables in the 📁 custom-style/_shared-styles.scss file:

:root {
  --radius: 0.25em; // border radius base size
  --radius-sm: calc(var(--radius)/2);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius)*2);
}

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);

Optionally, you can update the default shadow variables in the 📁 custom-style/_shared-styles.scss file:

:root {
  --shadow-xs:  0 0.1px 0.3px rgba(0, 0, 0, 0.06),
                0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-sm:  0 0.3px 0.4px rgba(0, 0, 0, 0.025),
                0 0.9px 1.5px rgba(0, 0, 0, 0.05), 
                0 3.5px 6px rgba(0, 0, 0, 0.1);
  --shadow-md:  0 0.9px 1.5px rgba(0, 0, 0, 0.03), 
                0 3.1px 5.5px rgba(0, 0, 0, 0.08), 
                0 14px 25px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014), 
                0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038), 
                0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085), 
                0 30px 42px -1px rgba(0, 0, 0, 0.15);
  --shadow-xl:  0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012), 
                0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035), 
                0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07), 
                0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117), 
                0 46px 60px -6px rgba(0, 0, 0, 0.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-darker color: var(--color-primary-darker);
.color-primary-dark color: var(--color-primary-dark);
.color-primary color: var(--color-primary);
.color-primary-light color: var(--color-primary-light);
.color-primary-lighter color: var(--color-primary-lighter);
.color-accent-darker color: var(--color-accent-darker);
.color-accent-dark color: var(--color-accent-dark);
.color-accent color: var(--color-accent);
.color-accent-light color: var(--color-accent-light);
.color-accent-lighter color: var(--color-accent-lighter);
.color-success-darker color: var(--color-success-darker);
.color-success-dark color: var(--color-success-dark);
.color-success color: var(--color-success);
.color-success-light color: var(--color-success-light);
.color-success-lighter color: var(--color-success-lighter);
.color-warning-darker color: var(--color-warning-darker);
.color-warning-dark color: var(--color-warning-dark);
.color-warning color: var(--color-warning);
.color-warning-light color: var(--color-warning-light);
.color-warning-lighter color: var(--color-warning-lighter);
.color-error-darker color: var(--color-error-darker);
.color-error-dark color: var(--color-error-dark);
.color-error color: var(--color-error);
.color-error-light color: var(--color-error-light);
.color-error-lighter color: var(--color-error-lighter);
.color-white color: var(--color-white);
.color-black color: var(--color-black);

If you use a color utility class, you can modify the color opacity using one of the following classes:

Class Description
.color-opacity-0 color opacity 0%
.color-opacity-10% color opacity 10%
.color-opacity-20% color opacity 20%
.color-opacity-30% color opacity 30%
.color-opacity-40% color opacity 40%
.color-opacity-50% color opacity 50%
.color-opacity-60% color opacity 60%
.color-opacity-70% color opacity 70%
.color-opacity-80% color opacity 80%
.color-opacity-90% color opacity 90%

Usage example:

<p class="color-primary color-opacity-50%">Lorem ipsum dolor.</p>

How to create custom color opacity classes:

.color-opacity-075\% {
  --color-o: 0.075;
}

.color-opacity-15\% {
  --color-o: 0.15;
}

⚠️ The color-opacity utility classes are based on CSS variables and work only in modern browsers.

Cursor #

Cursor utility classes:

Class Description
.cursor-pointer cursor: pointer;
.cursor-default cursor: default;

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).

Example:

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

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;

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

Example:

Flex Items #

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

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

Example:

Class Description
[email protected] flex-grow: 0; if viewport >= breakpoint 'sm'
[email protected] flex-grow: 1; if viewport >= breakpoint 'sm'
[email protected] flex-shrink: 0; if viewport >= breakpoint 'sm'
[email protected] flex-shrink: 1; if viewport >= breakpoint 'sm'

Flex gap #

Set a gap among flex items using one of the .gap-{size} classes. Use the .gap-{size}@{breakpoint} variations to modify the gap at a specific breakpoint (e.g., [email protected]).

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

Example:

Float #

Float utility classes:

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

Height #

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-0 height: 0;
.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;
.height-auto height: auto;

Optionally, you can update the default height variables by adding your own in the 📁 custom-style/_util.scss file:

:root {
  // size - scale used to set width/height values 
  --size-xxxxs: 0.25rem; // ~4px
  --size-xxxs:  0.5rem;  // ~8px
  --size-xxs:   0.75rem; // ~12px
  --size-xs:    1rem;    // ~16px
  --size-sm:    1.5rem;  // ~24px
  --size-md:    2rem;    // ~32px
  --size-lg:    3rem;    // ~48px
  --size-xl:    4rem;    // ~64px
  --size-xxl:   6rem;    // ~96px
  --size-xxxl:  8rem;    // ~128px
  --size-xxxxl: 16rem;   // ~256px
}

Justify Content #

justify-content utility classes:

Class Description
.justify-start justify-content: flex-start;
.justify-end justify-content: flex-end;
.justify-center justify-content: center;
.justify-between justify-content: space-between;

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

Margin #

Margin utility classes (based on the spacing variables):

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;
.margin-0 margin: 0;

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);

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

Example:

<div class="margin-md [email protected]"><!-- content --></div>

⚠️ The margin responsive modifiers work only in modern browsers.

Max-height #

Man-height utility classes:

Class Description
.max-height-100% max-height: 100%;
.max-height-100vh max-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 var(--max-width-xxxxs)
.max-width-xxxs set max-width equal to var(--max-width-xxxs)
.max-width-xxs set max-width equal to var(--max-width-xxs)
.max-width-xs set max-width equal to var(--max-width-xs)
.max-width-sm set max-width equal to var(--max-width-sm)
.max-width-md set max-width equal to var(--max-width-md)
.max-width-lg set max-width equal to var(--max-width-lg)
.max-width-xl set max-width equal to var(--max-width-xl)
.max-width-xxl set max-width equal to var(--max-width-xxl)
.max-width-xxxl set max-width equal to var(--max-width-xxxl)
.max-width-xxxxl set max-width equal to var(--max-width-xxxxl)
.max-width-100% set max-width equal to 100%

Optionally, you can update the default max-width variables by adding your own in the 📁 custom-style/_util.scss file:

:root {
  --max-width-xxxxs: 20rem;  // ~320px
  --max-width-xxxs:  26rem;  // ~416px
  --max-width-xxs:   32rem;  // ~512px
  --max-width-xs:    38rem;  // ~608px
  --max-width-sm:    48rem;  // ~768px
  --max-width-md:    64rem;  // ~1024px
  --max-width-lg:    80rem;  // ~1280px
  --max-width-xl:    90rem;  // ~1440px
  --max-width-xxl:   100rem; // ~1600px
  --max-width-xxxl:  120rem; // ~1920px
  --max-width-xxxxl: 150rem; // ~2400px
}

If you want to set the max-width equal to the current breakpoint, use one of the .max-width-adaptive-{size} classes (example):

Class Description
.max-width-adaptive-sm set max-width equal to 512px by default, and 768px at breakpoint sm
.max-width-adaptive-md set max-width equal to 512px by default, 768px at breakpoint sm, and 1024px at breakpoint md
.max-width-adaptive-lg set max-width equal to 512px by default, 768px at breakpoint sm, 1024px at breakpoint md, and 1280px at breakpoint lg
.max-width-adaptive-xl set max-width equal to 512px by default, 768px at breakpoint sm, 1024px at breakpoint md, 1280px at breakpoint lg, and 1440px at breakpoint xl

Media Wrapper #

Set the aspect ratio of an element by adding the .media-wrapper class to its parent (e.g., use this class to make an iframe responsive - example):

Class Description
.media-wrapper set 16:9 ratio
.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).

Alternatively, you can create an _util.scss file inside the /custom-style folder, and add your custom ratios. Here's an example:

.media-wrapper--4\:5 { 
  padding-bottom: 125%; // calc(5/4*100)
}

Min-height #

Min-height utility classes:

Class Description
.min-height-100% min-height: 100%;
.min-height-100vh min-height: 100vh;

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%
.min-width-100vw min-width: 100vw

Mix-blend-mode #

Mix-blend-mode utility classes:

Class Description
.isolate isolation: isolate;
.blend-multiply mix-blend-mode: multiply;
.blend-overlay mix-blend-mode: overlay;

Object Fit #

Object fit utility classes:

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

Opacity #

Opacity utility classes:

Class Description
.opacity-0 opacity: 0;
.opacity-10% opacity: 0.1;
.opacity-20% opacity: 0.2;
.opacity-30% opacity: 0.3;
.opacity-40% opacity: 0.4;
.opacity-50% opacity: 0.5;
.opacity-60% opacity: 0.6;
.opacity-70% opacity: 0.7;
.opacity-80% opacity: 0.8;
.opacity-90% opacity: 0.9;

Order #

Order utility classes:

Class Description
.order-1 order: 1;
.order-2 order: 2;
.order-3 order: 3;

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

Overflow #

Overflow utility classes:

Class Description
.overflow-hidden overflow: hidden;
.overflow-auto overflow: auto;
.momentum-scrolling -webkit-overflow-scrolling: touch;
.overscroll-contain overscroll-behavior: contain;

Padding #

Padding utility classes (based on the spacing variables):

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);
.padding-0 padding: 0;

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);

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

Example:

<div class="[email protected]"><!-- content --></div>

⚠️ The padding responsive modifiers work only in modern browsers.

Pointer Events #

Pointer-events utility classes:

Class Description
.pointer-events-auto pointer-events: auto;
.pointer-events-none pointer-events: none;

Position #

Position utility classes:

Class Description
.position-relative position: relative;
.position-absolute position: absolute;
.position-fixed position: fixed;
.position-sticky position: sticky;
.top-0 top: 0;
.bottom-0 bottom: 0;
.left-0 left: 0;
.right-0 right: 0;

Transform#

Transform utility classes:

Class Description
.flip transform: scale(-1);
.flip-x transform: scaleX(-1);
.flip-y transform: scaleY(-1);

Typography #

Typography utility classes.

Font 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-xxxxl font-size: var(--text-xxxxl);

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

Example:

<p class="text-lg [email protected]"><!-- content --></p>

⚠️ The font-size responsive modifiers work only in modern browsers.

Font weight #

Class Description
.font-light font-weight: 300;
.font-normal font-weight: 400;
.font-medium font-weight: 500;
.font-semibold font-weight: 600;
.font-bold font-weight: 700;

Font family #

Class Description
.font-primary font-family: var(--font-primary);

If you're using the Typography editor, it'll automatically generate utility classes for additional font families. 

Font style #

Class Description
.font-italic font-style: italic;

Text align #

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

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

Example:

Text Transform #

Class Description
.text-uppercase text-transform: uppercase;
.text-capitalize text-transform: capitalize;

Letter Spacing #

Class Description
.letter-spacing-sm letter-spacing: -0.05em;
.letter-spacing-md letter-spacing: 0.05em;
.letter-spacing-lg letter-spacing: 0.1em;

Text Decoration #

Class Description
.text-line-through text-decoration: line-through;
.text-underline text-decoration: underline;
.text-decoration-none text-decoration: none;

Line Height #

Line-height utility classes:

Class Description
.line-height-xs line-height: 1.1;
.line-height-sm line-height: 1.2;
.line-height-md line-height: 1.4;
.line-height-lg line-height: 1.58;
.line-height-xl line-height: 1.72;
.line-height-body line-height: var(--body-line-height);
.line-height-heading line-height: var(--heading-line-height);
.line-height-normal line-height: normal;
.line-height-1 line-height: 1;

When you use a line-height utility class on the .text-component:

Class Description
.line-height-xs --heading-line-height: 1; --body-line-height: 1.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;

Vertical Spacing #

Modify the vertical spacing (margins top/bottom) of the .text-component class:

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;

Misc #

Class Description
.link apply same style of link elements
.text-truncate truncate text if it exceeds its parent (example)
.text-replace replace text with background image
.font-smooth -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

User Select #

User select utility classes:

Class Description
.user-select-none user-select: none;
.user-select-all user-select: all;

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;

Visibility #

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

Class Description
.is-visible display an element
.is-hidden hide an element
.no-js:is-hidden hide an element if JavaScript is disabled
[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'

White Space #

white-space utility classes:

Class Description
.ws-nowrap white-space: nowrap;

Width #

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-0 width: 0;
.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;
.width-auto width: auto;

Optionally, you can update the default width variables by adding your own in the 📁 custom-style/_util.scss file:

:root {
  // size - scale used to set width/height values 
  --size-xxxxs: 0.25rem; // ~4px
  --size-xxxs:  0.5rem;  // ~8px
  --size-xxs:   0.75rem; // ~12px
  --size-xs:    1rem;    // ~16px
  --size-sm:    1.5rem;  // ~24px
  --size-md:    2rem;    // ~32px
  --size-lg:    3rem;    // ~48px
  --size-xl:    4rem;    // ~64px
  --size-xxl:   6rem;    // ~96px
  --size-xxxl:  8rem;    // ~128px
  --size-xxxxl: 16rem;   // ~256px
}

Z-Index #

z-index utility classes:

Class Description
.z-index-1 z-index: 1;
.z-index-2 z-index: 2;
.z-index-3 z-index: 3;
.z-index-header z-index: var(--zindex-header);
.z-index-popover z-index: var(--zindex-popover);
.z-index-fixed-element z-index: var(--zindex-fixed-element);
.z-index-overlay z-index: var(--zindex-overlay);

Optionally, you can overwrite the default z-index variables and set your own in the 📁 custom-style folder (e.g., you can create a _z-index.scss file to store them):

:root {
  --zindex-header: 3; // e.g., main header
  --zindex-popover: 5; // e.g., tooltips and dropdown
  --zindex-fixed-element: 10; // e.g., 'back to top' button
  --zindex-overlay: 15; // e.g., modals and dialogs
}

✅ Project duplicated

✅ Project created

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