Yahoo Pure を使ってみる

CATEGORY: HTML/CSS | TAG: Pure

2013年8月9日

Pure は Yahoo! が公開している CSS フレームワーク。その基本的な使い方のメモ。

Pure の読み込み

Pure/Customize: Choose the modules that you need

以下を head 要素内に記述するだけ。（各機能別に読み込むことも可能）

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css" type="text/css" />

ボタン

Pure/Buttons: Simple CSS for Buttons

<a> 要素または <button> 要素に「pure-button」というクラス名を付けるだけ。

<a class="pure-button" href="#">Button（a要素）</a>
<button class="pure-button">Button（button要素）</button>

Button（a要素）

無効（Disabled）ボタン、アクティブボタン、プライマリーボタン

「pure-button」というクラス名に加えて、「pure-button-disabled」「pure-button-active」「pure-button-primary」をそれぞれ追加するだけ。

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

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

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

ボタンのカスタマイズ

「pure-button-foo」のような名前のクラスを作成し、CSS にカスタマイズする設定を記述する。

拡張する際は、元のクラス名を使って「元のクラス名 – 拡張する個別の名前」というようなクラスを作り、そのクラスを追加すると言う方法が推奨されている。Pure/Extend : Build on top of Pure の「Class Name Conventions」、「Extending Pure」参照。

/*全てのボタン共通の設定*/
.pure-button-success,
.pure-button-error,
.pure-button-warning,
.pure-button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
/*それぞれのボタンの色の設定*/
.pure-button-success {
  background: rgb(28, 184, 65); /* 緑色 */
}
.pure-button-error {
  background: rgb(202, 60, 60); /* えび茶色 */
}
.pure-button-warning {
  background: rgb(223, 117, 20); /* オレンジ色 */
}
.pure-button-secondary {
  background: rgb(66, 184, 221); /* 水色 */
}

「pure-button」というクラス名に加えて、作成したクラス「pure-button-success」などをそれぞれ追加する。

<button class="pure-button pure-button-success">Success Button</button>
<button class="pure-button pure-button-error">Error Button</button>
<button class="pure-button pure-button-warning">Warning Button</button>
<button class="pure-button pure-button-secondary">Secondary Button</button>

ボタンの大きさの調整

以下のようなクラス（font-size で大きさを調整）を作成し、クラス属性に追加する。

.pure-button-xsmall {
  font-size: 70%;
}

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

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

.pure-button-xlarge {
  font-size: 125%;
}

<button class="pure-button pure-button-xsmall">Extra Small Button</button>
<button class="pure-button pure-button-small">Small Button</button>
<button class="pure-button">Regular Button</button>
<button class="pure-button pure-button-large">Large Button</button>
<button class="pure-button pure-button-xlarge">Extra Large Button</button>
<button class="pure-button pure-button-success pure-button-xlarge">Extra Large Success Button</button>

アイコンの付いたボタン

Pure にはアイコンフォントは含まれていないが、「Font Awesome」のアイコンフォントを利用できる。「Font Awesome」の CSS を読み込み、pure-button 要素内で、<i> 要素を利用し、そのクラス名にアイコンを指定する。

Font Awesome アイコン一覧

<!--font-awesome.css を最初に読み込む-->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" />
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css" type="text/css" />

<button class="pure-button"><i class="icon-cog"></i>　Settings</button>
<button class="pure-button pure-button-xlarge"><i class="icon-apple"></i>　Apple</button>
<a class="pure-button" href="#">
<i class="icon-shopping-cart icon-large"></i>
Checkout
</a>

Checkout

メニュー

Pure/Menus:Simple CSS for Menus

デフォルトでは、メニューは垂直方向（縦）のものになっている。ul 要素を div 要素で囲みその div 要素に「pure-menu」と「pure-menu-open」（表示状態にする）のクラスを追加する。

<div class="pure-menu pure-menu-open">
    <a class="pure-menu-heading">Yahoo! Sites</a>
    <ul>
        <li><a href="#"><i class="icon-home"></i> Home</a></li>
        <li class="pure-menu-selected"><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
        <li class="pure-menu-heading">More Sites!</li>
        <li><a href="#">Games</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">OMG!</a></li>
    </ul>
</div>

li 要素に「pure-menu-selected」を追加するとアクティブ状態（文字色が濃い）になる。
メニューにヘッディング（見出し）を付けるには、ul 要素の外側で、a 要素で文字列を囲み、「pure-menu-heading」クラスを追加する。
li 要素に「pure-menu-heading」クラスを追加することも可能。
ボタン同様、<i> 要素を利用してアイコンをつけることも可能。

横メニュー（Horizontal Menu）

「pure-menu-horizontal」を追加する。

<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <ul>
        <li><a href="#"><i class="icon-home"></i> Home</a></li>
        <li class="pure-menu-selected"><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
    </ul>
</div>

但し、バージョン2.0以降では横メニューは幅を縮小すると、メニュー項目がメニュー領域からはみ出してしまう。バージョン1.0で試してみるとメニュー領域からははみ出さないが、次の要素が隠れてしまう。（バグ？）

ドロップダウンメニュー

ドロップダウンメニューにするには、JavaScript が必要。

「YUI seed」を読み込む。

// Put the YUI seed file on your page.
<script src="http://yui.yahooapis.com/3.11.0/build/yui/yui-min.js"></script>

YUI Quick Start

以下を記述。「YUI’s Y.Menu」を利用。

