UIkit

UIkitとは

UIkitは軽量でモジュール式のフロントエンドフレームワークです。高速で強力なWeb UIを開発することができます。

UIkit
公式サイト https://getuikit.com/
ライセンス MIT
グリッド 6列
GitHub stars 17.2k
Twitter @getuikit
UIkit Version 3.14.1
モジュールサイズ
uikit.min.css246KB
uikit.min.js125KB
uikit-icons.js63.7KB

使い方

CDN

UIkitはCDN (Contents Delivery Network) を通じて導入できる。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Getting started with UIkit</title>
    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.23.6/dist/css/uikit.min.css" />
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.23.6/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.23.6/dist/js/uikit-icons.min.js"></script>
  </head>
  <body>
    <!-- content -->
  </body>
</html>

.uk-column-1-2

uk-column-1-2 クラスを要素に追加することで、インラインコンテンツを2列で表示することができる。

<div class="uk-column-1-2">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

.uk-column-1-3

uk-column-1-3 クラスを要素に追加することで、インラインコンテンツを3列で表示することができる。

<div class="uk-column-1-3">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

.uk-column-1-4

uk-column-1-4 クラスを要素に追加することで、インラインコンテンツを4列で表示することができる。

<div class="uk-column-1-4">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

.uk-column-1-5

uk-column-1-5 クラスを要素に追加することで、インラインコンテンツを5列で表示することができる。

<div class="uk-column-1-5">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

.uk-column-1-6

uk-column-1-6 クラスを要素に追加することで、インラインコンテンツを6列で表示することができる。

<div class="uk-column-1-6">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

@s

UIkitは、いくつかのレスポンシブ列クラスが用意されている。基本的には通常の列クラスと同じように機能するが、その効果を発揮するブレークポイントを表す接尾辞が付いている。

デバイス 接尾辞 画面幅
smartphone @s ≥ 640px
tablet @m ≥ 960px
laptop @l ≥ 1200px
desktop @xl ≥ 1600px

@s 接尾辞は、デバイスの幅が640px以上の場合にのみ適用される。

<div class="uk-column-1-2@s">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

@m

UIkitは、いくつかのレスポンシブ列クラスが用意されている。基本的には通常の列クラスと同じように機能するが、その効果を発揮するブレークポイントを表す接尾辞が付いている。

@m 接尾辞は、デバイスの幅が960px以上の場合にのみ適用される。

<div class="uk-column-1-2@m">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

@l

UIkitは、いくつかのレスポンシブ列クラスが用意されている。基本的には通常の列クラスと同じように機能するが、その効果を発揮するブレークポイントを表す接尾辞が付いている。

@l 接尾辞は、デバイスの幅が1200px以上の場合にのみ適用される。

<div class="uk-column-1-2@l">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

@xl

UIkitは、いくつかのレスポンシブ列クラスが用意されている。基本的には通常の列クラスと同じように機能するが、その効果を発揮するブレークポイントを表す接尾辞が付いている。

@xl 接尾辞は、デバイスの幅が1600px以上の場合にのみ適用される。

<div class="uk-column-1-2@xl">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

.uk-column-divider

列と列の間に縦線を表示するには、uk-column-divider クラスを追加する。

<div class="uk-column-1-4 uk-column-divider">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

.uk-border-rounded

UIkitを使って画像の角を丸くするには、uk-border-rounded クラスを指定する。

<img class="uk-border-rounded" src="portrait.webp" alt="avator">

avator

.uk-border-circle

UIkitを使って画像の形を丸くするには、uk-border-circle クラスを指定する。

<img class="uk-border-circle" src="portrait.webp" alt="avator">

avator

.uk-border-pill

<img class="uk-border-pill" src="portrait.webp" alt="avator">

avator

UIkit でナビゲーション・バーを作成するには、uk-navbar 属性を指定する。

クラスではない。
<nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
      <li>
        <a href="/css/bootstrap/">Bootstrap</a>
      </li>
      <li>
        <a href="/css/bulma/">Bulma</a>
      </li>
    </ul>
  </div>
</nav>

.uk-active

UIkit でナビゲーション・バーのアクティブな項目を作成するには、uk-active クラスを指定する。

<nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
      <li class="uk-active">
        <a href="#">UIkit</a>
      </li>
      <li>
        <a href="/css/foundation/">Foundation</a>
      </li>
    </ul>
  </div>
</nav>

UIkit で中央寄せのナビゲーション・バーを作成するには、uk-navbar-center クラスを指定する。

<nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-center">
    <ul class="uk-navbar-nav">
      <li>
        <a href="/css/materialize/">Materialize</a>
      </li>
      <li>
        <a href="/css/milligram/">Milligram</a>
      </li>
    </ul>
  </div>
</nav>

UIkit で中央寄せのナビゲーション・バーを作成するには、uk-navbar-right クラスを指定する。

<nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-right">
    <ul class="uk-navbar-nav">
      <li>
        <a href="/css/primer/">Primer</a>
      </li>
      <li>
        <a href="/css/pure/">Pure.css</a>
      </li>
    </ul>
  </div>
</nav>

.uk-table

UIkit CSSフレームワークを使って表をスタイリングするには、<table> タグに uk-table クラスを指定する。

<table class="uk-table">
  <caption>UIkitのブレークポイント</caption>
  <thead>
    <tr>
      <th>ブレークポイント</th>
      <th>接尾辞</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>640px以上</td>
      <td>@s</td>
    <tr>
    <tr>
      <td>960px以上</td>
      <td>@m</td>
    <tr>
    <tr>
      <td>1200px以上</td>
      <td>@l</td>
    <tr>
    <tr>
      <td>1600px以上lt;/td>
      <td>@xl</td>
    <tr>
  </tbody>
</table>
UIkitのブレークポイント
デバイスの幅 接尾辞
640px以上 @s
960px以上 @m
1200px以上 @l
1600px以上 @xl

.uk-table-divider

<table class="uk-table uk-table-divider">
  <caption>UIkitのブレークポイント</caption>
  <thead>
    <tr>
      <th>デバイスの幅</th>
      <th>接尾辞</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>640PX以上</td>
      <td>@S</td>
    <tr>
    <tr>
      <td>960PX以上</td>
      <td>@M</td>
    <tr>
    <tr>
      <td>1200px以上</td>
      <td>@l</td>
    <tr>
    <tr>
      <td>1600px以上lt;/td>
      <td>@xl</td>
    <tr>
  </tbody>
</table>
UIkitのブレークポイント
デバイスの幅接尾辞
640PX以上 @S
960PX以上 @M
1200px以上 @l
1600px以上 @xl

.uk-table-striped

UIkit で表の行を縞模様にするには、table タグに uk-table-striped クラスを指定する。

<table class="uk-table uk-table-striped">
  <caption>UIkitのブレークポイント</caption>
  <thead>
    <tr>
      <th>デバイスの幅</th>
      <th>接尾辞</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>640PX以上</td>
      <td>@S</td>
    <tr>
    <tr>
      <td>960PX以上</td>
      <td>@M</td>
    <tr>
    <tr>
      <td>1200PX以上</td>
      <td>@L</td>
    <tr>
    <tr>
      <td>1600px以上lt;/td>
      <td>@xl</td>
    <tr>
  </tbody>
</table>
UIkitのブレークポイント
デバイスの幅接尾辞
640PX以上 @S
960PX以上 @M
1200PX以上 @L
1600px以上 @xl

.uk-table-hover

表の行の上にマウスカーソルを乗せたときに色を変えるには、table クラスに加えて uk-table-hover 修飾クラスを指定する。

<table class="uk-table uk-table-hover">
  <caption>UIkitのブレークポイント</caption>
  <thead>
    <tr>
      <th>デバイスの幅</th>
      <th>接尾辞</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>640PX以上</td>
      <td>@S</td>
    <tr>
    <tr>
      <td>960PX以上</td>
      <td>@M</td>
    <tr>
    <tr>
      <td>1200PX以上</td>
      <td>@L</td>
    <tr>
    <tr>
      <td>1600px以上lt;/td>
      <td>@xl</td>
    <tr>
  </tbody>
</table>
UIkitのブレークポイント
デバイスの幅接尾辞
640PX以上 @S
960PX以上 @M
1200PX以上 @L
1600px以上 @xl

.uk-table-small

