Pure.css

Yahoo!が開発したCSSフレームワーク「Pure.css」の使い方をご紹介します。このページ自体もPure.cssを使っているので、そのままサンプルとなっています。

CSSフレームワーク

Pure.css
公式サイト https://purecss.io/
開発者 Yahoo! Inc.
ライセンス Yahoo BSD
グリッド 24列
GitHub stars 22.6k
Pure.css v3.0.0
モジュールサイズ
pure-min.css 15.3KB
grids-responsive-min.css 13.9KB

使い方

はじめに Button Form
Grid
Media Query Image
Menu Table

CDN

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

<!DOCTYPE html>
<html>
  <head>
    <!-- ビューポート -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Pure.css -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css"
          integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls"
          crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css">
  </head>
</html>

.pure-button

Pure.cssでボタンを作成するには、pure-buttonクラスを指定する。

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

.pure-button-primary

Pure.cssで優先ボタンを作成するには、pure-buttonクラスに加えてpure-button-primaryクラスを指定する。

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

.pure-button-disabled

Pure.cssで無効なボタンを作成するには、pure-buttonクラスに加えてpure-button-disabledクラスを指定する。

<a class="pure-button pure-button-disabled" href="#">Link</a>
<button class="pure-button pure-button-disabled">Button</button>
Link

button要素の場合は、pure-button-disabledクラスを指定する代わりに、disabled属性を指定してもよい。

<button class="pure-button" disabled>Button</button>

.pure-button-active

Pure.cssでアクティブなボタンを作成するには、pure-buttonクラスに加えてpure-button-activeクラスを指定する。

<a class="pure-button pure-button-active" href="#">Llink</a>
<button class="pure-button pure-button-active">Button</button>
Link

.pure-button-group

Pure.cssでボタンのグループを作成するには、ボタンの親要素にpure-button-groupクラスを指定する。

<div class="pure-button-group">
  <button class="pure-button">First</button>
  <button class="pure-button">Second</button>
  <button class="pure-button">Third</button>
</div>

.pure-form

Pure.cssでフォームを作成するには、form要素にpure-formクラスを指定する。

<form class="pure-form">
  <fieldset>
    <legend>Sign in</legend>
    <input id="email" type="email" placeholder="Email">
    <input type="password" placeholder="Password">
    <button type="submit" class="pure-button pure-button-primary">Sign in</button>
  </fieldset>
</form/
Sign in

.pure-form-stacked

Pure.cssでフォーム内の各要素を縦に積み重ねる場合は、pure-formクラスに加えて、pure-form-stackedクラスを指定する。

<form class="pure-form pure-form-stacked">
  <fieldset>
    <legend>Sign in</legend>
    <label for="email">Email</label>
    <input id="email" type="email" placeholder="Email">
    <label for="password">Password</label>
    <input id="password" type="password" placeholder="Password">
    <button type="submit" class="pure-button pure-button-primary">Sign in</button>
  </fieldset>
</form>
Sign in

.pure-form-aligned

Pure.cssでフォームのラベルと入力フィールドを表のように配置するには、pure-formクラスに加えて、pure-form-alignedクラスを指定する。

<form class="pure-form pure-form-aligned">
  <fieldset>
    <legend>Sign in</legend>
    <div class="pure-control-group">
      <label for="email">Email</label>
      <input id="email" type="email" placeholder="Email">
    </div>
    <div class="pure-control-group">
      <label for="password">Password</label>
      <input id="password" type="password" placeholder="Password">
    </div>
    <div class="pure-controls">
      <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </div>
  </fieldset>
</form>
Sign in

.pure-input-1

テキスト入力フィールドの横幅を親要素と同じにするには、Pure.css の pure-input-1 クラスを指定する。

<form class="pure-form">
  <input class="pure-input-1" type="text" placeholder="pure-input-1">
</form>

.pure-input-1-2

テキスト入力フィールドの横幅を親要素の2分の1にするには、Pure.css の pure-input-1-2 クラスを指定する。

<form class="pure-form">
  <input class="pure-input-1-2" type="text" placeholder="pure-input-1-2">
</form>

.pure-input-1-3

テキスト入力フィールドの横幅を親要素の3分の1にするには、Pure.css の pure-input-1-3 クラスを指定する。

<form class="pure-form">
  <input class="pure-input-1-3" type="text" placeholder="pure-input-1-3">
</form>

.pure-input-2-3

テキスト入力フィールドの横幅を親要素の3分の2にするには、Pure.css の pure-input-2-3 クラスを指定する。

