Skip to main content

Utility Classes

The Blue Water Design System provides a comprehensive set of utility classes for layout, spacing, and visual styling.

Flexbox Layout​

Flex Direction​

<div class="flex-column">Vertical layout</div>
<div class="flex-row">Horizontal layout</div>

Flex Wrap​

<div class="wrap">Wrapped items</div>
<div class="wrap-reverse">Reverse wrapped items</div>

Justify Content​

<div class="justify-start">Start aligned</div>
<div class="justify-end">End aligned</div>
<div class="justify-center">Center aligned</div>
<div class="justify-between">Space between</div>
<div class="justify-around">Space around</div>
<div class="justify-evenly">Space evenly</div>
<div class="justify-stretch">Stretched</div>

Align Items​

<div class="align-start">Start aligned</div>
<div class="align-end">End aligned</div>
<div class="align-center">Center aligned</div>
<div class="align-baseline">Baseline aligned</div>
<div class="align-stretch">Stretched</div>

Text Alignment​

<div class="text-center">Centered text</div>
<div class="text-left">Left-aligned text</div>
<div class="text-right">Right-aligned text</div>
<div class="text-justify">Justified text</div>

Text Transform​

<div class="uppercase">UPPERCASE TEXT</div>
<div class="capitalize">Capitalized Text</div>
<div class="lowercase">lowercase text</div>

Text Truncation​

<div class="truncate">This text will be truncated with an ellipsis if it's too long to fit in its container</div>

Elevation (Shadows)​

<div class="elevation-xs">Extra small shadow</div>
<div class="elevation-sm">Small shadow</div>
<div class="elevation-md">Medium shadow</div>
<div class="elevation-lg">Large shadow</div>

Border Radius​

<div class="radius-sm">Small radius (2px)</div>
<div class="radius-md">Medium radius (4px)</div>
<div class="radius-lg">Large radius (6px)</div>
<div class="radius-xl">Extra large radius (8px)</div>
<div class="radius-circle">Circular radius</div>

Spacing​

The system provides a comprehensive set of spacing utilities for padding, margin, and gap. Each spacing size is available in multiple variations:

Spacing Scale​

  • 4xs: 0.125rem (2px)
  • 3xs: 0.25rem (4px)
  • 2xs: 0.375rem (6px)
  • xs: 0.5rem (8px)
  • sm: 0.75rem (12px)
  • md: 1rem (16px)
  • lg: 1.25rem (20px)
  • xl: 1.5rem (24px)
  • 2xl: 2rem (32px)
  • 3xl: 2.5rem (40px)
  • 4xl: 3rem (48px)

Padding​

<!-- All sides -->
<div class="padding-4xs">4xs padding all around</div>
<div class="padding">Default padding</div>
<div class="padding-4xl">4xl padding all around</div>

<!-- Individual sides -->
<div class="padding-top">Top padding</div>
<div class="padding-right">Right padding</div>
<div class="padding-bottom">Bottom padding</div>
<div class="padding-left">Left padding</div>

<!-- Axes -->
<div class="padding-horizontal">Horizontal padding</div>
<div class="padding-vertical">Vertical padding</div>

<!-- Remove padding -->
<div class="no-padding">No padding</div>

Margin​

<!-- All sides -->
<div class="margin-4xs">4xs margin all around</div>
<div class="margin">Default margin</div>
<div class="margin-4xl">4xl margin all around</div>

<!-- Individual sides -->
<div class="margin-top">Top margin</div>
<div class="margin-right">Right margin</div>
<div class="margin-bottom">Bottom margin</div>
<div class="margin-left">Left margin</div>

<!-- Axes -->
<div class="margin-horizontal">Horizontal margin</div>
<div class="margin-vertical">Vertical margin</div>

<!-- Remove margin -->
<div class="no-margin">No margin</div>

Gap​

<div class="gap-4xs">4xs gap between items</div>
<div class="gap">Default gap</div>
<div class="gap-4xl">4xl gap between items</div>
<div class="no-gap">No gap between items</div>

Best Practices​

  1. Use flexbox utilities for layout structure
  2. Apply consistent spacing using the spacing scale
  3. Use elevation classes to create visual hierarchy
  4. Combine multiple utility classes for complex layouts
  5. Use text utilities for consistent text styling
  6. Apply border radius utilities for consistent corner rounding