UIkit

UIkitとは

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

UIkit
項目内容
URL https://getuikit.com/
License MIT
Twitter @getuikit
UIkit Ver. 3.5.9
モジュールサイズ
uikit.min.css264KB
uikit.min.js128KB
uikit-icons.js62.5KB

使い方

CDN

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

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

.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 りそな銀行

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

Divided table

<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 りそな銀行

Striped table

<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>
  </tbody>
</table>
銀行
コード名前
0001 みずほ銀行
0010 りそな銀行

Hover table

<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>
  </tbody>
</table>
銀行
コード名前
0001 みずほ銀行
0010 りそな銀行

Small table

<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>
  </tbody>
</table>
銀行
コード名前
0001 みずほ銀行
0010 りそな銀行

Large table

<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>
  </tbody>
</table>
銀行
コード名前
0001 みずほ銀行
0010 りそな銀行

Justify table

<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>
  </tbody>
</table>
銀行
コード名前
0001 みずほ銀行
0010 りそな銀行