<form class="pure-form">
  <input class="pure-input-2-3" type="text" placeholder="pure-input-2-3">
</form>

.pure-input-1-4

テキスト入力フィールドの横幅を親要素の4分の1にするには、Pure.css の pure-input-1-4 クラスを指定する。

<form class="pure-form">
  <input class="pure-input-1-4" type="text" placeholder="pure-input-1-4">
</form>

.pure-input-3-4

テキスト入力フィールドの横幅を親要素の4分の3にするには、Pure.css の pure-input-3-4 クラスを指定する。

<form class="pure-form">
  <input class="pure-input-3-4" type="text" placeholder="pure-input-3-4">
</form>

required

テキスト入力フィールドを入力必須にするには、required 属性を指定する。Pure.css のクラスを指定する必要はない。

<form class="pure-form">
  <input type="text" required>
</form>

disabled

テキスト入力フィールドを無効にするには、disabled 属性を指定する。Pure.css のクラスを指定する必要はない。

<form class="pure-form">
  <input type="text" disabled>
</form>

readonly

テキスト入力フィールドを読み取り専用にするには、readonly 属性を指定する。Pure.css のクラスを指定する必要はない。

<form class="pure-form">
  <input type="text" value="Readonly" readonly>
</form>

.pure-input-rounded

テキスト入力フィールドの角を丸くするには、Pure.css の pure-input-rounded クラスを指定する。

<form class="pure-form">
  <input class="pure-input-rounded" type="text">
</form>

5列グリッドレイアウト

Pure.css のグリッドレイアウトシステムにおいて横幅を5分割するには、以下に示すクラスを指定する。

5列グリッドレイアウト
クラス 説明
pure-u-1-5 1/5
pure-u-2-5 2/5
pure-u-3-5 3/5
pure-u-4-5 4/5
pure-u-5-5 5/5

Pure.cssにおける5列グリッドレイアウトの例を以下に示す。

<div class="pure-g">
  <div class="pure-u-1-5" style="background-color: aquamarine">1/5</div>
  <div class="pure-u-4-5" style="background-color: whitesmoke"></div>
</div>
<div class="pure-g">
  <div class="pure-u-2-5" style="background-color: aquamarine">2/5</div>
  <div class="pure-u-3-5" style="background-color: whitesmoke"></div>
</div>
<div class="pure-g">
  <div class="pure-u-3-5" style="background-color: aquamarine">3/5</div>
  <div class="pure-u-2-5" style="background-color: whitesmoke"></div>
</div>
<div class="pure-g">
  <div class="pure-u-4-5" style="background-color: aquamarine">4/5</div>
  <div class="pure-u-1-5" style="background-color: whitesmoke"></div>
</div>
<div class="pure-g">
  <div class="pure-u-5-5" style="background-color: aquamarine">5/5</div>
</div>
1/5
2/5
3/5
4/5
5/5

24列グリッドレイアウト

Pure.css のグリッドレイアウトシステムにおいて横幅を24分割するには、以下に示すクラスを指定する。

24列グリッドレイアウト
クラス 説明
pure-u-1-24 1/24
pure-u-2-24 2/24
pure-u-3-24 3/24
pure-u-4-24 4/24
pure-u-5-24 5/24
pure-u-6-24 6/24
pure-u-7-24 7/24
pure-u-8-24 8/24
pure-u-9-24 9/24
pure-u-10-24 10/24
pure-u-11-24 11/24
pure-u-12-24 12/24
pure-u-13-24 13/24
pure-u-14-24 14/24
pure-u-15-24 15/24
pure-u-16-24 16/24
pure-u-17-24 17/24
pure-u-18-24 18/24
pure-u-19-24 19/24
pure-u-20-24 20/24
pure-u-21-24 21/24
pure-u-22-24 22/24
pure-u-23-24 23/24
pure-u-24-24 24/24

Pure.cssにおける24列グリッドレイアウトの例を以下に示す。

<div class="pure-g">
  <div class="pure-u-1-24" style="background-color: turquoise">1/24</div>
  <div class="pure-u-23-24" style="background-color: whitesmoke"></div>
</div>
<div class="pure-g">
  <div class="pure-u-2-24" style="background-color: turquoise">2/24</div>
  <div class="pure-u-22-24" style="background-color: whitesmoke"></div>
</div>
<div class="pure-g">
  <div class="pure-u-3-24" style="background-color: turquoise">3/24</div>
  <div class="pure-u-21-24" style="background-color: whitesmoke"></div>
</div>
<div class="pure-g">
  <div class="pure-u-4-24" style="background-color: turquoise">4/24</div>
  <div class="pure-u-20-24" style="background-color: whitesmoke"></div>