小さい表にするには、table クラスに加えて uk-table-small 修飾クラスを指定する。

<table class="uk-table uk-table-small">
  <caption>UIkitのブレークポイント</caption>
  <thead>
    <tr>
      <th>デバイスの幅</th>
      <th>接尾辞</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>640PX以上</td>
      <td>@S</td>
    <tr>
    <tr>
      <td>960PX以上</td>
      <td>@M</td>
    <tr>
    <tr>
      <td>1200PX以上</td>
      <td>@L</td>
    <tr>
    <tr>
      <td>1600px以上lt;/td>
      <td>@xl</td>
    <tr>
  </tbody>
</table>
UIkitのブレークポイント
デバイスの幅接尾辞
640PX以上 @S
960PX以上 @M
1200PX以上 @L
1600px以上 @xl

.uk-table-large

大きい表にするには、table クラスに加えて uk-table-large 修飾クラスを指定する。

<table class="uk-table uk-table-large">
  <caption>UIkitのブレークポイント</caption>
  <thead>
    <tr>
      <th>デバイスの幅</th>
      <th>接尾辞</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>640PX以上</td>
      <td>@S</td>
    <tr>
    <tr>
      <td>960PX以上</td>
      <td>@M</td>
    <tr>
    <tr>
      <td>1200PX以上</td>
      <td>@L</td>
    <tr>
    <tr>
      <td>1600px以上lt;/td>
      <td>@xl</td>
    <tr>
  </tbody>
</table>
UIkitのブレークポイント
デバイスの幅接尾辞
640PX以上 @S
960PX以上 @M
1200PX以上 @L
1600px以上 @xl

.uk-table-justify

<table class="uk-table uk-table-justify">
  <caption>UIkitのブレークポイント</caption>
  <thead>
    <tr>
      <th>デバイスの幅</th>
      <th>接尾辞</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>640PX以上</td>
      <td>@S</td>
    <tr>
    <tr>
      <td>960PX以上</td>
      <td>@M</td>
    <tr>
    <tr>
      <td>1200PX以上</td>
      <td>@L</td>
    <tr>
    <tr>
      <td>1600px以上lt;/td>
      <td>@xl</td>
    <tr>
  </tbody>
</table>
UIkitのブレークポイント
デバイスの幅接尾辞
640PX以上 @S
960PX以上 @M
1200PX以上 @L
1600px以上 @xl

Accordion

<ul uk-accordion>
  <li>
    <a class="uk-accordion-title" href="#">Title #1<a>
    <div class="uk-accordion-content">Contents #2</div>
  </li>
  <li>
    <a class="uk-accordion-title" href="#">Title #2<a>
    <div class="uk-accordion-content">Contents #2</div>
  </li>
</ul>

Opened accordion

<ul uk-accordion>
  <li class="uk-open">
    <a class="uk-accordion-title" href="#">Title #1<a>
    <div class="uk-accordion-content">Contents #2</div>
  </li>
  <li>
    <a class="uk-accordion-title" href="#">Title #2<a>
    <div class="uk-accordion-content">Contents #2</div>
  </li>
</ul>

Alert

<div uk-alert>
Alert
</div>
Alert

Alert primary

<div class="uk-alert-primary" uk-alert>
 <span uk-icon="icon: info"></span>
 Information
</div>
Information

Alert success

<div class="uk-alert-success" uk-alert>
  <span uk-icon="icon: check"></span>
  Success
</div>
Success

Alert warning

<div class="uk-alert-warning" uk-alert>
  <span uk-icon="icon: question"></span>
  Warning
</div>
Warning

Alert danger

<div class="uk-alert-danger" uk-alert>
  <span uk-icon="icon: ban"></span>
  Danger
</div>
Danger

Default background

<div class="uk-background-default">
Default background
</div>
Default background

Muted background

<div class="uk-background-muted">
Muted background
</div>
Muted background

Primary background

<div class="uk-background-primary">
Primary background
</div>
Primary background

Secondary background

<div class="uk-background-secondary">
Secondary background
</div>
Secondary background

Badge

<span class="uk-badge">1</span>
1

Default button

<button class="uk-button uk-button-default">Button</button>
<a class="uk-button uk-button-default" href="#">Link</a>
Link

Disabled button

