Vrembemv4.0.0

Menu

Menu

On this page

Back to top
On this page

Utility

Atomic classes that specialize in setting single style properties.

npm install @vrembem/utility
Copied!
SCSS
@use "@vrembem/utility";
Copied!

Options

Utility comes with the following Sass configuration options that can be set using either the config module or Sass with clause methods.

SCSS
Unlock scroll
@use "@vrembem/utility" with (
  $config: (
    // Controls whether module styles are output. This can be overridden on a per 
    // module basis using the `utility-output-exceptions` config option.
    // @type boolean
    "output": true,

    // Modules to exclude from the output rule set in `utility-output`
    // @type list
    "output-exceptions": (),

    // A map containing module names as keys and their preferred class selectors
    // @type map
    "classes": (),

    // A prefix to apply to utility class selectors. Provided value is 
    // automatically suffixed with a "-" character when applied.
    // @type string
    "prefix": "",

    // Whether or not utility styles should be output with the !important flag
    // @type boolean
    "important": false,

    // A map of border-radius utilities to output
    // @type map
    "border-radius": (
      "": tokens.get("border-radius"),
      "lg": tokens.get("border-radius-lg"),
      "circle": tokens.get("border-radius-circle"),
      "square": 0
    ),

    // A list of display value properties to output
    // @type list
    "display": (
      "breakpoints": true,
      "inline": inline,
      "flex": flex,
      "inline-flex": inline-flex,
      "grid": grid,
      "inline-grid": inline-grid,
      "block": block,
      "inline-block": inline-block,
      "none": none
    ),

    // A spacing scale used to output margin, padding, and spacing utilities
    // @type map
    "spacing": (
      "0": 0,
      "xs": tokens.get("spacing"),
      "sm": calc(tokens.get("spacing") * 2),
      "": calc(tokens.get("spacing") * 4),
      "lg": calc(tokens.get("spacing") * 8),
      "xl": calc(tokens.get("spacing") * 12)
    ),

    // A map of gap utilities to output
    // @type map
    "gap": (
      "0": 0,
      "xs": tokens.get("spacing"),
      "sm": tokens.get("spacing-sm"),
      "": tokens.get("spacing-md"),
      "lg": tokens.get("spacing-lg"),
      "xl": tokens.get("spacing-xl")
    ),

    // A map of max-width utilities to output
    // @type map
    "max-width": (
      "none": none,
      "xs": 45rem,
      "sm": 60rem,
      "": 70rem,
      "lg": 80rem,
      "xl": 90rem,
      "full": 100%
    ),

    // A map of font-weight keys and values to output
    // @type map
    "font-weight": (
      "thin": 100,
      "extra-light": 200,
      "light": 300,
      "regular": 400,
      "medium": 500,
      "semi-bold": 600,
      "bold": 700,
      "extra-bold": 800,
      "black": 900,
      "lighter": lighter,
      "bolder": bolder
    ),

    // The range of flex-grow and flex-shrink utilities to output
    // @type number
    "flex-range": 6
  )
);
Copied!

Output

Utility modules each have their own output styles. These are all output by default when the utility package is loaded. There are two ways to control which modules are output using the utility-output and utility-output-exceptions configuration options.

utility-outputboolean

Controls whether module styles are output. Specify exceptions using the utility-output-exceptions config option.

@include config.set("utility-output", false);
Copied!

@defaulttrue

utility-output-exceptionslist

Modules listed in this configuration are exceptions to the value set in utility-output. If utility-output is true, modules listed will not be output. If utility-output is false, modules listed will be output.

@include config.set("utility-output-exceptions", (
  "background", "foreground"
));
Copied!

@default()

Example

Use the utility-output configuration to toggle output for all modules. Add exceptions to the utility-output-exceptions list to override the output option for specific modules.

SCSS
// Import the config module
@use "@vrembem/core/config";

// Disable the output of specific modules
@include config.set("utility-output-exceptions", (
  "gap",
  "margin",
  "padding"
));

// Disable the output of all modules except for "margin" and "padding"
@include config.set((
  "utility-output": false
  "utility-output-exceptions": (
    "margin",
    "padding"
  )
));
Copied!

Basic usage

Once loaded, the utility package provides a number of classes that can be used independently or to supplement other loaded components.

HTML
<!-- Using utility classes independently -->
<div class="padding background-shade border border-radius">
  <p class="text-bold text-align-center">...</p>
</div>

<!-- Using utility classes with other components -->
<div class="grid justify-content-center">
  <div class="grid__item row-full">...</div>
  <div class="grid__item row-auto">...</div>
</div>
Copied!

To customize utility class selectors used by modules, map the module name to your preferred class selector in the utility-classes config option.

utility-classesmap

A map containing module names as keys and their preferred class selectors as values. For example, to use the class .radius instead of .border-radius, set the following value:

@include config.set("utility-classes", (
  "border-radius": "radius"
));
Copied!

@default()

It's also possible to provide a prefix to all utility classes using the utility-prefix config option.

utility-prefixstring

A prefix to apply to utility class selectors. Provided value is automatically suffixed with a "-" character when applied.

@include config.set("utility-prefix", "u");
// Result: .display-none > .u-display-none
Copied!

@default""

Modules

Below is a list of each utility module, their available variants and intended usage. Some modules also have configuration options that can be used to configure their output.

background

Utilities for setting the background-color property of an element. Variants are built from both the core palette as well as the palette-variants configuration options.