</div>
<div class="pure-g">
  <div class="pure-u-5-24" style="background-color: turquoise">5/24</div>
  <div class="pure-u-19-24" style="background-color: whitesmoke"></div>
</div>
<div class="pure-g">
  <div class="pure-u-6-24" style="background-color: turquoise">6/24</div>
  <div class="pure-u-18-24" style="background-color: whitesmoke"></div>
</div>
<div class="pure-g">
  <div class="pure-u-7-24" style="background-color: turquoise">7/24</div>
  <div class="pure-u-17-24" style="background-color: whitesmoke"></div>
</div>
<div class="pure-g">
  <div class="pure-u-8-24" style="background-color: turquoise">8/24</div>
  <div class="pure-u-16-24" style="background-color: whitesmoke"></div>
</div>
<div class="pure-g">
  <div class="pure-u-9-24" style="background-color: turquoise">9/24</div>
  <div class="pure-u-15-24" style="background-color: whitesmoke"></div>
</div>
<div class="pure-g">
  <div class="pure-u-10-24" style="background-color: turquoise">10/24</div>
  <div class="pure-u-14-24" style="background-color: whitesmoke"></div>
</div>
<div class="pure-g">
  <div class="pure-u-11-24" style="background-color: turquoise">11/24</div>
  <div class="pure-u-13-24" style="background-color: whitesmoke"></div>
</div>
<div class="pure-g">
  <div class="pure-u-12-24" style="background-color: turquoise">12/24</div>
  <div class="pure-u-12-24" style="background-color: whitesmoke"></div>
</div>
1/24
2/24
3/24
4/24
5/24
6/24
7/24
8/24
9/24
10/24
11/24
12/24
13/24
14/24
15/24
16/24
17/24
18/24
19/24
20/24
21/24
22/24
23/24
24/24

.pure-u-sm-*

Pure.css のグリッドレイアウトシステムにおいて、画面サイズが小さい（568px以上、768px未満）ときのサイズを指定するには、pure-u-sm- 接頭辞を付ける。

メディアクエリ
クラス名の接頭辞 適用条件
pure-u-* 常に
pure-u-sm-* ≥ 568px
pure-u-md-* ≥ 768px
pure-u-lg-* ≥ 1024px
pure-u-xl-* ≥ 1280px
pure-u-xxl-* ≥ 1920px
pure-u-xxxl-* ≥ 2560px
pure-u-x4k-* ≥ 3840px

まずデフォルトのサイズを指定して、次に画面が大きいときのサイズを指定する。

原則として幅100%、画面幅が568px以上の場合は幅25%で表示する例を以下に示す。

<div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1-4">1</div>
  <div class="pure-u-1 pure-u-sm-1-4">2</div>
  <div class="pure-u-1 pure-u-sm-1-4">3</div>
  <div class="pure-u-1 pure-u-sm-1-4">4</div>
</div>
1
2
3
4

.pure-u-md-*

Pure.css のグリッドレイアウトシステムにおいて、画面サイズが中程度（768px以上、1024px未満）ときのサイズを指定するには、pure-u-md- 接頭辞を付ける。

原則として幅100%、画面幅が768px以上の場合は幅20%で表示する例を以下に示す。

<div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-5">1</div>
  <div class="pure-u-1 pure-u-md-1-5">2</div>
  <div class="pure-u-1 pure-u-md-1-5">3</div>
  <div class="pure-u-1 pure-u-md-1-5">4</div>
  <div class="pure-u-1 pure-u-md-1-5">5</div>
</div>
1
2
3
4
5

.pure-u-lg-*

Pure.css のグリッドレイアウトシステムにおいて、画面サイズが大きい（1024px以上、1280px未満）ときのサイズを指定するには、pure-u-lg- 接頭辞を付ける。

<div class="pure-g">
  <div class="pure-u-1 pure-u-lg-1-6">1</div>
  <div class="pure-u-1 pure-u-lg-1-6">2</div>
  <div class="pure-u-1 pure-u-lg-1-6">3</div>
  <div class="pure-u-1 pure-u-lg-1-6">4</div>
  <div class="pure-u-1 pure-u-lg-1-6">5</div>
  <div class="pure-u-1 pure-u-lg-1-6">6</div>
</div>
1
2
3
4
5
6

.pure-u-xl-*

Pure.css のグリッドレイアウトシステムにおいて、画面サイズが非常に大きい（1280px以上）ときのサイズを指定するには、pure-u-xl- 接頭辞を付ける。

