Pure.cssの使い方についての覚書

夕月悠里

2020年6月29日 11:19

次の開発で軽量フレームワークのPure.cssを使おうと思うので勉強がてら使い方をまとめておく。

大体は本家の翻訳

■Pure.cssとは

Yahoo!が開発した軽量のレスポンシブCSSフレームワーク。

gzipで3.7KB、非圧縮でも30KB程度。

色々なコンポーネントが用意されてあり、カスタマイズ、拡張が容易。

GitHubは以下。

■始め方

CDNの読み込み。

<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">

もしくはダウンロード。

Viewportをmetaに追加。

<meta name="viewport" content="width=device-width, initial-scale=1">

Pure Gridsについて理解する。

<div class="pure-g">
   <div class="pure-u-1-3"><p>Thirds</p></div>
   <div class="pure-u-1-3"><p>Thirds</p></div>
   <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

一番上がpure-g

下の階層はpure-u-*

レスポンシブ対応のグリッドは以下を含める

<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css">

.pure-u-sm-　≥ 568px

.pure-u-md-　≥ 768px

.pure-u-lg-　≥ 1024px

.pure-u-xl-　≥ 1280px

基本はスマホ。

使用するとしたら、568 ~ タブレット 1024　~ PCの対応がいいのかな。

smとlgの設定がよさそうか。

■レイアウト

レイアウトはいくつかサンプルが載っている。それのソースコードを見て学ぶといいらしい。

1. Blog
2. Email
3. フォトギャラリー
4.ランディングページ
5.価格表
6.レスポンスサイドメニュー
7.レスポンス水平/垂直メニュー

それぞれで必要なコンポーネントが記載されている。サンプルページとソースコードが用意されているので自分が作りたいレイアウトがあるなら参考にするといいかも。

■ベース

ResetCSSとして使用されるのが、Normalize.css。これでブラウザ間の差異をなくしている。

またそれ以外にも追加されたスタイルが含まれている。

要素の非表示

<input type="text" name="_csrf" hidden>

hiddenを付与。

レスポンシブ画像

<img class="pure-img" src="...">

pure-imgを付与する。

hiddenはなかなか便利かも。

■グリッド

グリッドクラス（pure-g）とユニットクラス（pure-uまたはpure-u-*）で構成。最大24分割で設定できる。

単位は分数、pure-u-1-2　＝＞ 1/2 = 50%
pure-u-1-5 ＝＞ 1/5 = 20%

<div class="pure-g">
   <div class="pure-u-1-3"><p>Thirds</p></div>
   <div class="pure-u-1-3"><p>Thirds</p></div>
   <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

は1/3で三分割される。

レスポンシブグリッドは別CSSから読み込む。

<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css" />

<div class="pure-g">
   <div class="pure-u-1 pure-u-md-1-3"> ... </div>
   <div class="pure-u-1 pure-u-md-1-3"> ... </div>
   <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>

これだと、小さな画面では100%幅になるが、md 768 px以上では三分割される。

グリッドユニットへのpaddingとボーダーを適用する場合。

グリッド内にdivをネスとしてそこにスタイリングする。

<div class="pure-g">
   <div class="pure-u-1-2">
       <div class="l-box"> ... </div>
   </div>
   <div class="pure-u-1-2">
       <div class="l-box"> ... </div>
   </div>
</div>

l-boxに対して適用。

■フォーム

pure-formを利用する。

<form class="pure-form">
   <fieldset>
       <legend>A compact inline form</legend>
       <input type="email" placeholder="Email" />
       <input type="password" placeholder="Password" />
       <label for="default-remember">
           <input type="checkbox" id="default-remember" />Remember me</label>
       <button type="submit" class="pure-button pure-button-primary">Sign in</button>
   </fieldset>
</form>

なお、fieldsetはフォームをグループ化させるもの、legendはグループ化された項目のタイトル。

デフォルトでは横並びになる。