ClassStyles
background-black
Copied!
background-color: black;
Copied!
background-white
Copied!
background-color: white;
Copied!
background-transparent
Copied!
background-color: transparent;
Copied!
background
Copied!
background-color: var(--vb-background);
Copied!
background-alt
Copied!
background-color: var(--vb-background-alt);
Copied!
background-shift
Copied!
background-color: var(--vb-background-shift);
Copied!
background-primary
Copied!
background-color: var(--vb-primary);
Copied!
background-primary-auto
Copied!
background-color: var(--vb-primary-background);
Copied!
background-primary-50
Copied!
background-color: var(--vb-primary-50);
Copied!
background-primary-75
Copied!
background-color: var(--vb-primary-75);
Copied!
background-primary-100
Copied!
background-color: var(--vb-primary-100);
Copied!
background-primary-200
Copied!
background-color: var(--vb-primary-200);
Copied!
background-primary-300
Copied!
background-color: var(--vb-primary-300);
Copied!
background-primary-400
Copied!
background-color: var(--vb-primary-400);
Copied!
background-primary-500
Copied!
background-color: var(--vb-primary-500);
Copied!
background-primary-600
Copied!
background-color: var(--vb-primary-600);
Copied!
background-primary-700
Copied!
background-color: var(--vb-primary-700);
Copied!
background-primary-800
Copied!
background-color: var(--vb-primary-800);
Copied!
background-primary-900
Copied!
background-color: var(--vb-primary-900);
Copied!
background-primary-950
Copied!
background-color: var(--vb-primary-950);
Copied!
background-secondary
Copied!
background-color: var(--vb-secondary);
Copied!
background-secondary-auto
Copied!
background-color: var(--vb-secondary-background);
Copied!
background-secondary-50
Copied!
background-color: var(--vb-secondary-50);
Copied!
background-secondary-75
Copied!
background-color: var(--vb-secondary-75);
Copied!
background-secondary-100
Copied!
background-color: var(--vb-secondary-100);
Copied!
background-secondary-200
Copied!
background-color: var(--vb-secondary-200);
Copied!
background-secondary-300
Copied!
background-color: var(--vb-secondary-300);
Copied!
background-secondary-400
Copied!
background-color: var(--vb-secondary-400);
Copied!
background-secondary-500
Copied!
background-color: var(--vb-secondary-500);
Copied!
background-secondary-600
Copied!
background-color: var(--vb-secondary-600);
Copied!
background-secondary-700
Copied!
background-color: var(--vb-secondary-700);
Copied!
background-secondary-800
Copied!
background-color: var(--vb-secondary-800);
Copied!
background-secondary-900
Copied!
background-color: var(--vb-secondary-900);
Copied!
background-secondary-950
Copied!
background-color: var(--vb-secondary-950);
Copied!
background-neutral
Copied!
background-color: var(--vb-neutral);
Copied!
background-neutral-auto
Copied!
background-color: var(--vb-neutral-background);
Copied!
background-neutral-50
Copied!
background-color: var(--vb-neutral-50);
Copied!
background-neutral-75
Copied!
background-color: var(--vb-neutral-75);
Copied!
background-neutral-100
Copied!
background-color: var(--vb-neutral-100);
Copied!
background-neutral-200
Copied!
background-color: var(--vb-neutral-200);
Copied!
background-neutral-300
Copied!
background-color: var(--vb-neutral-300);
Copied!
background-neutral-400
Copied!
background-color: var(--vb-neutral-400);
Copied!
background-neutral-500
Copied!
background-color: var(--vb-neutral-500);
Copied!
background-neutral-600
Copied!
background-color: var(--vb-neutral-600);
Copied!
background-neutral-700
Copied!
background-color: var(--vb-neutral-700);
Copied!
background-neutral-800
Copied!
background-color: var(--vb-neutral-800);
Copied!
background-neutral-900
Copied!
background-color: var(--vb-neutral-900);
Copied!
background-neutral-950
Copied!
background-color: var(--vb-neutral-950);
Copied!
background-important
Copied!
background-color: var(--vb-important);
Copied!
background-important-auto
Copied!
background-color: var(--vb-important-background);
Copied!
background-important-50
Copied!
background-color: var(--vb-important-50);
Copied!
background-important-75
Copied!
background-color: var(--vb-important-75);
Copied!
background-important-100
Copied!
background-color: var(--vb-important-100);
Copied!
background-important-200
Copied!
background-color: var(--vb-important-200);
Copied!
background-important-300
Copied!
background-color: var(--vb-important-300);
Copied!
background-important-400
Copied!
background-color: var(--vb-important-400);
Copied!
background-important-500
Copied!
background-color: var(--vb-important-500);
Copied!
background-important-600
Copied!
background-color: var(--vb-important-600);
Copied!
background-important-700
Copied!
background-color: var(--vb-important-700);
Copied!
background-important-800
Copied!
background-color: var(--vb-important-800);
Copied!
background-important-900
Copied!
background-color: var(--vb-important-900);
Copied!
background-important-950
Copied!
background-color: var(--vb-important-950);
Copied!
HTML
<button class="background-primary ...">Button 1</button>
<button class="background-secondary-100 ...">Button 2</button>
<button class="background-neutral-600 ...">Button 3</button>
Copied!

The background utility module also includes options for setting the background-clip property.

ClassStyles
background-clip-border
Copied!
background-clip: border-box;
Copied!
background-clip-content
Copied!
background-clip: content-box;
Copied!
background-clip-padding
Copied!
background-clip: padding-box;
Copied!

foreground

Utilities for setting the color property of an element. Variants are built from both the core palette as well as the palette-variants configuration options.

