@vrembem/level

    1.37.0 • Public • Published

    Level

    A simple flexbox based layout component.

    npm version

    Documentation

    Installation

    npm install @vrembem/level

    Styles

    @use "@vrembem/level";

    Markup

    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.

    Modifiers

    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_sm">
      <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_xs">
      <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>

    Customization

    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 0.5em 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;

    Install

    npm i @vrembem/level

    DownloadsWeekly Downloads

    306

    Version

    1.37.0

    License

    MIT

    Unpacked Size

    14.3 kB

    Total Files

    12

    Last publish

    Collaborators

    • sebnitu