tessl/npm-uikit
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
—
Pending
layout-components.mddocs/
Layout Components
UIkit's layout components provide responsive grid systems, containers, sections, and positioning utilities for structuring web interfaces.
Capabilities
Grid System
Responsive grid system using CSS Grid and Flexbox for creating flexible layouts.
/* Grid Container */
.uk-grid {
/* Creates grid container with automatic child spacing */
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
/* Grid Spacing Variants */
.uk-grid-small { /* Small grid gaps */ }
.uk-grid-medium { /* Medium grid gaps */ }
.uk-grid-large { /* Large grid gaps */ }
.uk-grid-collapse { /* No grid gaps */ }
/* Grid Column Control */
.uk-grid-column-small { /* 1 column on small screens */ }
.uk-grid-column-medium { /* 2 columns on medium screens */ }
.uk-grid-column-large { /* 3 columns on large screens */ }
.uk-grid-column-xlarge { /* 4 columns on xlarge screens */ }
/* Grid Item Widths */
.uk-width-1-1 { /* Full width */ }
.uk-width-1-2 { /* Half width */ }
.uk-width-1-3 { /* One third width */ }
.uk-width-2-3 { /* Two thirds width */ }
.uk-width-1-4 { /* One quarter width */ }
.uk-width-3-4 { /* Three quarters width */ }
.uk-width-1-5 { /* One fifth width */ }
.uk-width-1-6 { /* One sixth width */ }
/* Responsive Width Classes */
.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 */ }Usage Examples:
<!-- Basic Grid -->
<div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-body">Item 1</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item 2</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item 3</div>
</div>
</div>
<!-- Custom Grid Widths -->
<div class="uk-grid" uk-grid>
<div class="uk-width-2-3@m">
<p>Main content (66.7% on medium+ screens)</p>
</div>
<div class="uk-width-1-3@m">
<p>Sidebar (33.3% on medium+ screens)</p>
</div>
</div>Container System
Content containers with responsive max-widths for consistent content alignment.
/* Container Classes */
.uk-container {
/* Standard container with responsive max-width */
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.uk-container-small {
/* Small container variant */
max-width: 900px;
}
.uk-container-large {
/* Large container variant */
max-width: 1600px;
}
.uk-container-xlarge {
/* Extra large container variant */
max-width: 1800px;
}
.uk-container-expand {
/* Full width container */
max-width: none;
}
/* Container Item Alignment */
.uk-container-item-padding-remove-left { /* Remove left padding */ }
.uk-container-item-padding-remove-right { /* Remove right padding */ }Usage Examples:
<!-- Standard Container -->
<div class="uk-container">
<h1>Page Title</h1>
<p>Container content with responsive max-width.</p>
</div>
<!-- Small Container -->
<div class="uk-container uk-container-small">
<article>Article content in smaller container</article>
</div>
<!-- Full Width Section with Container Inside -->
<section class="uk-section uk-section-primary">
<div class="uk-container">
<h2>Section Title</h2>
<p>Content within section container.</p>
</div>
</section>Section System
Content sections with consistent vertical spacing and theme variants.
/* Section Classes */
.uk-section {
/* Standard section with vertical padding */
padding-top: 40px;
padding-bottom: 40px;
}
/* Section Size Variants */
.uk-section-xsmall { /* Extra small section padding */ }
.uk-section-small { /* Small section padding */ }
.uk-section-large { /* Large section padding */ }
.uk-section-xlarge { /* Extra large section padding */ }
/* Section Theme Variants */
.uk-section-default { /* Default section styling */ }
.uk-section-muted { /* Muted background section */ }
.uk-section-primary { /* Primary themed section */ }
.uk-section-secondary { /* Secondary themed section */ }
/* Section Overlap */
.uk-section-overlap { /* Overlapping section positioning */ }Usage Examples:
<!-- Hero Section -->
<section class="uk-section uk-section-primary uk-section-large">
<div class="uk-container">
<h1 class="uk-heading-large">Welcome</h1>
<p class="uk-text-lead">Hero section content</p>
</div>
</section>
<!-- Content Section -->
<section class="uk-section">
<div class="uk-container">
<div class="uk-grid-match uk-child-width-1-2@m" uk-grid>
<div>Content block 1</div>
<div>Content block 2</div>
</div>
</div>
</section>
<!-- Muted Background Section -->
<section class="uk-section uk-section-muted">
<div class="uk-container">
<h2>Features</h2>
<p>Feature description in muted section.</p>
</div>
</section>Flexbox Utilities
Flexbox layout utilities for advanced layout control.
/* Flex Container */
.uk-flex { /* Display flex */ }
.uk-flex-inline { /* Display inline-flex */ }
/* Flex Direction */
.uk-flex-row { /* Row direction (default) */ }
.uk-flex-row-reverse { /* Reverse row direction */ }
.uk-flex-column { /* Column direction */ }
.uk-flex-column-reverse { /* Reverse column direction */ }
/* Flex Wrap */
.uk-flex-wrap { /* Allow wrapping */ }
.uk-flex-nowrap { /* Prevent wrapping */ }
.uk-flex-wrap-reverse { /* Reverse wrap */ }
/* Justify Content */
.uk-flex-left { /* Justify left */ }
.uk-flex-center { /* Justify center */ }
.uk-flex-right { /* Justify right */ }
.uk-flex-between { /* Justify space-between */ }
.uk-flex-around { /* Justify space-around */ }
/* Align Items */
.uk-flex-stretch { /* Align stretch */ }
.uk-flex-top { /* Align top */ }
.uk-flex-middle { /* Align middle */ }
.uk-flex-bottom { /* Align bottom */ }
/* Flex Item Properties */
.uk-flex-1 { /* Flex grow 1 */ }
.uk-flex-auto { /* Flex auto */ }
.uk-flex-none { /* Flex none */ }Usage Examples:
<!-- Horizontal Navigation -->
<nav class="uk-flex uk-flex-between uk-flex-middle">
<div class="uk-logo">Logo</div>
<ul class="uk-flex uk-list">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Centered Content -->
<div class="uk-flex uk-flex-center uk-flex-middle uk-height-viewport">
<div class="uk-text-center">
<h1>Centered Content</h1>
<p>Vertically and horizontally centered.</p>
</div>
</div>Position Utilities
Positioning utilities for element placement and stacking.
/* Position Types */
.uk-position-relative { /* Relative positioning */ }
.uk-position-absolute { /* Absolute positioning */ }
.uk-position-fixed { /* Fixed positioning */ }
.uk-position-sticky { /* Sticky positioning */ }
/* Position Placement */
.uk-position-top { /* Position at top */ }
.uk-position-bottom { /* Position at bottom */ }
.uk-position-left { /* Position at left */ }
.uk-position-right { /* Position at right */ }
.uk-position-top-left { /* Position at top-left */ }
.uk-position-top-right { /* Position at top-right */ }
.uk-position-bottom-left { /* Position at bottom-left */ }
.uk-position-bottom-right { /* Position at bottom-right */ }
.uk-position-center { /* Position at center */ }
.uk-position-center-left { /* Position at center-left */ }
.uk-position-center-right { /* Position at center-right */ }
/* Position Sizes */
.uk-position-small { /* Small positioned element */ }
.uk-position-medium { /* Medium positioned element */ }
.uk-position-large { /* Large positioned element */ }
/* Position Cover */
.uk-position-cover { /* Cover entire parent */ }
/* Z-Index */
.uk-position-z-index { /* Default z-index */ }
.uk-position-z-index-zero { /* Zero z-index */ }
.uk-position-z-index-negative { /* Negative z-index */ }Usage Examples:
<!-- Overlay on Image -->
<div class="uk-position-relative">
<img src="image.jpg" alt="Background">
<div class="uk-position-absolute uk-position-bottom-left uk-position-small">
<h3 class="uk-margin-remove">Image Caption</h3>
</div>
</div>
<!-- Fixed Header -->
<header class="uk-position-fixed uk-position-top uk-width-1-1 uk-background-default">
<nav class="uk-container">
<!-- Navigation content -->
</nav>
</header>
<!-- Centered Modal Content -->
<div class="uk-position-fixed uk-position-cover uk-flex uk-flex-center uk-flex-middle">
<div class="uk-card uk-card-default uk-card-body">
<h3>Modal Content</h3>
</div>
</div>Height Utilities
Height control utilities for element sizing.
/* Viewport Heights */
.uk-height-1-1 { /* Full height of container */ }
.uk-height-viewport { /* Full viewport height */ }
.uk-height-small { /* Small fixed height */ }
.uk-height-medium { /* Medium fixed height */ }
.uk-height-large { /* Large fixed height */ }
/* Min/Max Heights */
.uk-height-max-small { /* Max small height */ }
.uk-height-max-medium { /* Max medium height */ }
.uk-height-max-large { /* Max large height */ }Usage Examples:
<!-- Full Viewport Hero -->
<section class="uk-height-viewport uk-flex uk-flex-center uk-flex-middle uk-background-cover" data-src="hero.jpg" uk-img>
<div class="uk-text-center">
<h1 class="uk-heading-large">Full Height Hero</h1>
</div>
</section>
<!-- Sidebar with Full Height -->
<div class="uk-grid uk-grid-collapse" uk-grid>
<div class="uk-width-1-4">
<aside class="uk-height-viewport uk-background-muted">
<!-- Sidebar content -->
</aside>
</div>
<div class="uk-width-3-4">
<!-- Main content -->
</div>
</div>JavaScript Grid Component
JavaScript functionality for advanced grid features.
/**
* Grid component for masonry and advanced layouts
*/
UIkit.grid(element: HTMLElement, options?: {
/** Grid masonry layout */
masonry?: boolean;
/** Grid item parallax effect */
parallax?: number;
/** Grid margins */
margin?: string;
/** First column class */
'first-column'?: string;
}): GridComponent;
interface GridComponent {
/** Grid element */
$el: HTMLElement;
/** Update grid layout */
update(): void;
}Usage Examples:
// Create masonry grid
const grid = UIkit.grid('#masonry-grid', {
masonry: true,
margin: 'uk-grid-margin'
});
// Update grid after content changes
grid.update();<!-- Masonry Grid -->
<div id="masonry-grid" class="uk-child-width-1-3@m" uk-grid="masonry: true">
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>Variable height content 1</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>Variable height content 2<br>Multiple lines<br>More content</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>Variable height content 3</p>
</div>
</div>
</div>Install with Tessl CLI
npx tessl i tessl/npm-uikit