pure-form-stackedを付与すると積み重ねとなる。

<form class="pure-form pure-form-stacked">
   <fieldset>
       <legend>A Stacked Form</legend>
       <label for="stacked-email">Email</label>
       <input type="email" id="stacked-email" placeholder="Email" />
       <span class="pure-form-message">This is a required field.</span>
       <label for="stacked-password">Password</label>
       <input type="password" id="stacked-password" placeholder="Password" />
       <label for="stacked-state">State</label>
       <select id="stacked-state">
           <option>AL</option>
           <option>CA</option>
           <option>IL</option>
       </select>
       <label for="stacked-remember" class="pure-checkbox">
           <input type="checkbox" id="stacked-remember" /> Remember me</label>
       <button type="submit" class="pure-button pure-button-primary">Sign in</button>
   </fieldset>
</form>

pure-form-alignedでラベルと入力欄が整列する。

<form class="pure-form pure-form-aligned">
   <fieldset>
       <div class="pure-control-group">
           <label for="aligned-name">Username</label>
           <input type="text" id="aligned-name" placeholder="Username" />
           <span class="pure-form-message-inline">This is a required field.</span>
       </div>
       <div class="pure-control-group">
           <label for="aligned-password">Password</label>
           <input type="password" id="aligned-password" placeholder="Password" />
       </div>
       <div class="pure-control-group">
           <label for="aligned-email">Email Address</label>
           <input type="email" id="aligned-email" placeholder="Email Address" />
       </div>
       <div class="pure-control-group">
           <label for="aligned-foo">Supercalifragilistic Label</label>
           <input type="text" id="aligned-foo" placeholder="Enter something here..." />
       </div>
       <div class="pure-controls">
           <label for="aligned-cb" class="pure-checkbox">
               <input type="checkbox" id="aligned-cb" /> I&#x27;ve read the terms and conditions</label>
           <button type="submit" class="pure-button pure-button-primary">Submit</button>
       </div>
   </fieldset>
</form>

そのさい、pure-control-groupをグループのラッパーに付与する。

マルチカラムフォームはグリッドを使って実現する。

<form class="pure-form pure-form-stacked">
   <fieldset>
       <legend>Legend</legend>
       <div class="pure-g">
           <div class="pure-u-1 pure-u-md-1-3">
               <label for="multi-first-name">First Name</label>
               <input type="text" id="multi-first-name" class="pure-u-23-24" />
           </div>
           <div class="pure-u-1 pure-u-md-1-3">
               <label for="multi-last-name">Last Name</label>
               <input type="text" id="multi-last-name" class="pure-u-23-24" />
           </div>
           <div class="pure-u-1 pure-u-md-1-3">
               <label for="multi-email">E-Mail</label>
               <input type="email" id="multi-email" class="pure-u-23-24" required="" />
           </div>
           <div class="pure-u-1 pure-u-md-1-3">
               <label for="multi-city">City</label>
               <input type="text" id="multi-city" class="pure-u-23-24" />
           </div>
           <div class="pure-u-1 pure-u-md-1-3">
               <label for="multi-state">State</label>
               <select id="multi-state" class="pure-input-1-2">
                   <option>AL</option>
                   <option>CA</option>
                   <option>IL</option>
               </select>
           </div>
       </div>
       <label for="multi-terms" class="pure-checkbox">
           <input type="checkbox" id="multi-terms" /> I&#x27;ve read the terms and conditions</label>
       <button type="submit" class="pure-button pure-button-primary">Submit</button>
   </fieldset>
</form>

なお、pure-form-stackedを付与する

グループインプット

フィールドセットごとにまとめる場合はpure-groupを付与する。

<form class="pure-form">
   <fieldset class="pure-group">
       <input type="text" class="pure-input-1-2" placeholder="Username" />
       <input type="text" class="pure-input-1-2" placeholder="Password" />
       <input type="email" class="pure-input-1-2" placeholder="Email" />
   </fieldset>
   <fieldset class="pure-group">
       <input type="text" class="pure-input-1-2" placeholder="A title" />
       <textarea class="pure-input-1-2" placeholder="Textareas work too"></textarea>
   </fieldset>
   <button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>

