UIkit

UIkitとは

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

UIkit
ItemDescription
URL https://getuikit.com/
License MIT
Twitter @getuikit
UIkit Ver. 3.5.3
ModuleSize
uikit.min.css259KB
uikit.min.js129KB
uikit-icons.js62.4KB

使い方

Getting started with UIkit via 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.3.0/dist/css/uikit.min.css" />
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.0/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.0/dist/js/uikit-icons.min.js"></script>
  </head>
  <body>
    <!-- Your contents -->
  </body>
</html>

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

Button

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

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>

Code

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

Preview

Container

Code

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

Preview

Extra small container

Code

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

Preview

Small container

Code

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

Preview

Large container

Code

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

Preview

Expand container

Code

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

Preview

Small font

Code

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

Preview

Large font

Code

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

Preview

Muted text

Code

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

Preview

Emphasis text

Code

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

Preview

Primary text

Code

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

Preview

Secondary text

Code

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

Preview

Success text

Code

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

Preview

Warning text

Code

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

Preview

Danger text

Code

<div uk-grid>
  <div>1st grid</div>
  <div>2nd grid</div>
  <div>3rd grid</div>
</div>

Preview

1st grid
2nd grid
3rd grid

Code

<div class="uk-grid-divider" uk-grid>
  <div>1st grid</div>
  <div>2nd grid</div>
  <div>3rd grid</div>
</div>

Preview

1st grid
2nd grid
3rd grid

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

Icon button

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

Available icons

Code

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

Preview

Margin

Code

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

Preview

Top margin

Code

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

Preview

Right margin

Code

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

Preview

Bottom margin

Code

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

Preview

Left margin

Code

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

Preview

Padding

Code

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

Preview

Small padding

Code

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

Preview

Large padding

Code

<table class="uk-table">
  <thead>
    <tr>
      <th>Class</th>
      <th>Description</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>uk-table</td>
      <td>Table</td>
    <tr>
    <tr>
      <td>uk-table-divider</td>
      <td>Display a divider between table rows.</td>
    <tr>
  </tbody>
</table>

Preview

Table classes
ClassDescription
uk-table Table
uk-table-divider Display a divider between table rows.

Code

<table class="uk-table uk-table-divider">
  <thead>
    <tr>
      <th>Class</th>
      <th>Description</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>uk-table</td>
      <td>Table</td>
    <tr>
    <tr>
      <td>uk-table-divider</td>
      <td>Display a divider between table rows.</td>
    <tr>
  </tbody>
</table>

Preview

Table classes
ClassDescription
uk-table Table
uk-table-divider Display a divider between table rows.

Code

<table class="uk-table uk-table-striped">
  <thead>
    <tr>
      <th>Class</th>
      <th>Description</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>uk-table</td>
      <td>Table</td>
    <tr>
    <tr>
      <td>uk-table-divider</td>
      <td>Display a divider between table rows.</td>
    <tr>
    <tr>
      <td>uk-table-striped</td>
      <td>Add zebra-striping to a table.</td>
    <tr>
    <tr>
      <td>uk-table-hover</td>
      <td>Display a hover state on table rows.</td>
    <tr>
  </tbody>
</table>

Preview

Table classes
ClassDescription
uk-table Table
uk-table-divider Display a divider between table rows.
uk-table-striped Add zebra-striping to a table.
uk-table-hover Display a hover state on table rows.

Code

<table class="uk-table uk-table-hover">
  <thead>
    <tr>
      <th>Class</th>
      <th>Description</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>uk-table</td>
      <td>Table</td>
    <tr>
    <tr>
      <td>uk-table-hover</td>
      <td>Display a hover state on table rows.</td>
    <tr>
  </tbody>
</table>

Preview

Table classes
ClassDescription
uk-table Table
uk-table-hover Display a hover state on table rows.

Code

<table class="uk-table uk-table-small">
  <thead>
    <tr>
      <th>Class</th>
      <th>Description</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>uk-table</td>
      <td>Table</td>
    <tr>
    <tr>
      <td>uk-table-small</td>
      <td>Small table</td>
    <tr>
  </tbody>
</table>

Preview

Table classes
ClassDescription
uk-table Table
uk-table-small Small table

Code

<table class="uk-table uk-table-large">
  <thead>
    <tr>
      <th>Class</th>
      <th>Description</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>uk-table</td>
      <td>Table</td>
    <tr>
    <tr>
      <td>uk-table-large</td>
      <td>Large table</td>
    <tr>
  </tbody>
</table>

Preview

Table classes
ClassDescription
uk-table Table
uk-table-large Large table

Code

<table class="uk-table uk-table-justify">
  <thead>
    <tr>
      <th>Class</th>
      <th>Description</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>uk-table</td>
      <td>Table</td>
    <tr>
    <tr>
      <td>uk-table-justify</td>
      <td>Remove the outer padding of the first and last column.</td>
    <tr>
  </tbody>
</table>

Preview

Table classes
ClassDescription
uk-table Table
uk-table-justify Remove the outer padding of the first and last column.