ClassStyles
foreground-black
Copied!
color: black;
Copied!
foreground-white
Copied!
color: white;
Copied!
foreground-transparent
Copied!
color: transparent;
Copied!
foreground
Copied!
color: var(--vb-foreground);
Copied!
foreground-strong
Copied!
color: var(--vb-foreground-strong);
Copied!
foreground-subtle
Copied!
color: var(--vb-foreground-subtle);
Copied!
foreground-accent
Copied!
color: var(--vb-foreground-accent);
Copied!
foreground-accent-alt
Copied!
color: var(--vb-foreground-accent-alt);
Copied!
foreground-primary
Copied!
color: var(--vb-primary);
Copied!
foreground-primary-auto
Copied!
color: var(--vb-primary-foreground);
Copied!
foreground-primary-50
Copied!
color: var(--vb-primary-50);
Copied!
foreground-primary-75
Copied!
color: var(--vb-primary-75);
Copied!
foreground-primary-100
Copied!
color: var(--vb-primary-100);
Copied!
foreground-primary-200
Copied!
color: var(--vb-primary-200);
Copied!
foreground-primary-300
Copied!
color: var(--vb-primary-300);
Copied!
foreground-primary-400
Copied!
color: var(--vb-primary-400);
Copied!
foreground-primary-500
Copied!
color: var(--vb-primary-500);
Copied!
foreground-primary-600
Copied!
color: var(--vb-primary-600);
Copied!
foreground-primary-700
Copied!
color: var(--vb-primary-700);
Copied!
foreground-primary-800
Copied!
color: var(--vb-primary-800);
Copied!
foreground-primary-900
Copied!
color: var(--vb-primary-900);
Copied!
foreground-primary-950
Copied!
color: var(--vb-primary-950);
Copied!
foreground-secondary
Copied!
color: var(--vb-secondary);
Copied!
foreground-secondary-auto
Copied!
color: var(--vb-secondary-foreground);
Copied!
foreground-secondary-50
Copied!
color: var(--vb-secondary-50);
Copied!
foreground-secondary-75
Copied!
color: var(--vb-secondary-75);
Copied!
foreground-secondary-100
Copied!
color: var(--vb-secondary-100);
Copied!
foreground-secondary-200
Copied!
color: var(--vb-secondary-200);
Copied!
foreground-secondary-300
Copied!
color: var(--vb-secondary-300);
Copied!
foreground-secondary-400
Copied!
color: var(--vb-secondary-400);
Copied!
foreground-secondary-500
Copied!
color: var(--vb-secondary-500);
Copied!
foreground-secondary-600
Copied!
color: var(--vb-secondary-600);
Copied!
foreground-secondary-700
Copied!
color: var(--vb-secondary-700);
Copied!
foreground-secondary-800
Copied!
color: var(--vb-secondary-800);
Copied!
foreground-secondary-900
Copied!
color: var(--vb-secondary-900);
Copied!
foreground-secondary-950
Copied!
color: var(--vb-secondary-950);
Copied!
foreground-neutral
Copied!
color: var(--vb-neutral);
Copied!
foreground-neutral-auto
Copied!
color: var(--vb-neutral-foreground);
Copied!
foreground-neutral-50
Copied!
color: var(--vb-neutral-50);
Copied!
foreground-neutral-75
Copied!
color: var(--vb-neutral-75);
Copied!
foreground-neutral-100
Copied!
color: var(--vb-neutral-100);
Copied!
foreground-neutral-200
Copied!
color: var(--vb-neutral-200);
Copied!
foreground-neutral-300
Copied!
color: var(--vb-neutral-300);
Copied!
foreground-neutral-400
Copied!
color: var(--vb-neutral-400);
Copied!
foreground-neutral-500
Copied!
color: var(--vb-neutral-500);
Copied!
foreground-neutral-600
Copied!
color: var(--vb-neutral-600);
Copied!
foreground-neutral-700
Copied!
color: var(--vb-neutral-700);
Copied!
foreground-neutral-800
Copied!
color: var(--vb-neutral-800);
Copied!
foreground-neutral-900
Copied!
color: var(--vb-neutral-900);
Copied!
foreground-neutral-950
Copied!
color: var(--vb-neutral-950);
Copied!
foreground-important
Copied!
color: var(--vb-important);
Copied!
foreground-important-auto
Copied!
color: var(--vb-important-foreground);
Copied!
foreground-important-50
Copied!
color: var(--vb-important-50);
Copied!
foreground-important-75
Copied!
color: var(--vb-important-75);
Copied!
foreground-important-100
Copied!
color: var(--vb-important-100);
Copied!
foreground-important-200
Copied!
color: var(--vb-important-200);
Copied!
foreground-important-300
Copied!
color: var(--vb-important-300);
Copied!
foreground-important-400
Copied!
color: var(--vb-important-400);
Copied!
foreground-important-500
Copied!
color: var(--vb-important-500);
Copied!
foreground-important-600
Copied!
color: var(--vb-important-600);
Copied!
foreground-important-700
Copied!
color: var(--vb-important-700);
Copied!
foreground-important-800
Copied!
color: var(--vb-important-800);
Copied!
foreground-important-900
Copied!
color: var(--vb-important-900);
Copied!
foreground-important-950
Copied!
color: var(--vb-important-950);
Copied!
HTML
<button class="foreground-primary ...">Button 1</button>
<button class="foreground-secondary ...">Button 2</button>
<button class="foreground-neutral ...">Button 3</button>
<button class="foreground-important ...">Button 4</button>
Copied!

border

Utilities for setting the border property with optional sides variants of an element. Also includes utilities for setting variants of the border-color and border-style properties.

ClassStyles
border
Copied!
border: var(--vb-border);
Copied!
border-top
Copied!
border-top: var(--vb-border);
Copied!
border-bottom
Copied!
border-bottom: var(--vb-border);
Copied!
border-left
Copied!
border-left: var(--vb-border);
Copied!
border-right
Copied!
border-right: var(--vb-border);
Copied!
border-none
Copied!
border: 0;
Copied!
border-top-none
Copied!
border-top: 0;
Copied!
border-bottom-none
Copied!
border-bottom: 0;
Copied!
border-left-none
Copied!
border-left: 0;
Copied!
border-right-none
Copied!
border-right: 0;
Copied!
border-color-dark
Copied!
border-color: var(--vb-border-color-dark);
Copied!
border-color-darker
Copied!
border-color: var(--vb-border-color-darker);
Copied!
border-color-transparent
Copied!
border-color: transparent;
Copied!
border-color-current
Copied!
border-color: currentcolor;
Copied!
border-style-solid
Copied!
border-style: solid;
Copied!
border-style-dotted
Copied!
border-style: dotted;
Copied!
border-style-dashed
Copied!
border-style: dashed;
Copied!
border-style-double
Copied!
border-style: double;
Copied!
border-style-none
Copied!
border-style: none;
Copied!

border-radius

Utilities for setting the border-radius property of an element with optional corner variants. The value and variants used by the border-radius utility is built from the utility-border-radius configuration option.