インプットの大きさを変える場合はグリッドと同じようにpure-input-*でサイズ変更できる。*は分数

<form class="pure-form">
   <input type="text" class="pure-input-1" placeholder=".pure-input-1" />
   <br />
   <input type="text" class="pure-input-2-3" placeholder=".pure-input-2-3" />
   <br />
   <input type="text" class="pure-input-1-2" placeholder=".pure-input-1-2" />
   <br />
   <input type="text" class="pure-input-1-3" placeholder=".pure-input-1-3" />
   <br />
   <input type="text" class="pure-input-1-4" placeholder=".pure-input-1-4" />
   <br />
</form>

必須入力欄はrequiredを付与する。

<form class="pure-form">
   <input type="email" placeholder="Requires an email" required="" />
</form>

入力不可にする場合はdisabledを付与。

<form class="pure-form">
   <input type="text" placeholder="Disabled input here..." disabled="" />
</form>

読み取り専用にする場合はreadonlyを付与

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

丸くする場合はpure-input-roundedを付与

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

Checkbox、ラジオボタンの場合はpure-checkbox, pure-radioを付ける

<form class="pure-form">
   <label for="checkbox-radio-option-one" class="pure-checkbox">
       <input type="checkbox" id="checkbox-radio-option-one" value="" />Here&#x27;s option one.</label>
   <label for="checkbox-radio-option-two" class="pure-radio">
       <input type="radio" id="checkbox-radio-option-two" name="optionsRadios" value="option1" checked="" />Here&#x27;s a radio button. You can choose this one..</label>
   <label for="checkbox-radio-option-three" class="pure-radio">
       <input type="radio" id="checkbox-radio-option-three" name="optionsRadios" value="option2" />..Or this one!</label>
</form>

使えそうなのは縦に並べるものか、グリッドかな。

必須項目や入力不可にするのは簡単でよさそう。

■ボタン

デフォルトはpure-buttonを付与する。なお、<a>か<button>どちらでも使える。

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

選択不可

pure-button-disabledかdisabledを付与する。

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

アクティブボタン

pure-button-activeを付与する。

<a class="pure-button pure-button-active" href="#">An Active Button</a>
<button class="pure-button pure-button-active">An Active Button</button>

主要ボタン

pure-button-primaryを付与する。

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

ボタンのカスタマイズ

button-fooを作って適応させる。

<div>
   <style scoped="">
       .button-success,
       .button-error,
       .button-warning,
       .button-secondary {
           color: white;
           border-radius: 4px;
           text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
       }

       .button-success {
           background: rgb(28, 184, 65);
           /* this is a green */
       }

       .button-error {
           background: rgb(202, 60, 60);
           /* this is a maroon */
       }

       .button-warning {
           background: rgb(223, 117, 20);
           /* this is an orange */
       }

       .button-secondary {
           background: rgb(66, 184, 221);
           /* this is a light blue */
       }
   </style>
   <button class="button-success pure-button">Success Button</button>
   <button class="button-error pure-button">Error Button</button>
   <button class="button-warning pure-button">Warning Button</button>
   <button class="button-secondary pure-button">Secondary Button</button>
</div>

基本的には色合いで使用するのかな。

サイズも同様。

<div>
   <style scoped="">
       .button-xsmall {
           font-size: 70%;
       }

       .button-small {
           font-size: 85%;
       }

       .button-large {
           font-size: 110%;
       }

       .button-xlarge {
           font-size: 125%;
       }
   </style>
   <button class="button-xsmall pure-button">Extra Small Button</button>
   <button class="button-small pure-button">Small Button</button>
   <button class="pure-button">Regular Button</button>
   <button class="button-large pure-button">Large Button</button>
   <button class="button-xlarge pure-button">Extra Large Button</button>