<div class="pure-g">
  <div class="pure-u-1 pure-u-xl-1-8">1</div>
  <div class="pure-u-1 pure-u-xl-1-8">2</div>
  <div class="pure-u-1 pure-u-xl-1-8">3</div>
  <div class="pure-u-1 pure-u-xl-1-8">4</div>
  <div class="pure-u-1 pure-u-xl-1-8">5</div>
  <div class="pure-u-1 pure-u-xl-1-8">6</div>
  <div class="pure-u-1 pure-u-xl-1-8">7</div>
  <div class="pure-u-1 pure-u-xl-1-8">8</div>
</div>
1
2
3
4
5
6
7
8

.pure-u-xxl-*

Pure.css のグリッドレイアウトシステムにおいて、画面サイズが非常に大きい（1920px以上）ときのサイズを指定するには、pure-u-xxl- 接頭辞を付ける。

<div class="pure-g">
  <div class="pure-u-1 pure-u-xxl-1-12">1</div>
  <div class="pure-u-1 pure-u-xxl-1-12">2</div>
  <div class="pure-u-1 pure-u-xxl-1-12">3</div>
  <div class="pure-u-1 pure-u-xxl-1-12">4</div>
  <div class="pure-u-1 pure-u-xxl-1-12">5</div>
  <div class="pure-u-1 pure-u-xxl-1-12">6</div>
  <div class="pure-u-1 pure-u-xxl-1-12">7</div>
  <div class="pure-u-1 pure-u-xxl-1-12">8</div>
  <div class="pure-u-1 pure-u-xxl-1-12">9</div>
  <div class="pure-u-1 pure-u-xxl-1-12">10</div>
  <div class="pure-u-1 pure-u-xxl-1-12">11</div>
  <div class="pure-u-1 pure-u-xxl-1-12">12</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

.pure-img

画像をレスポンシブイメージにするには、pure-img クラスを指定する。

<img class="pure-img" src="/images/css.webp" alt="CSS">
CSS

Pure.cssでメニューを作成するには、以下に示すクラスを使う。

メニューのクラス
クラス 説明
pure-menu メニューのコンテナ
pure-menu-list メニューのリスト
pure-menu-item リスト項目
pure-menu-item リスト項目のリンク

Pure.cssでメニューを作成する例を以下に示す。

<div class="pure-menu">
  <ul class="pure-menu-list">
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/bootstrap/">Bootstrap</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/bulma/">Bulma</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/materialize/">Materialize</a>
    </li>
  </ul>
</div>
<div class="pure-menu">
  <ul class="pure-menu-list">
    <li class="pure-menu-heading">Framework</li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/milligram/">Milligram</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/primer/">Primer CSS</a>
    </li>
  </ul>
</div>
<div class="pure-menu">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
      <a class="pure-menu-link" href="#">Pure.css</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/semantic/">Semantic UI</a>
    </li>
  </ul>
</div>
<div class="pure-menu">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-disabled">
      Semantic UI
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/skeleton/">Skeleton</a>
    </li>
  </ul>
</div>
<div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/spectre/">Spectre.css</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/tachyons/">Tachyons</a>
    </li>
  </ul>
</div>

子メニューを持たせるには、pure-menu-has-children クラスを指定する。

<div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
      <a class="pure-menu-link" href="#MENU">Framework</a>
      <ul class="pure-menu-children">
        <li class="pure-menu-item">
          <a class="pure-menu-link" href="/css/tailwind/">Tailwind CSS</a>
        </li>
        <li class="pure-menu-item">
          <a class="pure-menu-link" href="/css/uikit/">UIkit</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

メニューをスクロール可能にするには、pure-menu-scrollable クラスを指定する。

<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
  <ul class="pure-menu-list">
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/bootstrap/">Bootstrap</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/bulma/">Bulma</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/materialize/">Materialize</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/milligram/">Milligram</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/primer/">Primer CSS</a>
    </li>
    <li class="pure-menu-item pure-menu-selected">
      <a class="pure-menu-link" href="#">Pure.css</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/semantic/">Semantic UI</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/skeleton/">Skeleton</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/spectre/">Spectre.css</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/tachyons/">Tachyons</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/tailwind/">Tailwind CSS</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/uikit/">UIkit</a>
    </li>
    <li class="pure-menu-item">
      <a class="pure-menu-link" href="/css/foundation/">Zurb Foundation</a>
    </li>
  </ul>
</div>

.pure-table