ClassStyles
border-radius
Copied!
border-radius: var(--vb-border-radius);
Copied!
border-radius-top-left
Copied!
border-top-left-radius: var(--vb-border-radius);
Copied!
border-radius-top-right
Copied!
border-top-right-radius: var(--vb-border-radius);
Copied!
border-radius-bottom-left
Copied!
border-bottom-left-radius: var(--vb-border-radius);
Copied!
border-radius-bottom-right
Copied!
border-bottom-right-radius: var(--vb-border-radius);
Copied!
border-radius-top
Copied!
border-top-left-radius: var(--vb-border-radius); border-top-right-radius: var(--vb-border-radius);
Copied!
border-radius-bottom
Copied!
border-bottom-left-radius: var(--vb-border-radius); border-bottom-right-radius: var(--vb-border-radius);
Copied!
border-radius-left
Copied!
border-top-left-radius: var(--vb-border-radius); border-bottom-left-radius: var(--vb-border-radius);
Copied!
border-radius-right
Copied!
border-top-right-radius: var(--vb-border-radius); border-bottom-right-radius: var(--vb-border-radius);
Copied!
border-radius-lg
Copied!
border-radius: var(--vb-border-radius-lg);
Copied!
border-radius-lg-top-left
Copied!
border-top-left-radius: var(--vb-border-radius-lg);
Copied!
border-radius-lg-top-right
Copied!
border-top-right-radius: var(--vb-border-radius-lg);
Copied!
border-radius-lg-bottom-left
Copied!
border-bottom-left-radius: var(--vb-border-radius-lg);
Copied!
border-radius-lg-bottom-right
Copied!
border-bottom-right-radius: var(--vb-border-radius-lg);
Copied!
border-radius-lg-top
Copied!
border-top-left-radius: var(--vb-border-radius-lg); border-top-right-radius: var(--vb-border-radius-lg);
Copied!
border-radius-lg-bottom
Copied!
border-bottom-left-radius: var(--vb-border-radius-lg); border-bottom-right-radius: var(--vb-border-radius-lg);
Copied!
border-radius-lg-left
Copied!
border-top-left-radius: var(--vb-border-radius-lg); border-bottom-left-radius: var(--vb-border-radius-lg);
Copied!
border-radius-lg-right
Copied!
border-top-right-radius: var(--vb-border-radius-lg); border-bottom-right-radius: var(--vb-border-radius-lg);
Copied!
border-radius-circle
Copied!
border-radius: var(--vb-border-radius-circle);
Copied!
border-radius-circle-top-left
Copied!
border-top-left-radius: var(--vb-border-radius-circle);
Copied!
border-radius-circle-top-right
Copied!
border-top-right-radius: var(--vb-border-radius-circle);
Copied!
border-radius-circle-bottom-left
Copied!
border-bottom-left-radius: var(--vb-border-radius-circle);
Copied!
border-radius-circle-bottom-right
Copied!
border-bottom-right-radius: var(--vb-border-radius-circle);
Copied!
border-radius-circle-top
Copied!
border-top-left-radius: var(--vb-border-radius-circle); border-top-right-radius: var(--vb-border-radius-circle);
Copied!
border-radius-circle-bottom
Copied!
border-bottom-left-radius: var(--vb-border-radius-circle); border-bottom-right-radius: var(--vb-border-radius-circle);
Copied!
border-radius-circle-left
Copied!
border-top-left-radius: var(--vb-border-radius-circle); border-bottom-left-radius: var(--vb-border-radius-circle);
Copied!
border-radius-circle-right
Copied!
border-top-right-radius: var(--vb-border-radius-circle); border-bottom-right-radius: var(--vb-border-radius-circle);
Copied!
border-radius-square
Copied!
border-radius: var(--vb-border-radius-square);
Copied!
border-radius-square-top-left
Copied!
border-top-left-radius: var(--vb-border-radius-square);
Copied!
border-radius-square-top-right
Copied!
border-top-right-radius: var(--vb-border-radius-square);
Copied!
border-radius-square-bottom-left
Copied!
border-bottom-left-radius: var(--vb-border-radius-square);
Copied!
border-radius-square-bottom-right
Copied!
border-bottom-right-radius: var(--vb-border-radius-square);
Copied!
border-radius-square-top
Copied!
border-top-left-radius: var(--vb-border-radius-square); border-top-right-radius: var(--vb-border-radius-square);
Copied!
border-radius-square-bottom
Copied!
border-bottom-left-radius: var(--vb-border-radius-square); border-bottom-right-radius: var(--vb-border-radius-square);
Copied!
border-radius-square-left
Copied!
border-top-left-radius: var(--vb-border-radius-square); border-bottom-left-radius: var(--vb-border-radius-square);
Copied!
border-radius-square-right
Copied!
border-top-right-radius: var(--vb-border-radius-square); border-bottom-right-radius: var(--vb-border-radius-square);
Copied!

box-shadow

Utilities for setting the box-shadow property on an element with depth variants.

HTML
<div class="box-shadow-outline"></div>
<div class="box-shadow-xs"></div>
<div class="box-shadow-sm"></div>
<div class="box-shadow-md"></div>
<div class="box-shadow-lg"></div>
<div class="box-shadow-xl"></div>
Copied!
ClassStyles
box-shadow-none
Copied!
box-shadow: 0 0 0 0 transparent;
Copied!
box-shadow-outline
Copied!
box-shadow: var(--vb-box-shadow-outline);
Copied!
box-shadow-xs
Copied!
box-shadow: var(--vb-box-shadow-xs);
Copied!
box-shadow-sm
Copied!
box-shadow: var(--vb-box-shadow-sm);
Copied!
box-shadow-md
Copied!
box-shadow: var(--vb-box-shadow-md);
Copied!
box-shadow-lg
Copied!
box-shadow: var(--vb-box-shadow-lg);
Copied!
box-shadow-xl
Copied!
box-shadow: var(--vb-box-shadow-xl);
Copied!

drop-shadow

Utilities for setting the drop-shadow filter on an element with depth variants.

HTML
<div class="drop-shadow-outline"></div>
<div class="drop-shadow-xs"></div>
<div class="drop-shadow-sm"></div>
<div class="drop-shadow-md"></div>
<div class="drop-shadow-lg"></div>
<div class="drop-shadow-xl"></div>
Copied!
ClassStyles
drop-shadow-outline
Copied!
filter: var(--vb-drop-shadow-outline);
Copied!
drop-shadow-xs
Copied!
filter: var(--vb-drop-shadow-xs);
Copied!
drop-shadow-sm
Copied!
filter: var(--vb-drop-shadow-sm);
Copied!
drop-shadow-md
Copied!
filter: var(--vb-drop-shadow-md);
Copied!
drop-shadow-lg
Copied!
filter: var(--vb-drop-shadow-lg);
Copied!
drop-shadow-xl
Copied!
filter: var(--vb-drop-shadow-xl);
Copied!

display

