UIkit

UIkitとは

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

UIkit
公式サイト https://getuikit.com/
ライセンス MIT
グリッド 6列
GitHub stars 16.6k
Twitter @getuikit
UIkit Ver. 3.6.21
モジュールサイズ
uikit.min.css268KB
uikit.min.js130KB
uikit-icons.js63.5KB

使い方

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.6.17/dist/css/uikit.min.css" />
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.6.17/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.6.17/dist/js/uikit-icons.min.js"></script>
  </head>
  <body>
    <!-- content -->
  </body>
</html>

.uk-button

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

Link

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

uk-grid

UIkit でグリッドを作成するには、uk-grid 属性を指定する。

クラスではない。
<div uk-grid>
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</div>
First
Second
Third

.uk-grid-divider

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

.uk-width-1-2

UIkit のグリッドレイアウトシステムにおいて横幅を2分の1にするには、uk-width-1-2 クラスを指定する。

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

.uk-width-1-3

UIkit のグリッドレイアウトシステムにおいて横幅を3分の1にするには、uk-width-1-3 クラスを指定する。

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

.uk-width-2-3

UIkit のグリッドレイアウトシステムにおいて横幅を3分の2にするには、uk-width-2-3 クラスを指定する。

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

.uk-width-1-4

UIkit のグリッドレイアウトシステムにおいて横幅を4分の1にするには、uk-width-1-4 クラスを指定する。

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

.uk-width-3-4

UIkit のグリッドレイアウトシステムにおいて横幅を4分の3にするには、uk-width-3-4 クラスを指定する。

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

.uk-width-1-5

UIkit のグリッドレイアウトシステムにおいて横幅を5分の1にするには、uk-width-1-5 クラスを指定する。

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

.uk-width-2-5

UIkit のグリッドレイアウトシステムにおいて横幅を5分の2にするには、uk-width-2-5 クラスを指定する。

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

.uk-width-3-5

UIkit のグリッドレイアウトシステムにおいて横幅を5分の3にするには、uk-width-3-5 クラスを指定する。

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

.uk-width-4-5

UIkit のグリッドレイアウトシステムにおいて横幅を5分の4にするには、uk-width-4-5 クラスを指定する。

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

.uk-width-1-6

UIkit のグリッドレイアウトシステムにおいて横幅を6分の1にするには、uk-width-1-6 クラスを指定する。

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

.uk-width-5-6

UIkit のグリッドレイアウトシステムにおいて横幅を6分の5にするには、uk-width-5-6 クラスを指定する。

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

uk-icon

UIkitはアイコンを提供している。

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

.uk-border-rounded

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

portrait

.uk-border-circle

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

portrait

.uk-border-pill

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

portrait

.uk-margin

<div class="uk-margin uk-background-primary">Margin</div>
Margin

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

<table class="uk-table">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    <tr>
    <tr>
      <td>0010</td>
      <td>りそな銀行</td>
    <tr>
  </tbody>
</table>
金融機関コード
コード金融機関
0001 みずほ銀行
0010 りそな銀行

.uk-table-divider

<table class="uk-table uk-table-divider">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    <tr>
    <tr>
      <td>0010</td>
      <td>りそな銀行</td>
    <tr>
  </tbody>
</table>
金融機関コード
コード金融機関
0001 みずほ銀行
0010 りそな銀行

.uk-table-striped

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

<table class="uk-table uk-table-striped">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    <tr>
    <tr>
      <td>0010</td>
      <td>りそな銀行</td>
    <tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    <tr>
  </tbody>
</table>
金融機関コード
コード金融機関
0001 みずほ銀行
0010 りそな銀行
9900 ゆうちょ銀行

.uk-table-hover

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

<table class="uk-table uk-table-hover">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    <tr>
    <tr>
      <td>0010</td>
      <td>りそな銀行</td>
    <tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    <tr>
  </tbody>
</table>
金融機関コード
コード金融機関
0001 みずほ銀行
0010 りそな銀行
9900 ゆうちょ銀行

.uk-table-small

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

<table class="uk-table uk-table-small">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    <tr>
    <tr>
      <td>0010</td>
      <td>りそな銀行</td>
    <tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    <tr>
  </tbody>
</table>
金融機関コード
コード金融機関
0001 みずほ銀行
0010 りそな銀行
9900 ゆうちょ銀行

.uk-table-large

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

<table class="uk-table uk-table-large">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    <tr>
    <tr>
      <td>0010</td>
      <td>りそな銀行</td>
    <tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    <tr>
  </tbody>
</table>
金融機関コード
コード金融機関
0001 みずほ銀行
0010 りそな銀行
9900 ゆうちょ銀行

.uk-table-justify

<table class="uk-table uk-table-justify">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    <tr>
    <tr>
      <td>0010</td>
      <td>りそな銀行</td>
    <tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    <tr>
  </tbody>
</table>
金融機関コード
コード金融機関
0001 みずほ銀行
0010 りそな銀行
9900 ゆうちょ銀行

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

Primary alert

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

Success alert

<div class="uk-alert-success" uk-alert>
Success alert
</div>
Success alert

Warning alert

<div class="uk-alert-warning" uk-alert>
Warning alert
</div>
Warning alert

Danger alert

<div class="uk-alert-danger" uk-alert>
Danger alert
</div>
Danger alert

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

Disabled button

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

Primary button

<button class="uk-button uk-button-primary">
  Primary
</button>

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 with width

<button class="uk-button uk-button-default uk-width-1-1">
  width-1-2
</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

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

Icon button

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

Available icons

Top margin

<div class="uk-margin-top uk-background-primary">
  Top margin
</div>
Top margin

Right margin

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

Bottom margin

<div class="uk-margin-bottom uk-background-primary">
  Bottom margin
</div>
Bottom margin

Left margin

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

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>

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