Level

A simple flexbox based layout component.

npm version

Source Code

npm install @vrembem/level

@use "@vrembem/level";

Level

The most basic implementation of the level component consists of the level container with any number of children. Layout styles are applied to the direct children of the level component using the > * selector.

...
...
...
...
...
...
...
...
...
...
<div class="level">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Level is a flex based layout component. That means you can use the @vremben/utility package—specifically the flex module—to further customize your layout.

level_gap_[key]

Adjusts the gap spacing based on the provided key. Gap key output is based on the values in $gap-map variable map.

...
...
...
...
...
...
...
...
...
...
<div class="level level_gap_xs">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Available Variations

  • level_gap_none
  • level_gap_xs
  • level_gap_sm
  • level_gap_md
  • level_gap_lg
  • level_gap_xl

level_gap-x_[key]

Adjusts the horizontal gap spacing based on the provided key. Gap key output is based on the values in $gap-map variable map.

...
...
...
...
...
...
...
...
...
...
<div class="level level_gap-x_xl">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Available Variations

  • level_gap-x_none
  • level_gap-x_xs
  • level_gap-x_sm
  • level_gap-x_md
  • level_gap-x_lg
  • level_gap-x_xl

level_gap-y_[key]

Adjusts the vertical gap spacing based on the provided key. Gap key output is based on the values in $gap-map variable map.

...
...
...
...
...
...
...
...
...
...
<div class="level level_gap-y_xl">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Available Variations

  • level_gap-y_none
  • level_gap-y_xs
  • level_gap-y_sm
  • level_gap-y_md
  • level_gap-y_lg
  • level_gap-y_xl

level_nowrap

Removes the ability for level children to wrap and allows them to shrink as needed.

...
...
...
<div class="level level_nowrap">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Sass Variables

Variable Default Description
$prefix-block null String to prefix blocks with.
$prefix-element "__" String to prefix elements with.
$prefix-modifier "_" String to prefix modifiers with.
$prefix-modifier-value "_" String to prefix modifier values with.
$gap 2em The default gap spacing for the level component.
$gap-map Sass Map Ref ↓ Used to output gap modifiers.

$gap-map

Used to output gap modifiers.

$gap-map: (
  "none": 0,
  "xs": 1px,
  "sm": 0.25em,
  "md": 0.5em,
  "lg": 1em,
  "xl": 1.5em,
) !default;