Utilities for setting the display property of an element with optional breakpoint modifiers. Display variants are built using the values set in the utility-display configuration option.

ClassStyles
display-inline
Copied!
display: inline;
Copied!
display-flex
Copied!
display: flex;
Copied!
display-inline-flex
Copied!
display: inline-flex;
Copied!
display-grid
Copied!
display: grid
Copied!
display-inline-grid
Copied!
display: inline-grid
Copied!
display-block
Copied!
display: block
Copied!
display-inline-block
Copied!
display: inline-block
Copied!
display-none
Copied!
display: none
Copied!

Display utilities also come with breakpoint modifiers. These can be used by prefixing a breakpoint key to any of the above listed utilities. Breakpoint modifiers are built from the core breakpoints configuration option.

This is only visible for mobile users

HTML
<div class="display-block md:display-none">
  <p>This is only visible for mobile users</p>
</div>
<div class="display-none md:display-block">
  <p>This is only visible for desktop users</p>
</div>
Copied!

margin

Utilities for setting the margin property of an element. Margin variants are built using the values set in the utility-gap configuration option.

ClassStyles
margin-0
Copied!
margin: 0;
Copied!
margin-xs
Copied!
margin: var(--vb-spacing);
Copied!
margin-sm
Copied!
margin: calc(var(--vb-spacing) * 2);
Copied!
margin
Copied!
margin: calc(var(--vb-spacing) * 4);
Copied!
margin-lg
Copied!
margin: calc(var(--vb-spacing) * 8);
Copied!
margin-xl
Copied!
margin: calc(var(--vb-spacing) * 12);
Copied!
margin-top-0
Copied!
margin-top: 0;
Copied!
margin-top-xs
Copied!
margin-top: var(--vb-spacing);
Copied!
margin-top-sm
Copied!
margin-top: calc(var(--vb-spacing) * 2);
Copied!
margin-top
Copied!
margin-top: calc(var(--vb-spacing) * 4);
Copied!
margin-top-lg
Copied!
margin-top: calc(var(--vb-spacing) * 8);
Copied!
margin-top-xl
Copied!
margin-top: calc(var(--vb-spacing) * 12);
Copied!
margin-bottom-0
Copied!
margin-bottom: 0;
Copied!
margin-bottom-xs
Copied!
margin-bottom: var(--vb-spacing);
Copied!
margin-bottom-sm
Copied!
margin-bottom: calc(var(--vb-spacing) * 2);
Copied!
margin-bottom
Copied!
margin-bottom: calc(var(--vb-spacing) * 4);
Copied!
margin-bottom-lg
Copied!
margin-bottom: calc(var(--vb-spacing) * 8);
Copied!
margin-bottom-xl
Copied!
margin-bottom: calc(var(--vb-spacing) * 12);
Copied!
margin-left-0
Copied!
margin-left: 0;
Copied!
margin-left-xs
Copied!
margin-left: var(--vb-spacing);
Copied!
margin-left-sm
Copied!
margin-left: calc(var(--vb-spacing) * 2);
Copied!
margin-left
Copied!
margin-left: calc(var(--vb-spacing) * 4);
Copied!
margin-left-lg
Copied!
margin-left: calc(var(--vb-spacing) * 8);
Copied!
margin-left-xl
Copied!
margin-left: calc(var(--vb-spacing) * 12);
Copied!
margin-right-0
Copied!
margin-right: 0;
Copied!
margin-right-xs
Copied!
margin-right: var(--vb-spacing);
Copied!
margin-right-sm
Copied!
margin-right: calc(var(--vb-spacing) * 2);
Copied!
margin-right
Copied!
margin-right: calc(var(--vb-spacing) * 4);
Copied!
margin-right-lg
Copied!
margin-right: calc(var(--vb-spacing) * 8);
Copied!
margin-right-xl
Copied!
margin-right: calc(var(--vb-spacing) * 12);
Copied!
margin-x-0
Copied!
margin-left: 0; margin-right: 0;
Copied!
margin-x-xs
Copied!
margin-left: var(--vb-spacing); margin-right: var(--vb-spacing);
Copied!
margin-x-sm
Copied!
margin-left: calc(var(--vb-spacing) * 2); margin-right: calc(var(--vb-spacing) * 2);
Copied!
margin-x
Copied!
margin-left: calc(var(--vb-spacing) * 4); margin-right: calc(var(--vb-spacing) * 4);
Copied!
margin-x-lg
Copied!
margin-left: calc(var(--vb-spacing) * 8); margin-right: calc(var(--vb-spacing) * 8);
Copied!
margin-x-xl
Copied!
margin-left: calc(var(--vb-spacing) * 12); margin-right: calc(var(--vb-spacing) * 12);
Copied!
margin-y-0
Copied!
margin-bottom: 0; margin-top: 0;
Copied!
margin-y-xs
Copied!
margin-bottom: var(--vb-spacing); margin-top: var(--vb-spacing);
Copied!
margin-y-sm
Copied!
margin-bottom: calc(var(--vb-spacing) * 2); margin-top: calc(var(--vb-spacing) * 2);
Copied!
margin-y
Copied!
margin-bottom: calc(var(--vb-spacing) * 4); margin-top: calc(var(--vb-spacing) * 4);
Copied!
margin-y-lg
Copied!
margin-bottom: calc(var(--vb-spacing) * 8); margin-top: calc(var(--vb-spacing) * 8);
Copied!
margin-y-xl
Copied!
margin-bottom: calc(var(--vb-spacing) * 12); margin-top: calc(var(--vb-spacing) * 12);
Copied!
margin-auto
Copied!
margin: auto;
Copied!
margin-top-auto
Copied!
margin-top: auto;
Copied!
margin-bottom-auto
Copied!
margin-bottom: auto;
Copied!
margin-left-auto
Copied!
margin-left: auto;
Copied!
margin-right-auto
Copied!
margin-right: auto;
Copied!
margin-x-auto
Copied!
margin-left: auto; margin-right: auto;
Copied!
margin-y-auto
Copied!
margin-bottom: auto; margin-top: auto;
Copied!

padding

Utilities for setting the padding property of an element. Padding variants are built using the values set in the utility-gap configuration option.

