Utilities
Low-specificity utility classes for rapid prototyping and quick styling. Each utility does one thing well and can be combined for complex layouts.
Overview
Utility classes provide a fast way to apply common styles directly in your HTML. They're especially useful for:
- Quick prototyping and experimentation
- One-off style adjustments
- Building responsive layouts
- Avoiding custom CSS for common patterns
Categories
Spacing
Margin, padding, and gap utilities.
.df-mt-4 .df-p-lg .df-gap-mdDisplay
Display, visibility, and overflow.
.df-flex .df-hidden .df-blockFlexbox
Flex direction, alignment, and distribution.
.df-flex-col .df-justify-centerColors
Text, background, and border colors.
.df-text-primary .df-bg-secondaryTypography
Text alignment, transform, and decoration.
.df-text-center .df-truncateBorders
Border width, radius, and style.
.df-border .df-rounded-lgShadows
Box shadow and elevation.
.df-shadow-md .df-shadow-lgSizing
Width, height, and size constraints.
.df-w-full .df-h-screenHow to Use Utilities
Utility classes can be combined directly in your HTML:
html
<div class="df-flex df-justify-between df-items-center df-p-lg df-bg-secondary df-rounded-xl">
<h3 class="df-text-primary df-font-semibold">Title</h3>
<button class="df-button df-button--primary">Action</button>
</div>Responsive Utilities
Most utilities have responsive variants using breakpoint prefixes:
html
<!-- Stack on mobile, row on medium screens and up -->
<div class="df-flex df-flex-col df-md:flex-row df-gap-md">
<div class="df-w-full df-md:w-1/2">Column 1</div>
<div class="df-w-full df-md:w-1/2">Column 2</div>
</div>Breakpoint Prefixes
| Prefix | Min Width | Example |
|---|---|---|
| (none) | 0px | .df-flex |
sm: | 640px | .df-sm:flex |
md: | 768px | .df-md:flex |
lg: | 1024px | .df-lg:flex |
xl: | 1280px | .df-xl:flex |
2xl: | 1536px | .df-2xl:flex |
Spacing Utilities
Margin
| Class | Property |
|---|---|
.df-m-{size} | margin |
.df-mt-{size} | margin-top |
.df-mr-{size} | margin-right |
.df-mb-{size} | margin-bottom |
.df-ml-{size} | margin-left |
.df-mx-{size} | margin-left & right |
.df-my-{size} | margin-top & bottom |
Padding
| Class | Property |
|---|---|
.df-p-{size} | padding |
.df-pt-{size} | padding-top |
.df-pr-{size} | padding-right |
.df-pb-{size} | padding-bottom |
.df-pl-{size} | padding-left |
.df-px-{size} | padding-left & right |
.df-py-{size} | padding-top & bottom |
Size Values
| Value | Size |
|---|---|
0 | 0 |
1 | 0.25rem (4px) |
2 | 0.5rem (8px) |
3 | 0.75rem (12px) |
4 | 1rem (16px) |
5 | 1.25rem (20px) |
6 | 1.5rem (24px) |
8 | 2rem (32px) |
xs | 0.25rem (4px) |
sm | 0.5rem (8px) |
md | 1rem (16px) |
lg | 1.5rem (24px) |
xl | 2rem (32px) |
auto | auto |
Display Utilities
html
<div class="df-block">Block</div>
<div class="df-inline-block">Inline Block</div>
<div class="df-flex">Flex</div>
<div class="df-inline-flex">Inline Flex</div>
<div class="df-grid">Grid</div>
<div class="df-hidden">Hidden</div>Flexbox Utilities
html
<!-- Direction -->
<div class="df-flex df-flex-row">Row</div>
<div class="df-flex df-flex-col">Column</div>
<!-- Justify Content -->
<div class="df-flex df-justify-start">Start</div>
<div class="df-flex df-justify-center">Center</div>
<div class="df-flex df-justify-end">End</div>
<div class="df-flex df-justify-between">Space Between</div>
<!-- Align Items -->
<div class="df-flex df-items-start">Start</div>
<div class="df-flex df-items-center">Center</div>
<div class="df-flex df-items-end">End</div>
<div class="df-flex df-items-stretch">Stretch</div>
<!-- Gap -->
<div class="df-flex df-gap-sm">Small Gap</div>
<div class="df-flex df-gap-md">Medium Gap</div>
<div class="df-flex df-gap-lg">Large Gap</div>Best Practices
When to use utilities
- Quick layout adjustments
- Prototyping and experimentation
- Simple responsive behavior
- One-off style changes
When to use components instead
- Complex, reusable patterns
- Consistent styling across multiple elements
- When utilities become repetitive
- For better maintainability