Utility Classes

Utility classes for common styling needs like spacing, text alignment, display, and more.

Text Utilities

Text Alignment

Left aligned text

Center aligned text

Right aligned text

HTML

<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>

Text Transform

LOWERCASE TEXT

uppercase text

capitalize text

HTML

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

Text Color

Primary text

Secondary text

Tertiary text

Success text

Danger text

Warning text

Info text

Purple text

Teal text

Orange text

Pink text

Muted text

HTML

<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>

Background Utilities

Apply background colors using .focus-bg-{color} classes:

bg-primary

bg-secondary

bg-tertiary

bg-success

bg-danger

bg-warning

bg-info

bg-purple

bg-teal

bg-orange

bg-pink

bg-light

bg-white

HTML

<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>

Spacing Utilities

Use margin and padding utilities for quick spacing adjustments. Classes follow the format: {property}{sides}-{size}

Spacing Scale

0 = 0
1 = 0.25rem (4px)
2 = 0.5rem (8px)
3 = 0.75rem (12px)
4 = 1rem (16px)
5 = 1.5rem (24px)

focus-m-0 (margin: 0)

focus-m-1 (margin: 0.25rem)

focus-m-2 (margin: 0.5rem)

focus-m-3 (margin: 1rem)

focus-m-4 (margin: 1.5rem)

HTML

<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>

Display Utilities

focus-d-block (display: block)

focus-d-inline-block

Flex

Items

This is hidden (focus-d-none)

HTML

<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>

Border Utilities

Add or remove borders and customize border colors:

focus-border

focus-border-top

focus-border-bottom

focus-border-left

focus-border-right

HTML

<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>

Border Colors

Primary

Success

Danger

Warning

Info

HTML

<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>

Border Radius

focus-rounded

focus-rounded-md

focus-rounded-lg

circle

focus-rounded-0

HTML

<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>

Shadow Utilities

focus-shadow-sm

focus-shadow

focus-shadow-lg

HTML

<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>

Width & Height

focus-w-25 (25% width)

focus-w-50 (50% width)

focus-w-75 (75% width)

focus-w-100 (100% width)

HTML

<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>

Responsive Utilities

Mobile-first responsive utilities for building adaptive layouts. Use breakpoint-specific classes to show/hide elements and adjust spacing at different screen sizes.

Breakpoints

Focus UI uses standard responsive breakpoints:

sm: ≥576px (Small devices and up)
md: ≥768px (Medium devices and up - tablets)
lg: ≥992px (Large devices and up - desktops)
xl: ≥1200px (Extra large devices)

Responsive Display

Show or hide elements at specific breakpoints.

Always visible

Hidden on mobile, visible on tablet+ (.focus-d-none .focus-d-md-block)

Visible on mobile, hidden on tablet+ (.focus-d-block .focus-d-md-none)

HTML

<!-- 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>

Responsive Flex Direction

Change flex direction at different breakpoints.

Item 1

Item 2

Item 3

HTML

<!-- 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>

Responsive Spacing

Adjust margins and padding at different breakpoints.

Padding changes: Small on mobile (.focus-p-2), large on tablet+ (.focus-p-md-4)

HTML

<!-- 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>

Responsive Text Alignment

Change text alignment at different screen sizes.

Centered on mobile, left-aligned on tablet+

HTML

<!-- 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>

CSS Classes Reference

Complete list of all utility classes organized by category:

Category	Class	Description
Text Alignment
	`.focus-text-left`	Left-align text
	`.focus-text-center`	Center-align text
	`.focus-text-right`	Right-align text
Text Transform
	`.focus-text-lowercase`	Convert text to lowercase
	`.focus-text-uppercase`	Convert text to uppercase
	`.focus-text-capitalize`	Capitalize first letter of each word