ClassStyles
padding-0
Copied!
padding: 0;
Copied!
padding-xs
Copied!
padding: var(--vb-spacing);
Copied!
padding-sm
Copied!
padding: calc(var(--vb-spacing) * 2);
Copied!
padding
Copied!
padding: calc(var(--vb-spacing) * 4);
Copied!
padding-lg
Copied!
padding: calc(var(--vb-spacing) * 8);
Copied!
padding-xl
Copied!
padding: calc(var(--vb-spacing) * 12);
Copied!
padding-top-0
Copied!
padding-top: 0;
Copied!
padding-top-xs
Copied!
padding-top: var(--vb-spacing);
Copied!
padding-top-sm
Copied!
padding-top: calc(var(--vb-spacing) * 2);
Copied!
padding-top
Copied!
padding-top: calc(var(--vb-spacing) * 4);
Copied!
padding-top-lg
Copied!
padding-top: calc(var(--vb-spacing) * 8);
Copied!
padding-top-xl
Copied!
padding-top: calc(var(--vb-spacing) * 12);
Copied!
padding-bottom-0
Copied!
padding-bottom: 0;
Copied!
padding-bottom-xs
Copied!
padding-bottom: var(--vb-spacing);
Copied!
padding-bottom-sm
Copied!
padding-bottom: calc(var(--vb-spacing) * 2);
Copied!
padding-bottom
Copied!
padding-bottom: calc(var(--vb-spacing) * 4);
Copied!
padding-bottom-lg
Copied!
padding-bottom: calc(var(--vb-spacing) * 8);
Copied!
padding-bottom-xl
Copied!
padding-bottom: calc(var(--vb-spacing) * 12);
Copied!
padding-left-0
Copied!
padding-left: 0;
Copied!
padding-left-xs
Copied!
padding-left: var(--vb-spacing);
Copied!
padding-left-sm
Copied!
padding-left: calc(var(--vb-spacing) * 2);
Copied!
padding-left
Copied!
padding-left: calc(var(--vb-spacing) * 4);
Copied!
padding-left-lg
Copied!
padding-left: calc(var(--vb-spacing) * 8);
Copied!
padding-left-xl
Copied!
padding-left: calc(var(--vb-spacing) * 12);
Copied!
padding-right-0
Copied!
padding-right: 0;
Copied!
padding-right-xs
Copied!
padding-right: var(--vb-spacing);
Copied!
padding-right-sm
Copied!
padding-right: calc(var(--vb-spacing) * 2);
Copied!
padding-right
Copied!
padding-right: calc(var(--vb-spacing) * 4);
Copied!
padding-right-lg
Copied!
padding-right: calc(var(--vb-spacing) * 8);
Copied!
padding-right-xl
Copied!
padding-right: calc(var(--vb-spacing) * 12);
Copied!
padding-x-0
Copied!
padding-left: 0; padding-right: 0;
Copied!
padding-x-xs
Copied!
padding-left: var(--vb-spacing); padding-right: var(--vb-spacing);
Copied!
padding-x-sm
Copied!
padding-left: calc(var(--vb-spacing) * 2); padding-right: calc(var(--vb-spacing) * 2);
Copied!
padding-x
Copied!
padding-left: calc(var(--vb-spacing) * 4); padding-right: calc(var(--vb-spacing) * 4);
Copied!
padding-x-lg
Copied!
padding-left: calc(var(--vb-spacing) * 8); padding-right: calc(var(--vb-spacing) * 8);
Copied!
padding-x-xl
Copied!
padding-left: calc(var(--vb-spacing) * 12); padding-right: calc(var(--vb-spacing) * 12);
Copied!
padding-y-0
Copied!
padding-bottom: 0; padding-top: 0;
Copied!
padding-y-xs
Copied!
padding-bottom: var(--vb-spacing); padding-top: var(--vb-spacing);
Copied!
padding-y-sm
Copied!
padding-bottom: calc(var(--vb-spacing) * 2); padding-top: calc(var(--vb-spacing) * 2);
Copied!
padding-y
Copied!
padding-bottom: calc(var(--vb-spacing) * 4); padding-top: calc(var(--vb-spacing) * 4);
Copied!
padding-y-lg
Copied!
padding-bottom: calc(var(--vb-spacing) * 8); padding-top: calc(var(--vb-spacing) * 8);
Copied!
padding-y-xl
Copied!
padding-bottom: calc(var(--vb-spacing) * 12); padding-top: calc(var(--vb-spacing) * 12);
Copied!

spacing

Utilities for setting the margin-top property of all direct children of an element. Spacing variants are built using the values set in the utility-gap configuration option.

ClassStyles
spacing-0
Copied!
margin-top: 0;
Copied!
spacing-xs
Copied!
margin-top: var(--vb-spacing);
Copied!
spacing-sm
Copied!
margin-top: calc(var(--vb-spacing) * 2);
Copied!
spacing
Copied!
margin-top: calc(var(--vb-spacing) * 4);
Copied!
spacing-lg
Copied!
margin-top: calc(var(--vb-spacing) * 8);
Copied!
spacing-xl
Copied!
margin-top: calc(var(--vb-spacing) * 12);
Copied!

gap

Utilities for setting the gap property of an element. Gap variants are built using the values set in the utility-gap configuration option.

ClassStyles
gap-0
Copied!
gap: 0;
Copied!
gap-xs
Copied!
gap: var(--vb-spacing);
Copied!
gap-sm
Copied!
gap: var(--vb-spacing-sm);
Copied!
gap
Copied!
gap: var(--vb-spacing-md);
Copied!
gap-lg
Copied!
gap: var(--vb-spacing-lg);
Copied!
gap-xl
Copied!
gap: var(--vb-spacing-xl);
Copied!
gap-x-0
Copied!
column-gap: 0;
Copied!
gap-x-xs
Copied!
column-gap: var(--vb-spacing);
Copied!
gap-x-sm
Copied!
column-gap: var(--vb-spacing-sm);
Copied!
gap-x
Copied!
column-gap: var(--vb-spacing-md);
Copied!
gap-x-lg
Copied!
column-gap: var(--vb-spacing-lg);
Copied!
gap-x-xl
Copied!
column-gap: var(--vb-spacing-xl);
Copied!
gap-y-0
Copied!
row-gap: 0;
Copied!
gap-y-xs
Copied!
row-gap: var(--vb-spacing);
Copied!
gap-y-sm
Copied!
row-gap: var(--vb-spacing-sm);
Copied!
gap-y
Copied!
row-gap: var(--vb-spacing-md);
Copied!
gap-y-lg
Copied!
row-gap: var(--vb-spacing-lg);
Copied!
gap-y-xl
Copied!
row-gap: var(--vb-spacing-xl);
Copied!

