UIKit iOS Development Cheatsheet

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

Quick reference guide

Comprehensive UIKit iOS Development Cheatsheet Reference

This UIKit iOS Development cheatsheet on Nikhil Learn Hub collects syntax, commands, and practical snippets for quick revision. Learn UIKit views, controllers, layouts, navigation, and iOS app development concepts with practical examples.

Use the reference cards and examples above during coding sessions; return here instead of scattered searches when you need dependable reminders. Follow the UIKit learning roadmap when you want structured lessons beyond one-page lookups.

Quick lookup coverage

Syntax, commands, and API signatures
Copy-ready examples and common patterns
Terminology for coursework and interviews
Cross-links to the matching learning roadmap

How to study with this sheet

Production debugging and tuning reminders
Security, performance, or scale cautions
Integration with adjacent stacks on this site
Deeper study through tutorials and roadmaps

Who Should Use This Cheatsheet

Students, self-taught developers, and professionals who need fast UIKit iOS Development lookups during labs, debugging, or interview revision should keep this page bookmarked.

Related Resources on Nikhil Learn Hub

UIKit learning roadmapstructured learning path for the same technology
Cheatsheets hubbrowse all quick-reference sheets
Technology hubtutorials, roadmaps, and practice hubs

Related Cheatsheet Links

UIkit Cheatsheet