<table class="pure-table">
  <caption>メディアクエリ</caption>
  <thead>
    <tr>
      <th>クラス名</th>
      <th>摘要</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>pure-u-*</th>
      <th>常に</th>
    </tr>
    <tr>
      <th>pure-u-sm-*</th>
      <th>≥ 568px</th>
    </tr>
    <tr>
      <th>pure-u-md-*</th>
      <th>≥ 768px</th>
    </tr>
    <tr>
      <th>pure-u-lg-*</th>
      <th>≥ 1024px</th>
    </tr>
    <tr>
      <th>pure-u-xl-*</th>
      <th>≥ 1280px</th>
    </tr>
    <tr>
      <th>pure-u-xxl-*</th>
      <th>≥ 1920px</th>
    </tr>
  </tbody>
</table>
メディアクエリ
クラス名 摘要
pure-u-* 常に
pure-u-sm-* ≥ 568px
pure-u-md-* ≥ 768px
pure-u-lg-* ≥ 1024px
pure-u-xl-* ≥ 1280px
pure-u-xxl-* ≥ 1920px

.pure-table-bordered

<table class="pure-table pure-table-bordered">
  <caption>メディアクエリ</caption>
  <thead>
    <tr>
      <th>クラス名</th>
      <th>摘要</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>pure-u-*</th>
      <th>常に</th>
    </tr>
    <tr>
      <th>pure-u-sm-*</th>
      <th>≥ 568px</th>
    </tr>
    <tr>
      <th>pure-u-md-*</th>
      <th>≥ 768px</th>
    </tr>
    <tr>
      <th>pure-u-lg-*</th>
      <th>≥ 1024px</th>
    </tr>
    <tr>
      <th>pure-u-xl-*</th>
      <th>≥ 1280px</th>
    </tr>
    <tr>
      <th>pure-u-xxl-*</th>
      <th>≥ 1920px</th>
    </tr>
  </tbody>
</table>
メディアクエリ
クラス名 摘要
pure-u-* 常に
pure-u-sm-* ≥ 568px
pure-u-md-* ≥ 768px
pure-u-lg-* ≥ 1024px
pure-u-xl-* ≥ 1280px
pure-u-xxl-* ≥ 1920px

.pure-table-horizontal

<table class="pure-table pure-table-horizontal">
  <caption>メディアクエリ</caption>
  <thead>
    <tr>
      <th>クラス名</th>
      <th>摘要</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>pure-u-*</th>
      <th>常に</th>
    </tr>
    <tr>
      <th>pure-u-sm-*</th>
      <th>≥ 568px</th>
    </tr>
    <tr>
      <th>pure-u-md-*</th>
      <th>≥ 768px</th>
    </tr>
    <tr>
      <th>pure-u-lg-*</th>
      <th>≥ 1024px</th>
    </tr>
    <tr>
      <th>pure-u-xl-*</th>
      <th>≥ 1280px</th>
    </tr>
    <tr>
      <th>pure-u-xxl-*</th>
      <th>≥ 1920px</th>
    </tr>
  </tbody>
</table>
メディアクエリ
クラス名 摘要
pure-u-* 常に
pure-u-sm-* ≥ 568px
pure-u-md-* ≥ 768px
pure-u-lg-* ≥ 1024px
pure-u-xl-* ≥ 1280px
pure-u-xxl-* ≥ 1920px

.pure-table-odd

trタグにpure-table-oddクラスを指定すると、その行の色がグレーに変わる。

<table class="pure-table">
  <caption>メディアクエリ</caption>
  <thead>
    <tr>
      <th>クラス名</th>
      <th>摘要</th>
    </tr>
  </thead>
  <tbody>
    <tr class="pure-table-odd">
      <th>pure-u-*</th>
      <th>常に</th>
    </tr>
    <tr>
      <th>pure-u-sm-*</th>
      <th>≥ 568px</th>
    </tr>
    <tr class="pure-table-odd">
      <th>pure-u-md-*</th>
      <th>≥ 768px</th>
    </tr>
    <tr>
      <th>pure-u-lg-*</th>
      <th>≥ 1024px</th>
    </tr>
    <tr class="pure-table-odd">
      <th>pure-u-xl-*</th>
      <th>≥ 1280px</th>
    </tr>
    <tr>
      <th>pure-u-xxl-*</th>
      <th>≥ 1920px</th>
    </tr>
  </tbody>
</table>
メディアクエリ
接頭辞 摘要
pure-u-* 常に
pure-u-sm-* ≥ 568px
pure-u-md-* ≥ 768px
pure-u-lg-* ≥ 1024px
pure-u-xl-* ≥ 1280px
pure-u-xxl-* ≥ 1920px