Utility Classes

<p class="focus-text-left">Left aligned text</p>
<p class="focus-text-center">Center aligned text</p>
<p class="focus-text-right">Right aligned text</p>

<p class="focus-text-lowercase">LOWERCASE TEXT</p>
<p class="focus-text-uppercase">uppercase text</p>
<p class="focus-text-capitalize">capitalize text</p>

<p class="focus-text-primary">Primary text</p>
<p class="focus-text-secondary">Secondary text</p>
<p class="focus-text-tertiary">Tertiary text</p>
<p class="focus-text-success">Success text</p>
<p class="focus-text-danger">Danger text</p>
<p class="focus-text-warning">Warning text</p>
<p class="focus-text-info">Info text</p>
<p class="focus-text-purple">Purple text</p>
<p class="focus-text-teal">Teal text</p>
<p class="focus-text-orange">Orange text</p>
<p class="focus-text-pink">Pink text</p>
<p class="focus-text-muted">Muted text</p>

<div class="focus-bg-primary focus-text-white">Primary background</div>
<div class="focus-bg-success focus-text-white">Success background</div>
<div class="focus-bg-danger focus-text-white">Danger background</div>
<div class="focus-bg-warning">Warning background</div>
<div class="focus-bg-info focus-text-white">Info background</div>
<div class="focus-bg-light">Light background</div>

<div class="focus-m-0">No margin</div>
<div class="focus-m-1">Small margin</div>
<div class="focus-m-2">Medium margin</div>
<div class="focus-m-3">Large margin</div>
<div class="focus-m-4">Extra large margin</div>

<!-- Direction specific -->
<div class="focus-mt-3">Margin top</div>
<div class="focus-mb-3">Margin bottom</div>
<div class="focus-ml-3">Margin left</div>
<div class="focus-mr-3">Margin right</div>
<div class="focus-mx-3">Margin horizontal (left + right)</div>
<div class="focus-my-3">Margin vertical (top + bottom)</div>

<!-- Padding works the same way -->
<div class="focus-p-3">Padding all sides</div>
<div class="focus-pt-2">Padding top</div>
<div class="focus-px-4">Padding horizontal</div>

<div class="focus-d-none">Hidden</div>
<div class="focus-d-block">Block</div>
<div class="focus-d-flex">Flex</div>
<div class="focus-d-inline">Inline</div>
<div class="focus-d-inline-block">Inline Block</div>

<div class="focus-border">All borders</div>
<div class="focus-border-top">Top border only</div>
<div class="focus-border-bottom">Bottom border only</div>
<div class="focus-border-left">Left border only</div>
<div class="focus-border-right">Right border only</div>
<div class="focus-border-0">No border</div>

<div class="focus-border focus-border-primary">Primary border</div>
<div class="focus-border focus-border-success">Success border</div>
<div class="focus-border focus-border-danger">Danger border</div>
<div class="focus-border focus-border-warning">Warning border</div>
<div class="focus-border focus-border-info">Info border</div>

<div class="focus-rounded">Rounded corners</div>
<div class="focus-rounded-md">Medium rounded</div>
<div class="focus-rounded-lg">Large rounded</div>
<div class="focus-rounded-circle">Circle</div>
<div class="focus-rounded-0">No rounded corners</div>

<div class="focus-shadow-sm">Small Shadow</div>
<div class="focus-shadow">Regular Shadow</div>
<div class="focus-shadow-lg">Large Shadow</div>
<div class="focus-shadow-none">No Shadow</div>

<div class="focus-w-25">25% width</div>
<div class="focus-w-50">50% width</div>
<div class="focus-w-75">75% width</div>
<div class="focus-w-100">100% width</div>
<div class="focus-w-auto">Auto width</div>

<!-- Same for height -->
<div class="focus-h-25">25% height</div>
<div class="focus-h-50">50% height</div>
<div class="focus-h-100">100% height</div>

<!-- Hidden on mobile, visible on tablet+ -->
<div class="focus-d-none focus-d-md-block">
  Tablet and desktop only
</div>

<!-- Visible on mobile, hidden on tablet+ -->
<div class="focus-d-block focus-d-md-none">
  Mobile only
</div>

<!-- Available classes for each breakpoint -->
<div class="focus-d-sm-block">Visible on sm+</div>
<div class="focus-d-md-flex">Flex on md+</div>
<div class="focus-d-lg-grid">Grid on lg+</div>
<div class="focus-d-xl-inline-block">Inline-block on xl+</div>

<!-- Stack on mobile, row on tablet+ -->
<div class="focus-d-flex focus-flex-column focus-flex-md-row focus-gap-3">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Available for each breakpoint -->
<div class="focus-flex-sm-row">Row on sm+</div>
<div class="focus-flex-md-column">Column on md+</div>
<div class="focus-flex-lg-wrap">Wrap on lg+</div>
<div class="focus-flex-xl-nowrap">No wrap on xl+</div>

<!-- Small padding on mobile, large on tablet+ -->
<div class="focus-p-2 focus-p-md-4">
  Responsive padding
</div>

<!-- Remove margin on tablet+ -->
<div class="focus-mt-4 focus-mt-md-0">
  Margin top on mobile only
</div>

<!-- Available spacing utilities (0-5 scale) -->
<div class="focus-mt-md-3">Margin top on md+</div>
<div class="focus-mb-lg-4">Margin bottom on lg+</div>
<div class="focus-p-xl-5">Padding on xl+</div>

<!-- Center on mobile, left on tablet+ -->
<div class="focus-text-center focus-text-md-left">
  Responsive text alignment
</div>

<!-- Available text alignment -->
<div class="focus-text-sm-center">Center on sm+</div>
<div class="focus-text-md-right">Right on md+</div>
<div class="focus-text-lg-left">Left on lg+</div>