tessl/npm-uikit
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
—
Pending
utility-classes.mddocs/
Utility Classes
UIkit's utility classes provide a comprehensive system for spacing, typography, colors, positioning, visibility, and responsive design modifications.
Capabilities
Margin Utilities
Margin spacing utilities for consistent element spacing.
/* Margin Classes */
.uk-margin { /* Standard margin bottom */ margin-bottom: 20px; }
.uk-margin-top { /* Top margin */ margin-top: 20px; }
.uk-margin-bottom { /* Bottom margin */ margin-bottom: 20px; }
.uk-margin-left { /* Left margin */ margin-left: 20px; }
.uk-margin-right { /* Right margin */ margin-right: 20px; }
/* Margin Size Variants */
.uk-margin-small { /* Small margin bottom */ margin-bottom: 10px; }
.uk-margin-small-top { /* Small top margin */ margin-top: 10px; }
.uk-margin-small-bottom { /* Small bottom margin */ margin-bottom: 10px; }
.uk-margin-small-left { /* Small left margin */ margin-left: 10px; }
.uk-margin-small-right { /* Small right margin */ margin-right: 10px; }
.uk-margin-medium { /* Medium margin bottom */ margin-bottom: 40px; }
.uk-margin-medium-top { /* Medium top margin */ margin-top: 40px; }
.uk-margin-medium-bottom { /* Medium bottom margin */ margin-bottom: 40px; }
.uk-margin-medium-left { /* Medium left margin */ margin-left: 40px; }
.uk-margin-medium-right { /* Medium right margin */ margin-right: 40px; }
.uk-margin-large { /* Large margin bottom */ margin-bottom: 40px; }
.uk-margin-large-top { /* Large top margin */ margin-top: 40px; }
.uk-margin-large-bottom { /* Large bottom margin */ margin-bottom: 40px; }
.uk-margin-large-left { /* Large left margin */ margin-left: 40px; }
.uk-margin-large-right { /* Large right margin */ margin-right: 40px; }
.uk-margin-xlarge { /* Extra large margin bottom */ margin-bottom: 60px; }
.uk-margin-xlarge-top { /* Extra large top margin */ margin-top: 60px; }
.uk-margin-xlarge-bottom { /* Extra large bottom margin */ margin-bottom: 60px; }
.uk-margin-xlarge-left { /* Extra large left margin */ margin-left: 60px; }
.uk-margin-xlarge-right { /* Extra large right margin */ margin-right: 60px; }
/* Margin Remove */
.uk-margin-remove { /* Remove all margins */ margin: 0; }
.uk-margin-remove-top { /* Remove top margin */ margin-top: 0; }
.uk-margin-remove-bottom { /* Remove bottom margin */ margin-bottom: 0; }
.uk-margin-remove-left { /* Remove left margin */ margin-left: 0; }
.uk-margin-remove-right { /* Remove right margin */ margin-right: 0; }
.uk-margin-remove-vertical { /* Remove vertical margins */ margin-top: 0; margin-bottom: 0; }
/* Auto Margins */
.uk-margin-auto { /* Auto horizontal margins */ margin-left: auto; margin-right: auto; }
.uk-margin-auto-top { /* Auto top margin */ margin-top: auto; }
.uk-margin-auto-bottom { /* Auto bottom margin */ margin-bottom: auto; }
.uk-margin-auto-left { /* Auto left margin */ margin-left: auto; }
.uk-margin-auto-right { /* Auto right margin */ margin-right: auto; }
.uk-margin-auto-vertical { /* Auto vertical margins */ margin-top: auto; margin-bottom: auto; }Usage Examples:
<!-- Standard Margins -->
<div class="uk-margin">Standard bottom margin</div>
<div class="uk-margin-large">Large bottom margin</div>
<!-- Directional Margins -->
<div class="uk-margin-top uk-margin-bottom">Top and bottom margins</div>
<div class="uk-margin-left">Left margin</div>
<!-- Remove Margins -->
<h1 class="uk-margin-remove-bottom">Heading without bottom margin</h1>
<p class="uk-margin-remove-top">Paragraph without top margin</p>
<!-- Auto Margins (Centering) -->
<div class="uk-margin-auto uk-width-1-2">Centered element</div>Padding Utilities
Padding spacing utilities for consistent internal spacing.
/* Padding Classes */
.uk-padding { /* Standard padding all sides */ padding: 30px; }
.uk-padding-small { /* Small padding all sides */ padding: 15px; }
.uk-padding-large { /* Large padding all sides */ padding: 40px; }
/* Directional Padding */
.uk-padding-remove { /* Remove all padding */ padding: 0; }
.uk-padding-remove-top { /* Remove top padding */ padding-top: 0; }
.uk-padding-remove-bottom { /* Remove bottom padding */ padding-bottom: 0; }
.uk-padding-remove-left { /* Remove left padding */ padding-left: 0; }
.uk-padding-remove-right { /* Remove right padding */ padding-right: 0; }
.uk-padding-remove-vertical { /* Remove vertical padding */ padding-top: 0; padding-bottom: 0; }
.uk-padding-remove-horizontal { /* Remove horizontal padding */ padding-left: 0; padding-right: 0; }Usage Examples:
<!-- Standard Padding -->
<div class="uk-padding uk-background-muted">Standard padding</div>
<!-- Padding Variants -->
<div class="uk-padding-small uk-background-muted uk-margin">Small padding</div>
<div class="uk-padding-large uk-background-muted">Large padding</div>
<!-- Remove Padding -->
<div class="uk-card uk-card-default uk-card-body uk-padding-remove-top">
Card without top padding
</div>Text Utilities
Typography utilities for text styling and alignment.
/* Text Alignment */
.uk-text-left { /* Left align text */ text-align: left; }
.uk-text-right { /* Right align text */ text-align: right; }
.uk-text-center { /* Center align text */ text-align: center; }
.uk-text-justify { /* Justify text */ text-align: justify; }
/* Text Transformation */
.uk-text-lowercase { /* Lowercase text */ text-transform: lowercase; }
.uk-text-uppercase { /* Uppercase text */ text-transform: uppercase; }
.uk-text-capitalize { /* Capitalize text */ text-transform: capitalize; }
/* Text Decoration */
.uk-text-decoration-none { /* Remove text decoration */ text-decoration: none; }
/* Text Weight */
.uk-text-light { /* Light font weight */ font-weight: 300; }
.uk-text-normal { /* Normal font weight */ font-weight: 400; }
.uk-text-bold { /* Bold font weight */ font-weight: 700; }
.uk-text-lighter { /* Lighter font weight */ font-weight: lighter; }
.uk-text-bolder { /* Bolder font weight */ font-weight: bolder; }
/* Text Style */
.uk-text-italic { /* Italic text */ font-style: italic; }
/* Text Size */
.uk-text-small { /* Small text */ font-size: 12px; line-height: 1.5; }
.uk-text-large { /* Large text */ font-size: 18px; line-height: 1.5; }
.uk-text-default { /* Default text size */ font-size: 14px; line-height: 1.5; }
/* Text Leading */
.uk-text-lead { /* Lead text styling */ font-size: 18px; line-height: 1.5; color: #666; }
/* Text Meta */
.uk-text-meta { /* Meta text styling */ font-size: 12px; line-height: 1.4; color: #999; }
/* Text Colors */
.uk-text-muted { /* Muted text color */ color: #999; }
.uk-text-emphasis { /* Emphasized text color */ color: #333; }
.uk-text-primary { /* Primary text color */ color: #1e87f0; }
.uk-text-secondary { /* Secondary text color */ color: #222; }
.uk-text-success { /* Success text color */ color: #32d296; }
.uk-text-warning { /* Warning text color */ color: #faa05a; }
.uk-text-danger { /* Danger text color */ color: #f0506e; }
/* Text Wrapping */
.uk-text-break { /* Break long words */ word-wrap: break-word; }
.uk-text-nowrap { /* Prevent text wrapping */ white-space: nowrap; }
.uk-text-truncate { /* Truncate text with ellipsis */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }Usage Examples:
<!-- 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>
<!-- Text Styling -->
<p class="uk-text-lead">This is lead text that stands out from regular content.</p>
<p class="uk-text-meta">This is meta text for additional information.</p>
<!-- Text Colors -->
<p class="uk-text-primary">Primary colored text</p>
<p class="uk-text-success">Success colored text</p>
<p class="uk-text-danger">Danger colored text</p>
<!-- Text Transformation -->
<p class="uk-text-uppercase">uppercase text</p>
<p class="uk-text-capitalize">capitalize text</p>
<!-- Text Truncation -->
<div class="uk-width-1-3">
<p class="uk-text-truncate">This is a very long text that will be truncated with an ellipsis</p>
</div>Visibility Utilities
Utilities for controlling element visibility and display.
/* Display Classes */
.uk-display-block { /* Display block */ display: block; }
.uk-display-inline { /* Display inline */ display: inline; }
.uk-display-inline-block { /* Display inline-block */ display: inline-block; }
/* Visibility Classes */
.uk-visible { /* Make element visible */ visibility: visible; }
.uk-invisible { /* Make element invisible */ visibility: hidden; }
/* Responsive Visibility */
.uk-visible@s { /* Visible on small+ screens */ }
.uk-visible@m { /* Visible on medium+ screens */ }
.uk-visible@l { /* Visible on large+ screens */ }
.uk-visible@xl { /* Visible on xlarge+ screens */ }
.uk-hidden { /* Hide element */ display: none; }
.uk-hidden@s { /* Hidden on small+ screens */ }
.uk-hidden@m { /* Hidden on medium+ screens */ }
.uk-hidden@l { /* Hidden on large+ screens */ }
.uk-hidden@xl { /* Hidden on xlarge+ screens */ }
/* Touch/Hover Visibility */
.uk-visible-toggle:not(:hover):not(.uk-hover) .uk-hidden-hover { /* Hide on hover */ }
.uk-visible-toggle:hover .uk-visible-hover { /* Show on hover */ }Usage Examples:
<!-- Basic Visibility -->
<div class="uk-visible">This element is visible</div>
<div class="uk-invisible">This element is invisible but takes up space</div>
<div class="uk-hidden">This element is hidden</div>
<!-- Responsive Visibility -->
<div class="uk-visible@m">Visible on medium screens and up</div>
<div class="uk-hidden@s">Hidden on small screens and up</div>
<!-- Hover Visibility -->
<div class="uk-visible-toggle">
<div>Hover over me</div>
<div class="uk-hidden-hover">This appears on hover</div>
</div>Width Utilities
Width utilities for element sizing.
/* Fixed Widths */
.uk-width-1-1 { /* Full width */ width: 100%; }
.uk-width-1-2 { /* Half width */ width: 50%; }
.uk-width-1-3 { /* One third width */ width: 33.333%; }
.uk-width-2-3 { /* Two thirds width */ width: 66.666%; }
.uk-width-1-4 { /* One quarter width */ width: 25%; }
.uk-width-3-4 { /* Three quarters width */ width: 75%; }
.uk-width-1-5 { /* One fifth width */ width: 20%; }
.uk-width-2-5 { /* Two fifths width */ width: 40%; }
.uk-width-3-5 { /* Three fifths width */ width: 60%; }
.uk-width-4-5 { /* Four fifths width */ width: 80%; }
.uk-width-1-6 { /* One sixth width */ width: 16.666%; }
.uk-width-5-6 { /* Five sixths width */ width: 83.333%; }
/* Auto Width */
.uk-width-auto { /* Auto width */ width: auto; }
.uk-width-expand { /* Expand to fill space */ flex: 1; min-width: 1px; }
/* Responsive Widths */
.uk-width-1-2@s { /* Half width on small+ screens */ }
.uk-width-1-3@m { /* One third width on medium+ screens */ }
.uk-width-1-4@l { /* One quarter width on large+ screens */ }
/* Child Widths (for use with grid) */
.uk-child-width-1-2 > * { /* All children half width */ width: 50%; }
.uk-child-width-1-3 > * { /* All children one third width */ width: 33.333%; }
.uk-child-width-1-4 > * { /* All children one quarter width */ width: 25%; }
/* Responsive Child Widths */
.uk-child-width-1-2@s > * { /* Children half width on small+ screens */ }
.uk-child-width-1-3@m > * { /* Children one third width on medium+ screens */ }Usage Examples:
<!-- Fixed Widths -->
<div class="uk-width-1-2 uk-background-muted uk-padding-small">Half width</div>
<div class="uk-width-1-3 uk-background-muted uk-padding-small uk-margin">One third width</div>
<!-- Responsive Widths -->
<div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m uk-background-muted uk-padding-small">
Responsive width: full on mobile, half on small+, third on medium+
</div>
<!-- Child Widths with Grid -->
<div class="uk-grid uk-child-width-1-3@m" uk-grid>
<div><div class="uk-background-muted uk-padding-small">Item 1</div></div>
<div><div class="uk-background-muted uk-padding-small">Item 2</div></div>
<div><div class="uk-background-muted uk-padding-small">Item 3</div></div>
</div>Background Utilities
Background styling utilities for colors and images.
/* Background Colors */
.uk-background-default { /* Default background */ background-color: #fff; }
.uk-background-muted { /* Muted background */ background-color: #f8f8f8; }
.uk-background-primary { /* Primary background */ background-color: #1e87f0; }
.uk-background-secondary { /* Secondary background */ background-color: #222; }
/* Background Images */
.uk-background-cover { /* Cover background image */ background-size: cover; background-position: center center; background-repeat: no-repeat; }
.uk-background-contain { /* Contain background image */ background-size: contain; background-position: center center; background-repeat: no-repeat; }
.uk-background-top-left { /* Top-left background position */ background-position: top left; }
.uk-background-top-center { /* Top-center background position */ background-position: top center; }
.uk-background-top-right { /* Top-right background position */ background-position: top right; }
.uk-background-center-left { /* Center-left background position */ background-position: center left; }
.uk-background-center-center { /* Center background position */ background-position: center center; }
.uk-background-center-right { /* Center-right background position */ background-position: center right; }
.uk-background-bottom-left { /* Bottom-left background position */ background-position: bottom left; }
.uk-background-bottom-center { /* Bottom-center background position */ background-position: bottom center; }
.uk-background-bottom-right { /* Bottom-right background position */ background-position: bottom right; }
/* Background Repeat */
.uk-background-norepeat { /* No background repeat */ background-repeat: no-repeat; }
/* Background Attachment */
.uk-background-fixed { /* Fixed background attachment */ background-attachment: fixed; }
/* Background Blend Modes */
.uk-background-blend-multiply { /* Multiply blend mode */ background-blend-mode: multiply; }
.uk-background-blend-screen { /* Screen blend mode */ background-blend-mode: screen; }
.uk-background-blend-overlay { /* Overlay blend mode */ background-blend-mode: overlay; }
.uk-background-blend-darken { /* Darken blend mode */ background-blend-mode: darken; }
.uk-background-blend-lighten { /* Lighten blend mode */ background-blend-mode: lighten; }
.uk-background-blend-color-dodge { /* Color dodge blend mode */ background-blend-mode: color-dodge; }
.uk-background-blend-color-burn { /* Color burn blend mode */ background-blend-mode: color-burn; }
.uk-background-blend-hard-light { /* Hard light blend mode */ background-blend-mode: hard-light; }
.uk-background-blend-soft-light { /* Soft light blend mode */ background-blend-mode: soft-light; }
.uk-background-blend-difference { /* Difference blend mode */ background-blend-mode: difference; }
.uk-background-blend-exclusion { /* Exclusion blend mode */ background-blend-mode: exclusion; }
.uk-background-blend-hue { /* Hue blend mode */ background-blend-mode: hue; }
.uk-background-blend-saturation { /* Saturation blend mode */ background-blend-mode: saturation; }
.uk-background-blend-color { /* Color blend mode */ background-blend-mode: color; }
.uk-background-blend-luminosity { /* Luminosity blend mode */ background-blend-mode: luminosity; }Usage Examples:
<!-- Background Colors -->
<div class="uk-background-primary uk-light uk-padding">Primary background</div>
<div class="uk-background-muted uk-padding uk-margin">Muted background</div>
<!-- Background Images -->
<div class="uk-background-cover uk-height-medium uk-flex uk-flex-center uk-flex-middle"
style="background-image: url('images/photo.jpg');">
<h1 class="uk-light">Cover Background</h1>
</div>
<!-- Background with Blend Mode -->
<div class="uk-background-cover uk-background-blend-multiply uk-height-medium"
style="background-image: url('images/photo.jpg'); background-color: #1e87f0;">
<div class="uk-padding">
<h2 class="uk-light">Blend Mode Example</h2>
</div>
</div>Border Utilities
Border styling utilities.
/* Border Radius */
.uk-border-rounded { /* Rounded corners */ border-radius: 5px; }
.uk-border-circle { /* Circular border */ border-radius: 50%; }
.uk-border-pill { /* Pill-shaped border */ border-radius: 500px; }
/* Border Remove */
.uk-border-remove { /* Remove border */ border: none; }Usage Examples:
<!-- Border Radius -->
<img class="uk-border-rounded" src="image.jpg" width="200" height="200" alt="">
<img class="uk-border-circle" src="avatar.jpg" width="100" height="100" alt="">
<!-- Pill Button -->
<button class="uk-button uk-button-primary uk-border-pill">Pill Button</button>Transform Utilities
CSS transform utilities.
/* Transform Origin */
.uk-transform-origin-top-left { /* Top-left transform origin */ transform-origin: top left; }
.uk-transform-origin-top-center { /* Top-center transform origin */ transform-origin: top center; }
.uk-transform-origin-top-right { /* Top-right transform origin */ transform-origin: top right; }
.uk-transform-origin-center-left { /* Center-left transform origin */ transform-origin: center left; }
.uk-transform-origin-center-right { /* Center-right transform origin */ transform-origin: center right; }
.uk-transform-origin-bottom-left { /* Bottom-left transform origin */ transform-origin: bottom left; }
.uk-transform-origin-bottom-center { /* Bottom-center transform origin */ transform-origin: bottom center; }
.uk-transform-origin-bottom-right { /* Bottom-right transform origin */ transform-origin: bottom right; }
.uk-transform-origin-center { /* Center transform origin */ transform-origin: center; }Usage Examples:
<!-- Transform Origin -->
<div class="uk-transform-origin-top-left uk-animation-scale-up">
Animation from top-left origin
</div>Install with Tessl CLI
npx tessl i tessl/npm-uikit