Text Colors
	`.focus-text-primary`	Primary brand color text
	`.focus-text-secondary`	Secondary color text
	`.focus-text-tertiary`	Tertiary color text
	`.focus-text-success`	Success state text (green)
	`.focus-text-danger`	Danger/error state text (red)
	`.focus-text-warning`	Warning state text (yellow)
	`.focus-text-info`	Info state text (blue)
	`.focus-text-purple`	Purple text
	`.focus-text-teal`	Teal text
	`.focus-text-orange`	Orange text
	`.focus-text-pink`	Pink text
	`.focus-text-muted`	Muted/dimmed text
	`.focus-text-white`	White text
Background Colors
	`.focus-bg-primary`	Primary brand color background
	`.focus-bg-secondary`	Secondary color background
	`.focus-bg-tertiary`	Tertiary color background
	`.focus-bg-success`	Success state background
	`.focus-bg-danger`	Danger/error state background
	`.focus-bg-warning`	Warning state background
	`.focus-bg-info`	Info state background
	`.focus-bg-purple`	Purple background
	`.focus-bg-teal`	Teal background
	`.focus-bg-orange`	Orange background
	`.focus-bg-pink`	Pink background
	`.focus-bg-light`	Light background
	`.focus-bg-white`	White background
Spacing (Margin & Padding)
	`.focus-m-{0-5}`	Margin on all sides (0 to 1.5rem)
	`.focus-mt-{0-5}`	Margin top
	`.focus-mb-{0-5}`	Margin bottom
	`.focus-ml-{0-5}`	Margin left
	`.focus-mr-{0-5}`	Margin right
	`.focus-mx-{0-5}`	Margin horizontal (left + right)
	`.focus-my-{0-5}`	Margin vertical (top + bottom)
	`.focus-p-{0-5}`	Padding on all sides (0 to 1.5rem)
	`.focus-pt-{0-5}`	Padding top
	`.focus-pb-{0-5}`	Padding bottom
	`.focus-pl-{0-5}`	Padding left
	`.focus-pr-{0-5}`	Padding right
	`.focus-px-{0-5}`	Padding horizontal (left + right)
	`.focus-py-{0-5}`	Padding vertical (top + bottom)
Display
	`.focus-d-none`	Hide element (display: none)
	`.focus-d-block`	Block-level element
	`.focus-d-flex`	Flexbox container
	`.focus-d-inline`	Inline element
	`.focus-d-inline-block`	Inline-block element
Borders
	`.focus-border`	Border on all sides
	`.focus-border-top`	Top border only
	`.focus-border-bottom`	Bottom border only
	`.focus-border-left`	Left border only
	`.focus-border-right`	Right border only
	`.focus-border-0`	Remove all borders
	`.focus-border-primary`	Primary color border
	`.focus-border-success`	Success color border
	`.focus-border-danger`	Danger color border
	`.focus-border-warning`	Warning color border
	`.focus-border-info`	Info color border
Border Radius
	`.focus-rounded`	Small rounded corners (default)
	`.focus-rounded-md`	Medium rounded corners
	`.focus-rounded-lg`	Large rounded corners
	`.focus-rounded-circle`	Circular shape (50% radius)
	`.focus-rounded-0`	No rounded corners (square)
Shadows
	`.focus-shadow-sm`	Small shadow
	`.focus-shadow`	Regular shadow
	`.focus-shadow-lg`	Large shadow
	`.focus-shadow-none`	Remove shadow
Width
	`.focus-w-25`	25% width
	`.focus-w-50`	50% width
	`.focus-w-75`	75% width
	`.focus-w-100`	100% width
	`.focus-w-auto`	Auto width
Height
	`.focus-h-25`	25% height
	`.focus-h-50`	50% height
	`.focus-h-75`	75% height
	`.focus-h-100`	100% height
	`.focus-h-auto`	Auto height
Responsive Utilities
	`.focus-d-{sm\|md\|lg\|xl}-{value}`	Display utilities at breakpoints
	`.focus-flex-{sm\|md\|lg\|xl}-{value}`	Flex direction at breakpoints
	`.focus-{m\|p}{t\|b\|l\|r\|x\|y}-{sm\|md\|lg\|xl}-{0-5}`	Spacing at breakpoints
	`.focus-text-{sm\|md\|lg\|xl}-{left\|center\|right}`	Text alignment at breakpoints