UIKit Utility Classes
Utility-First: UIKit follows a utility-first approach where single-purpose classes are used to build complex designs.
Spacing Utilities
Margin Classes
| Class | Description | Example |
|---|---|---|
.uk-margin | Adds margin on all sides | Margin all around |
.uk-margin-top | Adds top margin | Top margin |
.uk-margin-bottom | Adds bottom margin | Bottom margin |
.uk-margin-left | Adds left margin | Left margin |
.uk-margin-right | Adds right margin | Right margin |
.uk-margin-remove | Removes all margins | No margin |
Padding Classes
| Class | Description | Example |
|---|---|---|
.uk-padding | Adds padding on all sides | Padding all around |
.uk-padding-small | Adds small padding | Small padding |
.uk-padding-large | Adds large padding | Large padding |
.uk-padding-remove | Removes all padding | No padding |
Display Utilities
Visibility Classes
<!-- Basic Visibility --> <div class="uk-visible">Always visible</div> <div class="uk-hidden">Always hidden</div> <div class="uk-invisible">Invisible but occupies space</div> <!-- Responsive Visibility --> <div class="uk-visible@s">Visible on small screens and up</div> <div class="uk-hidden@s">Hidden on small screens and up</div> <div class="uk-visible@m">Visible on medium screens and up</div> <div class="uk-hidden@m">Hidden on medium screens and up</div> <div class="uk-visible@l">Visible on large screens and up</div> <div class="uk-hidden@l">Hidden on large screens and up</div> <div class="uk-visible@xl">Visible on xlarge screens and up</div> <div class="uk-hidden@xl">Hidden on xlarge screens and up</div> <!-- Print Visibility --> <div class="uk-visible-print">Visible only when printing</div> <div class="uk-hidden-print">Hidden when printing</div>
Display Properties
<!-- Display Classes --> <div class="uk-display-block">display: block</div> <div class="uk-display-inline">display: inline</div> <div class="uk-display-inline-block">display: inline-block</div> <!-- Responsive Display --> <div class="uk-display-block@s">Block on small+</div> <div class="uk-display-inline@m">Inline on medium+</div> <div class="uk-display-inline-block@l">Inline-block on large+</div> <!-- Hide/Show --> <div class="uk-hidden">Hidden</div> <div class="uk-visible">Visible</div>
Flex Utilities
Flex Container
<!-- Flex Container --> <div class="uk-flex"> <div>Flex item 1</div> <div>Flex item 2</div> </div> <!-- Inline Flex --> <div class="uk-flex-inline"> <div>Inline flex item</div> </div> <!-- Responsive Flex --> <div class="uk-flex@s">Flex on small+</div> <div class="uk-flex@m">Flex on medium+</div> <div class="uk-flex@l">Flex on large+</div>
Flex Direction
<!-- Flex Direction --> <div class="uk-flex uk-flex-row">Row (default)</div> <div class="uk-flex uk-flex-row-reverse">Row Reverse</div> <div class="uk-flex uk-flex-column">Column</div> <div class="uk-flex uk-flex-column-reverse">Column Reverse</div> <!-- Responsive Direction --> <div class="uk-flex uk-flex-row@s">Row on small+</div> <div class="uk-flex uk-flex-column@m">Column on medium+</div>
Justify Content
<!-- Justify Content --> <div class="uk-flex uk-flex-left">Left</div> <div class="uk-flex uk-flex-center">Center</div> <div class="uk-flex uk-flex-right">Right</div> <div class="uk-flex uk-flex-between">Between</div> <div class="uk-flex uk-flex-around">Around</div> <!-- Responsive Justify --> <div class="uk-flex uk-flex-left@s">Left on small+</div> <div class="uk-flex uk-flex-center@m">Center on medium+</div>
Align Items
<!-- Align Items --> <div class="uk-flex uk-flex-top">Top</div> <div class="uk-flex uk-flex-middle">Middle</div> <div class="uk-flex uk-flex-bottom">Bottom</div> <div class="uk-flex uk-flex-stretch">Stretch</div> <!-- Responsive Align --> <div class="uk-flex uk-flex-top@s">Top on small+</div> <div class="uk-flex uk-flex-middle@m">Middle on medium+</div>
Position Utilities
<!-- Position Classes --> <div class="uk-position-relative">Position relative</div> <div class="uk-position-absolute">Position absolute</div> <div class="uk-position-fixed">Position fixed</div> <div class="uk-position-sticky">Position sticky</div> <div class="uk-position-static">Position static</div> <div class="uk-position-z-index">Custom z-index</div> <!-- Position Values --> <div class="uk-position-top">Top: 0</div> <div class="uk-position-bottom">Bottom: 0</div> <div class="uk-position-left">Left: 0</div> <div class="uk-position-right">Right: 0</div> <div class="uk-position-top-left">Top Left</div> <div class="uk-position-top-right">Top Right</div> <div class="uk-position-bottom-left">Bottom Left</div> <div class="uk-position-bottom-right">Bottom Right</div> <div class="uk-position-center">Center</div>
Text Utilities
<!-- Text Alignment --> <p class="uk-text-left">Left aligned text</p> <p class="uk-text-center">Center aligned text</p> <p class="uk-text-right">Right aligned text</p> <p class="uk-text-justify">Justified text</p> <!-- Text Styles --> <p class="uk-text-lead">Lead paragraph</p> <p class="uk-text-meta">Meta text</p> <p class="uk-text-small">Small text</p> <p class="uk-text-large">Large text</p> <p class="uk-text-bold">Bold text</p> <p class="uk-text-italic">Italic text</p> <p class="uk-text-capitalize">Capitalized text</p> <p class="uk-text-uppercase">Uppercase text</p> <p class="uk-text-lowercase">Lowercase text</p> <!-- Text Colors --> <p class="uk-text-primary">Primary text</p> <p class="uk-text-secondary">Secondary text</p> <p class="uk-text-success">Success text</p> <p class="uk-text-warning">Warning text</p> <p class="uk-text-danger">Danger text</p> <p class="uk-text-muted">Muted text</p> <!-- Text Overflow --> <p class="uk-text-truncate">Truncated text with ellipsis</p> <p class="uk-text-break">Break long words</p> <p class="uk-text-nowrap">Prevent text wrapping</p>
Width & Height Utilities
<!-- Width Classes --> <div class="uk-width-1-2">50% width</div> <div class="uk-width-1-3">33.33% width</div> <div class="uk-width-2-3">66.66% width</div> <div class="uk-width-1-4">25% width</div> <div class="uk-width-3-4">75% width</div> <div class="uk-width-1-5">20% width</div> <div class="uk-width-2-5">40% width</div> <div class="uk-width-3-5">60% width</div> <div class="uk-width-4-5">80% width</div> <div class="uk-width-auto">Auto width</div> <div class="uk-width-expand">Expand to fill space</div> <!-- Height Classes --> <div class="uk-height-small">Small height (150px)</div> <div class="uk-height-medium">Medium height (300px)</div> <div class="uk-height-large">Large height (450px)</div> <div class="uk-height-max-small">Max height small</div> <div class="uk-height-max-medium">Max height medium</div> <div class="uk-height-max-large">Max height large</div>
Border Utilities
<!-- Border Sides --> <div class="uk-border">Border all sides</div> <div class="uk-border-top">Border top</div> <div class="uk-border-bottom">Border bottom</div> <div class="uk-border-left">Border left</div> <div class="uk-border-right">Border right</div> <!-- Border Styles --> <div class="uk-border-dashed">Dashed border</div> <div class="uk-border-dotted">Dotted border</div> <div class="uk-border-rounded">Rounded corners</div> <div class="uk-border-circle">Circle border</div> <div class="uk-border-pill">Pill shape</div> <!-- Border Colors --> <div class="uk-border-primary">Primary border</div> <div class="uk-border-secondary">Secondary border</div> <div class="uk-border-success">Success border</div> <div class="uk-border-warning">Warning border</div> <div class="uk-border-danger">Danger border</div> <div class="uk-border-muted">Muted border</div>
Background Utilities
<!-- Background Colors --> <div class="uk-background-default">Default background</div> <div class="uk-background-muted">Muted background</div> <div class="uk-background-primary">Primary background</div> <div class="uk-background-secondary">Secondary background</div> <div class="uk-background-success">Success background</div> <div class="uk-background-warning">Warning background</div> <div class="uk-background-danger">Danger background</div> <!-- Background Images --> <div class="uk-background-cover" style="background-image: url(...)">Cover background</div> <div class="uk-background-contain" style="background-image: url(...)">Contain background</div> <div class="uk-background-fixed" style="background-image: url(...)">Fixed background</div> <div class="uk-background-norepeat" style="background-image: url(...)">No repeat</div> <div class="uk-background-center" style="background-image: url(...)">Center background</div> <div class="uk-background-top-left" style="background-image: url(...)">Top left</div> <div class="uk-background-top-center" style="background-image: url(...)">Top center</div> <div class="uk-background-top-right" style="background-image: url(...)">Top right</div> <div class="uk-background-center-left" style="background-image: url(...)">Center left</div> <div class="uk-background-center-right" style="background-image: url(...)">Center right</div> <div class="uk-background-bottom-left" style="background-image: url(...)">Bottom left</div> <div class="uk-background-bottom-center" style="background-image: url(...)">Bottom center</div> <div class="uk-background-bottom-right" style="background-image: url(...)">Bottom right</div>
Overflow Utilities
<!-- Overflow --> <div class="uk-overflow-auto">Auto overflow</div> <div class="uk-overflow-hidden">Hidden overflow</div> <div class="uk-overflow-visible">Visible overflow</div> <div class="uk-overflow-scroll">Scroll overflow</div>
Shadow Utilities
<!-- Shadow --> <div class="uk-box-shadow-small">Small shadow</div> <div class="uk-box-shadow-medium">Medium shadow</div> <div class="uk-box-shadow-large">Large shadow</div> <div class="uk-box-shadow-xlarge">X-Large shadow</div> <div class="uk-box-shadow-hover-small">Hover small shadow</div> <div class="uk-box-shadow-hover-medium">Hover medium shadow</div> <div class="uk-box-shadow-hover-large">Hover large shadow</div> <div class="uk-box-shadow-hover-xlarge">Hover x-large shadow</div> <div class="uk-box-shadow-bottom">Bottom shadow</div>
Utility-First Benefits:
- Rapid prototyping and development
- Consistent spacing and sizing
- Reduced CSS specificity issues
- Easy maintenance and updates
- Responsive design made simple