justify

Utilities for setting the justify-content, justify-items and justify-self properties of an element.

ClassStyles
justify-content-start
Copied!
justify-content: start;
Copied!
justify-content-center
Copied!
justify-content: center;
Copied!
justify-content-end
Copied!
justify-content: end;
Copied!
justify-content-between
Copied!
justify-content: space-between;
Copied!
justify-content-around
Copied!
justify-content: space-around;
Copied!
justify-content-evenly
Copied!
justify-content: space-evenly;
Copied!
justify-content-stretch
Copied!
justify-content: stretch;
Copied!
justify-items-start
Copied!
justify-items: start;
Copied!
justify-items-center
Copied!
justify-items: center;
Copied!
justify-items-end
Copied!
justify-items: end;
Copied!
justify-items-stretch
Copied!
justify-items: stretch;
Copied!
justify-self-start
Copied!
justify-self: start;
Copied!
justify-self-center
Copied!
justify-self: center;
Copied!
justify-self-end
Copied!
justify-self: end;
Copied!
justify-self-stretch
Copied!
justify-self: stretch;
Copied!

align

Utilities for setting the align-content, align-items and align-self properties of an element.

ClassStyles
align-content-start
Copied!
align-content: start;
Copied!
align-content-center
Copied!
align-content: center;
Copied!
align-content-end
Copied!
align-content: end;
Copied!
align-content-between
Copied!
align-content: space-between;
Copied!
align-content-around
Copied!
align-content: space-around;
Copied!
align-content-evenly
Copied!
align-content: space-evenly;
Copied!
align-content-stretch
Copied!
align-content: stretch;
Copied!
align-items-start
Copied!
align-items: start;
Copied!
align-items-center
Copied!
align-items: center;
Copied!
align-items-end
Copied!
align-items: end;
Copied!
align-items-stretch
Copied!
align-items: stretch;
Copied!
align-self-start
Copied!
align-self: start;
Copied!
align-self-center
Copied!
align-self: center;
Copied!
align-self-end
Copied!
align-self: end;
Copied!
align-self-stretch
Copied!
align-self: stretch;
Copied!

place

Utilities for setting the place-content, place-items and place-self properties of an element.

ClassStyles
place-content-start
Copied!
place-content: start;
Copied!
place-content-center
Copied!
place-content: center;
Copied!
place-content-end
Copied!
place-content: end;
Copied!
place-content-between
Copied!
place-content: space-between;
Copied!
place-content-around
Copied!
place-content: space-around;
Copied!
place-content-evenly
Copied!
place-content: space-evenly;
Copied!
place-content-stretch
Copied!
place-content: stretch;
Copied!
place-items-start
Copied!
place-items: start;
Copied!
place-items-center
Copied!
place-items: center;
Copied!
place-items-end
Copied!
place-items: end;
Copied!
place-items-stretch
Copied!
place-items: stretch;
Copied!
place-self-start
Copied!
place-self: start;
Copied!
place-self-center
Copied!
place-self: center;
Copied!
place-self-end
Copied!
place-self: end;
Copied!
place-self-stretch
Copied!
place-self: stretch;
Copied!

order

Utilities for setting the order property of an element.

ClassStyles
order-first
Copied!
order: -99;
Copied!
order-last
Copied!
order: 99;
Copied!
order-0
Copied!
order: 0;
Copied!
order-1
Copied!
order: 1;
Copied!
order-2
Copied!
order: 2;
Copied!
order-3
Copied!
order: 3;
Copied!
order-4
Copied!
order: 4;
Copied!
order-5
Copied!
order: 5;
Copied!
order-6
Copied!
order: 6;
Copied!

flex

Utilities for setting the flex specific properties of an element. These pair well with the flex component to provide more granular control of flex items.

ClassStyles
flex-nowrap
Copied!
flex-wrap: nowrap;
Copied!
flex-wrap
Copied!
flex-wrap: wrap;
Copied!
flex-wrap-reverse
Copied!
flex-wrap: wrap-reverse;
Copied!
flex-direction-row
Copied!
flex-direction: row;
Copied!
flex-direction-row-reverse
Copied!
flex-direction: row-reverse;
Copied!
flex-direction-col
Copied!
flex-direction: column;
Copied!
flex-direction-col-reverse
Copied!
flex-direction: column-reverse;
Copied!
flex-grow
Copied!
flex-grow: 1;
Copied!
flex-grow-0
Copied!
flex-grow: 0;
Copied!
flex-grow-1
Copied!
flex-grow: 1;
Copied!
flex-grow-2
Copied!
flex-grow: 2;
Copied!
flex-grow-3
Copied!
flex-grow: 3;
Copied!
flex-grow-4
Copied!
flex-grow: 4;
Copied!
flex-grow-5
Copied!
flex-grow: 5;
Copied!
flex-grow-6
Copied!
flex-grow: 6;
Copied!
flex-shrink
Copied!
flex-shrink: 1;
Copied!
flex-shrink-0
Copied!
flex-shrink: 0;
Copied!
flex-shrink-1
Copied!
flex-shrink: 1;
Copied!
flex-shrink-2
Copied!
flex-shrink: 2;
Copied!
flex-shrink-3
Copied!
flex-shrink: 3;
Copied!
flex-shrink-4
Copied!
flex-shrink: 4;
Copied!
flex-shrink-5
Copied!
flex-shrink: 5;
Copied!
flex-shrink-6
Copied!
flex-shrink: 6;
Copied!
flex-basis-0
Copied!
flex-basis: 0;
Copied!
flex-basis-auto
Copied!
flex-basis: auto;
Copied!
flex-basis-100
Copied!
flex-basis: 100;
Copied!

flex-grow-[value]

Utilities for controlling the flex-grow property. These utilities are generated using the value set in utility-flex-range config options map.

1. One
2. Two
3. Three
HTML
<div class="flex">
  <div class="flex-grow-3">...</div>
  <div>...</div>
  <div>...</div>
