UIkit Cheatsheet

Complete reference guide for UIkit framework from basic to advanced concepts.

For Developers Components Utilities JavaScript Responsive Design

Getting Started

Setup UIkit

<!-- UIkit CSS via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.0/dist/css/uikit.min.css" />

<!-- UIkit JS via CDN -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.16.0/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.16.0/dist/js/uikit-icons.min.js"></script>

<!-- Alternatively, install via npm -->
npm install uikit
Note: UIkit includes both CSS and JavaScript components. The icons package is optional but recommended.

Basic Template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UIkit Template</title>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.0/dist/css/uikit.min.css" />
</head>
<body>
<h1>Hello, UIkit!</h1>

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.16.0/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.16.0/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Grid System

Grid Basics

<!-- UIkit Grid Container -->
<div class="uk-container">
<!-- Fixed width container -->
</div>

<div class="uk-container uk-container-expand">
<!-- Full width container -->
</div>

<!-- Basic Grid -->
<div class="uk-grid" uk-grid>
<div class="uk-width-1-3">Column 1</div>
<div class="uk-width-1-3">Column 2</div>
<div class="uk-width-1-3">Column 3</div>
</div>

<!-- Grid with specified column widths -->
<div class="uk-grid" uk-grid>
<div class="uk-width-2-3">2/3 width</div>
<div class="uk-width-1-3">1/3 width</div>
</div>
Note: UIkit's grid system uses a flexible fraction-based approach (1-2, 1-3, 2-3, etc.).

Responsive Grid

<!-- Responsive breakpoints: s, m, l, xl -->
<div class="uk-grid" uk-grid>
<div class="uk-width-1-1 uk-width-1-2@s uk-width-1-3@m uk-width-1-4@l">
<!-- Full width on mobile, 1/2 on small, 1/3 on medium, 1/4 on large -->
</div>
</div>

<!-- Grid with gutter -->
<div class="uk-grid-small" uk-grid>
<div class="uk-width-1-2">Small gutter</div>
<div class="uk-width-1-2">Small gutter</div>
</div>

<div class="uk-grid-medium" uk-grid>
<div class="uk-width-1-2">Medium gutter</div>
<div class="uk-width-1-2">Medium gutter</div>
</div>

<div class="uk-grid-large" uk-grid>
<div class="uk-width-1-2">Large gutter</div>
<div class="uk-width-1-2">Large gutter</div>
</div>

Components

Buttons

<!-- Basic buttons -->
<button class="uk-button uk-button-default">Default</button>
<button class="uk-button uk-button-primary">Primary</button>
<button class="uk-button uk-button-secondary">Secondary</button>
<button class="uk-button uk-button-danger">Danger</button>
<button class="uk-button uk-button-text">Text</button>
<button class="uk-button uk-button-link">Link</button>

<!-- Button sizes -->
<button class="uk-button uk-button-small">Small</button>
<button class="uk-button uk-button-default">Default</button>
<button class="uk-button uk-button-large">Large</button>

<!-- Disabled button -->
<button class="uk-button uk-button-default" disabled>Disabled</button>

<!-- Button with icon -->
<button class="uk-button uk-button-default">
<span uk-icon="icon: heart"></span> Like
</button>

Cards

<!-- Basic card -->
<div class="uk-card uk-card-default">
<div class="uk-card-body">
<h3 class="uk-card-title">Card Title</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>

<!-- Card with image -->
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img src="image.jpg" alt="">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">Media Card</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>

<!-- Card with header and footer -->
<div class="uk-card uk-card-default">
<div class="uk-card-header">
<h3 class="uk-card-title">Header</h3>
</div>
<div class="uk-card-body">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="uk-card-footer">
<a href="#" class="uk-button uk-button-text">Read more</a>
</div>
</div>

JavaScript Components

Modal

<!-- Modal trigger -->
<a href="#modal" uk-toggle>Open Modal</a>

<!-- Modal container -->
<div id="modal" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<button class="uk-modal-close-default" type="button" uk-close></button>
<h2 class="uk-modal-title">Modal Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button class="uk-button uk-button-primary" type="button">Save</button>
</p>
</div>
</div>

Dropdown

<!-- Dropdown trigger -->
<button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>

<!-- Click dropdown -->
<button class="uk-button uk-button-default" type="button">Click</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>

Utilities

Spacing

<!-- Margin and padding utilities -->
<!-- Format: {property}{side}-{size} -->

<!-- Margin all sides -->
<div class="uk-margin">Default margin</div>
<div class="uk-margin-small">Small margin</div>
<div class="uk-margin-medium">Medium margin</div>
<div class="uk-margin-large">Large margin</div>
<div class="uk-margin-remove">Remove margin</div>

<!-- Margin specific sides -->
<div class="uk-margin-top">Margin top</div>
<div class="uk-margin-bottom">Margin bottom</div>
<div class="uk-margin-left">Margin left</div>
<div class="uk-margin-right">Margin right</div>

<!-- Padding -->
<div class="uk-padding">Default padding</div>
<div class="uk-padding-small">Small padding</div>
<div class="uk-padding-medium">Medium padding</div>
<div class="uk-padding-large">Large padding</div>
<div class="uk-padding-remove">Remove padding</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>

<!-- Responsive text alignment -->
<p class="uk-text-left@m uk-text-center">
Center on mobile, left on medium and larger
</p>

<!-- Text wrapping -->
<div class="uk-text-nowrap">No wrap text</div>
<div class="uk-text-truncate">Truncated text if it overflows</div>

<!-- Text transformation -->
<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 styling -->
<p class="uk-text-lead">Lead text</p>
<p class="uk-text-meta">Meta text</p>
<p class="uk-text-primary">Primary colored text</p>
<p class="uk-text-success">Success colored text</p>
<p class="uk-text-warning">Warning colored text</p>
<p class="uk-text-danger">Danger colored text</p>

SEO Optimization

SEO Best Practices with UIkit

<!-- Semantic HTML structure -->
<header class="uk-section uk-section-primary">
<div class="uk-container">
<h1>Page Title</h1>
<p class="uk-text-lead">Page description</p>
</div>
</header>

<main class="uk-section">
<div class="uk-container">
<article>
<h2>Article Title</h2>
<p>Article content...</p>
<section>
<h3>Section Title</h3>
<p>Section content...</p>
</section>
</article>
</div>
</main>

<footer class="uk-section uk-section-secondary">
<div class="uk-container">
<p>Footer content</p>
</div>
</footer>

<!-- Schema markup example -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Page Title",
"description": "Page description",
"url": "https://example.com/page"
}
</script>
SEO Tips:
  • Use semantic HTML5 elements (header, nav, main, article, section, footer)
  • Include proper heading hierarchy (h1, h2, h3)
  • Add schema markup for rich snippets
  • Optimize images with alt attributes and proper dimensions
  • Ensure fast loading by minimizing CSS and JavaScript
  • Make your site mobile-friendly with responsive design