<button class="uk-button uk-button-default" disabled>
  Button
</button>

Primary button

<button class="uk-button uk-button-primary">Button</button>
<a class="uk-button uk-button-primary" href="#">Link</a>
Link

Secondary button

<button class="uk-button uk-button-secondary">
  Secondary
</button>

Danger button

<button class="uk-button uk-button-danger">
  Danger
</button>

Text button

<button class="uk-button uk-button-text">
  Text
</button>

Small button

<button class="uk-button uk-button-small">
  Small
</button>

Large button

<button class="uk-button uk-button-large">
  Large
</button>

Button width 1/1

<button class="uk-button uk-button-default uk-width-1-1">
  Button
</button>

Button width 1/2

<button class="uk-button uk-button-default uk-width-1-2">
  Button
</button>

Button group

<div class="uk-button-group">
  <button class="uk-button uk-button-default">#1</button>
  <button class="uk-button uk-button-default">#2</button>
  <button class="uk-button uk-button-default">#3</button>
</div>

Container

<div class="uk-container uk-background-primary">
  Container
</div>
Container

Extra small container

<div class="uk-container uk-container-xsmall uk-background-primary">
  Extra small container
</div>
Extra small container

Small container

<div class="uk-container uk-container-small uk-background-primary">
  Small container
</div>
Small container

Large container

<div class="uk-container uk-container-large uk-background-primary">
  Large container
</div>
Large container

Expand container

<div class="uk-container uk-container-expand uk-background-primary">
  Expand container
</div>
Expand container

Large button

<button class="uk-button uk-button-large">Large</button>

Small font

<p class="uk-text-small">
  Small font
</p>

Small font

Large font

<p class="uk-text-large">
  Large font
</p>

Large font

Muted font

<p class="uk-text-muted">
  Muted font
</p>

Muted font

Emphasis text

<p class="uk-text-emphasis">
  Emphasis text
</p>

Emphasis text

Primary text

<p class="uk-text-primary">
  Primary text
</p>

Primary text

Secondary text

<p class="uk-text-secondary">
  Secondary text
</p>

Secondary text

Success text

<p class="uk-text-success">
  Success text
</p>

Success text

Warning text

<p class="uk-text-warning">
  Warning text
</p>

Warning text

Danger text

<p class="uk-text-danger">
  Danger text
</p>

Danger text

Input

<input type="text" class="uk-input">

Checkbox

<label>
  <input type="check" class="uk-check"> 普通預金
</label>
<label>
  <input type="check" class="uk-check"> 当座預金
</label>

Radio

<label>
  <input type="radio" name="account" class="uk-check"> 普通預金
</label>
<label>
  <input type="radio" name="account" class="uk-check"> 当座預金
</label>

Range

<input type="range" class="uk-range">

Select

<select class="uk-select">
  <option>みずほ銀行<option>
  <option>三菱UFJ銀行<option>
  <option>ゆうちょ銀行<option>
</select>

Textarea

<textarea class="uk-textarea">
</textarea>

Fieldset

<fieldset class="uk-fieldset">
  <legend class="uk-legend">Legend</legend>
  <input type="text" class="uk-input">
</fieldset>
Legend

Form danger

<input type="text" class="uk-input uk-form-danger">

Form success

<input type="text" class="uk-input uk-form-success">

Form large

<input type="text" class="uk-input uk-form-large">

Form small

<input type="text" class="uk-input uk-form-small">

Icon

<span uk-icon="icon: question"></span>

Available icons

Icon ratio

<span uk-icon="icon: question; ratio: 0.5"></span>
<span uk-icon="icon: question; ratio: 2"></span>
<span uk-icon="icon: question; ratio: 3"></span>

Available icons

Grid

<div uk-grid>
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</div>
First
Second
Third

Grid divider

<div class="uk-grid-divider" uk-grid>
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</div>
First
Second
Third

Width 1/1

<div uk-grid>
  <div class="uk-width-1-1">First</div>
  <div class="uk-width-1-1">Second</div>
</div>
First
Second

Width 1/2

<div uk-grid>
  <div class="uk-width-1-2">First</div>
  <div class="uk-width-1-2">Second</div>
</div>
First
Second

Width 1/3

