Utility

The utility component provides a set of atomic classes that specialize in a single function.

npm version

npm install @vrembem/utility
@import "@vrembem/utility/index";

background

<div class="background_primary_lighter"></div>
<div class="background_primary_light"></div>
<div class="background_primary"></div>
<div class="background_primary_dark"></div>
<div class="background_primary_darker"></div>
...

border

<div class="border"></div>
<div class="border_top"></div>
<div class="border_right"></div>
<div class="border_bottom"></div>
<div class="border_left"></div>
<div class="border_0"></div>
<div class="border_top_0"></div>
<div class="border_right_0"></div>
<div class="border_bottom_0"></div>
<div class="border_left_0"></div>
<div class="border border_color_light"></div>
<div class="border"></div>
<div class="border border_color_dark"></div>
<div class="border border_color_darker"></div>
<div class="border border_color_invert-light"></div>
<div class="border border_color_invert"></div>
<div class="border border_color_invert-dark"></div>
<div class="border border_color_invert-darker"></div>

radius

<div class="radius"></div>
<div class="radius_square"></div>
<div class="radius_circle"></div>

elevate

<div class="elevate"></div>
<div class="elevate_flat"></div>
<div class="elevate_1dp"></div>
<div class="elevate_4dp"></div>
<div class="elevate_8dp"></div>
<div class="elevate_16dp"></div>
<div class="elevate_24dp"></div>

color

Color Color light Color primary Color primary Color primary Color primary Color primary Color secondary Color secondary Color secondary Color secondary Color secondary Color shade Color shade Color shade Color night Color night Color night Color info Color info Color info Color info Color info Color success Color success Color success Color success Color success Color caution Color caution Color caution Color caution Color caution Color danger Color danger Color danger Color danger Color danger Color black Color white Color transparent
Color invert Color invert dark Color primary Color primary Color primary Color primary Color primary Color secondary Color secondary Color secondary Color secondary Color secondary Color shade Color shade Color shade Color night Color night Color night Color info Color info Color info Color info Color info Color success Color success Color success Color success Color success Color caution Color caution Color caution Color caution Color caution Color danger Color danger Color danger Color danger Color danger Color black Color white Color transparent
<span class="color"></span>
<span class="color_subtle"></span>
<span class="color_primary_light"></span>
<span class="color_primary"></span>
<span class="color_primary_dark"></span>
...

display

Display utilities allow you to quickly toggle the display property on an element with an optional breakpoint conditional.

.display_{property}_{breakpoint}
{property}
  • inline
  • flex
  • inline-flex
  • block
  • inline-block
  • none
{breakpoint}
  • xs ...480px
  • sm ...620px
  • md ...760px
  • lg ...990px
  • xl ...1380px

Small Mobile

Small Mobile → Mobile

Mobile → Tablet

Tablet → Desktop

Desktop → Large Desktop

Large Desktop

<div class="display_block display_none_xs">
  <p>Small Mobile</p>
</div>
<div class="display_none display_block_xs display_none_sm">
  <p>Small Mobile &rarr; Mobile</p>
</div>
<div class="display_none display_block_sm display_none_md">
  <p>Mobile &rarr; Tablet</p>
</div>
<div class="display_none display_block_md display_none_lg">
  <p>Tablet &rarr; Desktop</p>
</div>
<div class="display_none display_block_lg display_none_xl">
  <p>Desktop &rarr; Large Desktop</p>
</div>
<div class="display_none display_block_xl">
  <p>Large Desktop</p>
</div>

flex

<div class="flex flex_justify_between flex_align_end"></div>
<div class="flex flex_justify_end flex_align_stretch"></div>
<div class="flex flex_justify_center flex_align_center"></div>
<div class="flex flex_items_equal"></div>

margin

Add margin to an element using directional and size modifiers.

.margin
.margin_{size}
.margin_{direction}_{size}
{direction}
  • top
  • right
  • bottom
  • left
{size}
  • 0 ...0
  • xs ...0.5rem
  • sm ...1rem
  • md ...1.5rem
  • lg ...2rem
  • xl ...3rem

padding

Add padding to an element using directional and size modifiers.

.padding
.padding_{size}
.padding_{direction}_{size}
{direction}
  • top
  • right
  • bottom
  • left
{size}
  • 0 ...0
  • xs ...0.5rem
  • sm ...1rem
  • md ...1.5rem
  • lg ...2rem
  • xl ...3rem

spacing

<div class="spacing">...</div>
<div class="spacing_xl">...</div>

text

  • Text size small

  • Text size large

  • Text capitalize

  • Text lowercase

  • Text uppercase

  • Text align left

  • Text align center

  • Text align right

  • Text bold

  • Strong tag with normal text

  • Text italic

  • Text strike

  • Text underline

  • Text underline dotted

  • Text underline dashed

  • Text wrap

  • Text nowrap

  • Text overflow ellipsis text overflow ellipsis text overflow ellipsis text overflow ellipsis

  • Text lead

<!-- Size -->
<p class="text_size_sm">...</p>
<p class="text_size_lg">...</p>

<!-- Transform -->
<p class="text_capitalize">...</p>
<p class="text_lowercase">...</p>
<p class="text_uppercase">...</p>

<!-- Align -->
<p class="text_align_left">...</p>
<p class="text_align_center">...</p>
<p class="text_align_right">...</p>

<!-- Weight & Style -->
<p class="text_bold">...</p>
<p class="text_normal">...</p>
<p class="text_italic">...</p>

<!-- Decoration -->
<p class="text_strike">...</p>
<p class="text_underline">...</p>
<p class="text_underline_dotted">...</p>
<p class="text_underline_dashed">...</p>

<!-- Wrap -->
<p class="text_wrap">...</p>
<p class="text_nowrap">...</p>
<p class="text_overflow_ellipsis">...</p>

<!-- Other -->
<p class="text_lead">...</p>