</div>
Copied!

flex-shrink-[value]

Utilities for controlling the flex-shrink property. These utilities are generated using the value set in utility-flex-range config options map.

1. a b c d e f g h i j k l m n o p q r s t u v w x y z
2. a b c d e f g h i j k l m n o p q r s t u v w x y z
HTML
<div class="flex flex-nowrap">
  <div class="flex-shrink-3">...</div>
  <div>...</div>
</div>
Copied!

flex-basis-[value]

Utilities for controlling the flex-basis property which sets the initial main size of a flex item.

1. One
2. Two
3. Three
HTML
<div class="flex">
  <div class="flex-basis-auto">...</div>
  <div>...</div>
  <div>...</div>
</div>
Copied!

position

Utilities for setting the position property of an element.

ClassStyles
position-absolute
Copied!
position: absolute;
Copied!
position-fixed
Copied!
position: fixed;
Copied!
position-relative
Copied!
position: relative;
Copied!
position-static
Copied!
position: static;
Copied!
position-sticky
Copied!
position: sticky;
Copied!

overflow

Utilities for setting the overflow, overflow-x and overflow-y properties of an element.

ClassStyles
overflow-visible
Copied!
overflow: visible;
Copied!
overflow-x-visible
Copied!
overflow-x: visible;
Copied!
overflow-y-visible
Copied!
overflow-y: visible;
Copied!
overflow-hidden
Copied!
overflow: hidden;
Copied!
overflow-x-hidden
Copied!
overflow-x: hidden;
Copied!
overflow-y-hidden
Copied!
overflow-y: hidden;
Copied!
overflow-clip
Copied!
overflow: clip;
Copied!
overflow-x-clip
Copied!
overflow-x: clip;
Copied!
overflow-y-clip
Copied!
overflow-y: clip;
Copied!
overflow-scroll
Copied!
overflow: scroll;
Copied!
overflow-x-scroll
Copied!
overflow-x: scroll;
Copied!
overflow-y-scroll
Copied!
overflow-y: scroll;
Copied!
overflow-auto
Copied!
overflow: auto;
Copied!
overflow-x-auto
Copied!
overflow-x: auto;
Copied!
overflow-y-auto
Copied!
overflow-y: auto;
Copied!

max-width

Utilities for setting the max-width property of an element. Max-width variants are built using the values set in the utility-max-width configuration option.

ClassStyles
max-width-none
Copied!
max-width: none;
Copied!
max-width-xs
Copied!
max-width: 45rem;
Copied!
max-width-sm
Copied!
max-width: 60rem;
Copied!
max-width
Copied!
max-width: 70rem;
Copied!
max-width-lg
Copied!
max-width: 80rem;
Copied!
max-width-xl
Copied!
max-width: 90rem;
Copied!
max-width-100
Copied!
max-width: 100%;
Copied!

font

Utilities for setting various font based properties of an element. This includes font-family, font-size, line-height, font-weight and font-style. Font-weight variants are built using the values set in the utility-font-weight configuration option.

ClassStyles
font-family-sans
Copied!
font-family: var(--vb-font-family-sans);
Copied!
font-family-serif
Copied!
font-family: var(--vb-font-family-serif);
Copied!
font-family-mono
Copied!
font-family: var(--vb-font-family-mono);
Copied!
font-size-base
Copied!
font-size: 1rem;
Copied!
font-size-sm
Copied!
font-size: var(--vb-font-size-sm);
Copied!
font-size-lg
Copied!
font-size: var(--vb-font-size-lg);
Copied!
font-line-height
Copied!
line-height: var(--vb-line-height);
Copied!
font-weight-thin
Copied!
font-weight: 100;
Copied!
font-weight-extra-light
Copied!
font-weight: 200;
Copied!
font-weight-light
Copied!
font-weight: 300;
Copied!
font-weight-regular
Copied!
font-weight: 400;
Copied!
font-weight-medium
Copied!
font-weight: 500;
Copied!
font-weight-semi-bold
Copied!
font-weight: 600;
Copied!
font-weight-bold
Copied!
font-weight: 700;
Copied!
font-weight-extra-bold
Copied!
font-weight: 800;
Copied!
font-weight-black
Copied!
font-weight: 900;
Copied!
font-weight-lighter
Copied!
font-weight: lighter;
Copied!
font-weight-bolder
Copied!
font-weight: bolder;
Copied!
font-style-normal
Copied!
font-style: normal;
Copied!
font-style-italic
Copied!
font-style: italic;
Copied!

text

Utilities for setting various text properties of an element. This includes things like text-transform, text-align, text-decoration, and text-wrap.

ClassStyles
text-capitalize
Copied!
text-transform: capitalize;
Copied!
text-lowercase
Copied!
text-transform: lowercase;
Copied!
text-uppercase
Copied!
text-transform: uppercase;
Copied!
text-align-left
Copied!
text-align: left;
Copied!
text-align-center
Copied!
text-align: center;
Copied!
text-align-right
Copied!
text-align: right;
Copied!
text-strike
Copied!
text-decoration: line-through;
Copied!
text-underline
Copied!
text-decoration: underline;
Copied!
text-underline-dotted
Copied!
text-decoration: underline; text-decoration-style: dotted;
Copied!
text-underline-dashed
Copied!
text-decoration: underline; text-decoration-style: dashed;
Copied!
text-wrap
Copied!
text-wrap: normal;
Copied!
text-nowrap
Copied!
text-wrap: nowrap;
Copied!
text-wrap-balance
Copied!
text-wrap: balance;
Copied!
text-wrap-pretty
Copied!
text-wrap: pretty;
Copied!
text-wrap-stable
Copied!
text-wrap: stable;
Copied!
text-overflow-ellipsis
Copied!
overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap;
Copied!

transition

Utilities for setting transition and transition-duration properties of an element.

ClassStyles
transition
Copied!
transition: all var(--vb-transition-duration) var(--vb-transition-timing-function);
Copied!
transition-none
Copied!
transition: none;
Copied!
transition-duration-short
Copied!
transition-duration: var(--vb-transition-duration-short);
Copied!
transition-duration-long
Copied!
transition-duration: var(--vb-transition-duration-long);
Copied!
Previous
Content