</div>

この辺りは最初に決めておくといいのかもしれない。

組み合わせはそんなにないだろうし。

■テーブル

デフォルトテーブルはpure-tableを付与する。

<table class="pure-table">
   <thead>
       <tr>
           <th>#</th>
           <th>Make</th>
           <th>Model</th>
           <th>Year</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>1</td>
           <td>Honda</td>
           <td>Accord</td>
           <td>2009</td>
       </tr>
       <tr>
           <td>2</td>
           <td>Toyota</td>
           <td>Camry</td>
           <td>2012</td>
       </tr>
       <tr>
           <td>3</td>
           <td>Hyundai</td>
           <td>Elantra</td>
           <td>2010</td>
       </tr>
   </tbody>
</table>

ボーダーを付ける場合はpure-table-borderedを付与する。

<table class="pure-table pure-table-bordered">

水平線のみでいい場合はpure-table-horizontal

stripeにしたい場合はpure-table-oddを奇数版のtrに付与する。

<table class="pure-table">
   <thead>
       <tr>
           <th>#</th>
           <th>Make</th>
           <th>Model</th>
           <th>Year</th>
       </tr>
   </thead>
   <tbody>
       <tr class="pure-table-odd">
           <td>1</td>
           <td>Honda</td>
           <td>Accord</td>
           <td>2009</td>
       </tr>
       <tr>
           <td>2</td>
           <td>Toyota</td>
           <td>Camry</td>
           <td>2012</td>
       </tr>
       <tr class="pure-table-odd">
           <td>3</td>
           <td>Hyundai</td>
           <td>Elantra</td>
           <td>2010</td>
       </tr>
       <tr>
           <td>4</td>
           <td>Ford</td>
           <td>Focus</td>
           <td>2008</td>
       </tr>
       <tr class="pure-table-odd">
           <td>5</td>
           <td>Nissan</td>
           <td>Sentra</td>
           <td>2011</td>
       </tr>
       <tr>
           <td>6</td>
           <td>BMW</td>
           <td>M3</td>
           <td>2009</td>
       </tr>
       <tr class="pure-table-odd">
           <td>7</td>
           <td>Honda</td>
           <td>Civic</td>
           <td>2010</td>
       </tr>
       <tr>
           <td>8</td>
           <td>Kia</td>
           <td>Soul</td>
           <td>2010</td>
       </tr>
   </tbody>
</table>

■メニュー

デフォルトは縦に並ぶ。pure-menuを付与する。
なお、デフォルトでは100%の幅になるのでカスタム幅を指定する。

要素にはpure-menu-listとpure-menu-item、pure-menu-linkを付与する。

ヘッダーにはpure-menu-heading。

<style>
   .custom-restricted-width {
       /* To limit the menu width to the content of the menu: */
       display: inline-block;
       /* Or set the width explicitly: */
       /* width: 10em; */
   }
</style>
<div class="pure-menu custom-restricted-width">
   <span class="pure-menu-heading">Yahoo Sites</span>
   <ul class="pure-menu-list">
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Flickr</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Messenger</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Sports</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Finance</a>
       </li>
       <li class="pure-menu-heading">More Sites</li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Games</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">News</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">OMG!</a>
       </li>
   </ul>
</div>

横並びにするにはpure-menu-horizontalを付与する。

<div class="pure-menu pure-menu-horizontal">
   <a href="#" class="pure-menu-heading pure-menu-link">BRAND</a>
   <ul class="pure-menu-list">
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">News</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Sports</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Finance</a>
       </li>
   </ul>
</div>

選択済みはpure-menu-selected、選択不可はpure-menu-disabled

<div class="pure-menu pure-menu-horizontal">
   <ul class="pure-menu-list">
       <li class="pure-menu-item pure-menu-selected">
           <a href="#" class="pure-menu-link">Selected</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Normal</a>
       </li>
       <li class="pure-menu-item pure-menu-disabled">Disabled</li>
   </ul>