<script>
YUI({
    classNamePrefix: 'pure'
}).use('gallery-sm-menu', function (Y) {

    var horizontalMenu = new Y.Menu({
        container         : '#horizontal-menu',
        sourceNode        : '#std-menu-items',
        orientation       : 'horizontal',
        hideOnOutsideClick: false,
        hideOnClick       : false
    });

    horizontalMenu.render();
    horizontalMenu.show();

});
</script>

ドロップダウンメニューの記述。

<div id="horizontal-menu">
    <ul id="std-menu-items">
        <li class="pure-menu-selected"><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
        <li>
            <a href="#">Other</a>
            <ul>
                <li class="pure-menu-heading">More from Yahoo!</li>
                <li class="pure-menu-separator"></li>
                <li><a href="#">Autos</a></li>
                <li><a href="#">Flickr</a></li>
                <li><a href="#">Answers</a></li>
                <li>
                    <a href="#">Even More</a>
                    <ul>
                        <li><a href="#">Horoscopes</a></li>
                        <li><a href="#">Games</a></li>
                        <li><a href="#">Jobs</a></li>
                        <li><a href="#">OMG</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

レスポンシブ・グリッド

Pure/Responsive Grids: A fully customizable responsive grid

Pure の Grids 機能を利用すると、マルチカラムレイアウトやレスポンシブレイアウトが簡単に作成できる。

「pure-g」または「pure-g-r」がグリッド（行）、「pure-u-*-*」がユニット（列、カラム）で、グリッドの中にいくつかのユニットを配置してレイアウトする。
レスポンシブ対応にするにはグリッドは「pure-g-r」を使用する。
「pure-u-1-2」は 50% の幅（1/2の大きさのユニット）、「pure-u-1-3」は 33% の幅（1/3の大きさのユニット）、「pure-u-1-5」は 20% の幅（1/5の大きさのユニット）を表す。
ユニットは必ずグリッドの子要素である必要がある。
ネスト（入れ子）も可能。

<div class="pure-g-r">
    <div class="pure-u-1-3">
        <p>Thirds（3分の1）</p>
    </div>

    <div class="pure-u-1-3">
        <p>Thirds（3分の1）</p>
    </div>

    <div class="pure-u-1-3">
        <p>Thirds（3分の1）</p>
    </div>
</div>

Thirds（3分の1）

FireFox ではちゃんとレイアウトされないバグ（最後のカラムが落ちてしまう）があり、「pure-g」と「pure-g-r」にフォントを指定すると正常に表示されるようになる。Grid bug in Firefox

.pure-g, .pure-g-r {
  font-family: Arial;
}

以下は1つのグリッドの中に、幅の同じカラムと、幅の異なるカラムを配置した例。

<div class="pure-g-r">
  <div class="pure-u-1-2">
    <h3>Fast（2分の1のカラム）</h3>
    <p> YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world. </p>
  </div>
  <div class="pure-u-1-2">
    <h3>Complete（2分の1のカラム）</h3>
    <p> YUI's intuitive and well-documented API takes you from basic DOM handling to building performant and maintainable applications on desktop browsers, mobile devices, and servers.  </p>
  </div>
  <div class="pure-u-2-5">
    <h3>Two-Fifth Column（5分の2のカラム）</h3>
    <p> YUI's intuitive and well-documented API takes you from basic DOM handling to building performant and maintainable applications on desktop browsers, mobile devices, and servers.  </p>
  </div>
  <div class="pure-u-3-5">
    <h3>Thre-Fifth Column（5分の3のカラム）</h3>
    <p> YUI's intuitive and well-documented API takes you from basic DOM handling to building performant and maintainable applications on desktop browsers, mobile devices, and servers.  </p>
  </div>
</div>

Fast（2分の1のカラム）

YUI’s lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.

Complete（2分の1のカラム）

YUI’s intuitive and well-documented API takes you from basic DOM handling to building performant and maintainable applications on desktop browsers, mobile devices, and servers.

Two-Fifth Column（5分の2のカラム）

YUI’s intuitive and well-documented API takes you from basic DOM handling to building performant and maintainable applications on desktop browsers, mobile devices, and servers.

Three-Fifth Column（5分の3のカラム）

YUI’s intuitive and well-documented API takes you from basic DOM handling to building performant and maintainable applications on desktop browsers, mobile devices, and servers.

Pure ではグリッドを最大 24 分割できまる。詳細は「YUI CSS Grids」（「yui3-」を「pure-」に置き換えて読む）を参照。「Media Queries」のブレークポイントも記述されている。

グリッドやユニットにパディングやボーダーを設定する

グリッドやユニットに独自の CSS を適用するには、div 要素でネストして子コンテナを作成し、そのコンテナにスタイルを適用する。

<style>
.sidebar {
  padding: 0.5em; 
  border: 1px solid #777;
  background-color: #FFF;
}
.main {
  padding: 0.75em 0.5em; 
  background-color: #DEEFEF
}
.purecontent {
  padding: 0.5em; 
  border: 1px solid #AAA;
  background-color: #FEFDDE;
}
</style>

<div class="pure-g">
<div class="purecontent">
    <div class="pure-u-1-5">
        <div class="sidebar"> サイドバー </div>
    </div>

    <div class="pure-u-4-5">
        <div class="main"> メイン </div>
    </div>
</div>
</div>

グリッドの中にクラス属性が「purecontent」という div 要素の子コンテナを作成。
ユニットの中に、クラス属性が「sidebar」「main」という div 要素の子コンテナを作成して、それらにスタイルを適用。

メイン

「box-sizing: border-box」を利用する方法もあるが、IE7以下では「box-sizing」をサポートしていない。

その他

ボタン、メニュー、グリッドの他にも、ページネーションやフォーム、テーブルでも利用できる。