<div uk-grid>
  <div class="uk-width-1-3">First</div>
  <div class="uk-width-1-3">Second</div>
  <div class="uk-width-1-3">Third</div>
</div>
First
Second
Third

Width 2/3

<div uk-grid>
  <div class="uk-width-2-3">First</div>
  <div class="uk-width-1-3">Second</div>
</div>
First
Second

Width 1/4

<div uk-grid>
  <div class="uk-width-1-4">First</div>
  <div class="uk-width-1-4">Second</div>
  <div class="uk-width-1-4">Third</div>
  <div class="uk-width-1-4">Forth</div>
</div>
First
Second
Third
Forth

Width 3/4

<div uk-grid>
  <div class="uk-width-3-4">First</div>
  <div class="uk-width-1-4">Second</div>
</div>
First
Second

Width 1/5

<div uk-grid>
  <div class="uk-width-1-5">First</div>
  <div class="uk-width-1-5">Second</div>
  <div class="uk-width-1-5">Third</div>
  <div class="uk-width-1-5">Fourth</div>
  <div class="uk-width-1-5">Fifth</div>
</div>
First
Second
Third
Fourth
Fifth

Width 2/5

<div uk-grid>
  <div class="uk-width-2-5">First</div>
  <div class="uk-width-1-5">Second</div>
  <div class="uk-width-1-5">Third</div>
  <div class="uk-width-1-5">Fourth</div>
</div>
First
Second
Third
Fourth

Width 3/5

<div uk-grid>
  <div class="uk-width-3-5">First</div>
  <div class="uk-width-1-5">Second</div>
  <div class="uk-width-1-5">Third</div>
</div>
First
Second
Third

Width 4/5

<div uk-grid>
  <div class="uk-width-4-5">First</div>
  <div class="uk-width-1-5">Second</div>
</div>
First
Second

Width 1/6

<div uk-grid>
  <div class="uk-width-1-6">1</div>
  <div class="uk-width-1-6">2</div>
  <div class="uk-width-1-6">3</div>
  <div class="uk-width-1-6">4</div>
  <div class="uk-width-1-6">5</div>
  <div class="uk-width-1-6">6</div>
</div>
1
2
3
4
5
6

Width 5/6

<div uk-grid>
  <div class="uk-width-5-6">First</div>
  <div class="uk-width-1-6">Second</div>
</div>
First
Second

Icon button

<a href="#" class="uk-icon-button" uk-icon="twitter"></a>
<a href="#" class="uk-icon-button" uk-icon="instagram"></a>

Available icons

Margin

<div class="uk-background-primary">1</div>
<div class="uk-margin uk-background-primary">2</div>
<div class="uk-background-primary">3</div>
1
2
3

Margin top

<div class="uk-background-primary">1</div>
<div class="uk-margin-top uk-background-primary">2</div>
<div class="uk-background-primary">3</div>
1
2
3

Margin right

<div class="uk-background-primary">1</div>
<div class="uk-margin-right uk-background-primary">2</div>
1
2

Margin bottom

<div class="uk-background-primary">1</div>
<div class="uk-margin-bottom uk-background-primary">2</div>
<div class="uk-background-primary">3</div>
1
2
3

Margin left

<div class="uk-background-primary">1</div>
<div class="uk-margin-left uk-background-primary">2</div>
1
2

Vertically centered dialog

<div id="example" class="uk-flex-top" uk-modal>
  <div class="uk-modal-dialog uk-margin-auto-vertical">
    <button class="uk-modal-close-outside" uk-close>
    </button>
    <div class="uk-modal-body">
      <h2 class="uk-modal-title">
        Vertically centered dialog
      </h2>
    </div>
  </div>
</div>

Offcanvas

<div id="OFFCANVAS" uk-offcanvas>
  <div class="uk-offcanvas-bar">
    <button class="uk-offcanvas-close" type="button" uk-close>
    </button>
    <h3>Offcanvas</h3>
  </div>
</div>

Padding

<div class="uk-padding uk-background-primary">
  Padding
</div>
Padding

Small padding

<div class="uk-padding-small uk-background-primary">
  Small padding
</div>
Small padding

Large padding

<div class="uk-padding-large uk-background-primary">
  Large padding
</div>
Large padding