</div>

ドロップダウンをする場合はJavascriptで実装するのがおすすめらしい。

単にホバー時にサブメニューを表示させたいだけならpure-menu-allow-hover、ホバーさせたい子要素にpure-menu-has-childrenを付与する。

<div class="pure-menu pure-menu-horizontal">
   <ul class="pure-menu-list">
       <li class="pure-menu-item pure-menu-selected">
           <a href="#" class="pure-menu-link">Home</a>
       </li>
       <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
           <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
           <ul class="pure-menu-children">
               <li class="pure-menu-item">
                   <a href="#" class="pure-menu-link">Email</a>
               </li>
               <li class="pure-menu-item">
                   <a href="#" class="pure-menu-link">Twitter</a>
               </li>
               <li class="pure-menu-item">
                   <a href="#" class="pure-menu-link">Tumblr Blog</a>
               </li>
           </ul>
       </li>
   </ul>
</div>

垂直方向にも適用できる。

<div class="pure-menu custom-restricted-width">
   <ul class="pure-menu-list">
       <li class="pure-menu-item pure-menu-selected">
           <a href="#" class="pure-menu-link">Flickr</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Messenger</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Sports</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Finance</a>
       </li>
       <li class="pure-menu-item pure-menu-has-children">
           <a href="#" id="menuLink1" class="pure-menu-link">More</a>
           <ul class="pure-menu-children">
               <li class="pure-menu-item">
                   <a href="#" class="pure-menu-link">Autos</a>
               </li>
               <li class="pure-menu-item">
                   <a href="#" class="pure-menu-link">Flickr</a>
               </li>
               <li class="pure-menu-item pure-menu-has-children">
                   <a href="#" id="menuLink1" class="pure-menu-link">Even More</a>
                   <ul class="pure-menu-children">
                       <li class="pure-menu-item">
                           <a href="#" class="pure-menu-link">Foo</a>
                       </li>
                       <li class="pure-menu-item">
                           <a href="#" class="pure-menu-link">Bar</a>
                       </li>
                       <li class="pure-menu-item">
                           <a href="#" class="pure-menu-link">Baz</a>
                       </li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>
</div>

スクロール可能にしたい場合はpure-menu-scrollableを付与する。<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">

   <a href="#" class="pure-menu-link pure-menu-heading">Yahoo</a>
   <ul class="pure-menu-list">
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Home</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Flickr</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Messenger</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Sports</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Finance</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Autos</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Beauty</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Movies</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Small Business</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Cricket</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Tech</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">World</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">News</a>
       </li>
       <li class="pure-menu-item">
           <a href="#" class="pure-menu-link">Support</a>
       </li>
   </ul>
</div>

色々な使い方はレイアウトのサンプルを見るのがよさそう。

■拡張

スタイルはSMACSS（Scalable and Modular Architecture for CSS）の規則に沿って作られている。

コンセプトはデザインの中で繰り返されるパターンを体系化すること。

カテゴリーとしてベース、レイアウト、モジュール、状態、テーマに分けられる。

ベースはサイト全体のスタイル。リセットCSSによるもの。

レイアウトはページのエリアわけ。Gridシステムが該当。

モジュール、再利用可能なパーツの見た目定義。

状態 is-を付けて状態を定義する。Javascriptで付けはずし。

テーマサイトの見た目を統一させるもの。なお色に関するスタイルは別にしておく。

クラス名の規則として、標準クラス名pureを持ち、コンポーネントごとに分かれている。デフォルトからの変化は別のクラスを呼び出すことで保守性が向上する。

拡張するときはcustomを付与して独自のスタイルにする。

<form class="form-custom pure-form"></form>
/* add your custom styles in this selector */
.form-custom { ... }

良ければサポートお願いします。サポート費用はサーバー維持などの開発費に使わせていただきます。