シンプル軽量のCSSフレームワーク「Pure」：導入とグリッド解説

Pureの概要

「Pure」は米Yahooが公開しているCSSフレームワークです。

CSSフレームワークで有名なものに「Bootstrap」や「Foundation」などがありますが、「Pure」はこれらと比べると、機能はシンプルでとても軽量です。

使える機能としては
「グリッド」
「画像のレスポンシブ化」
「フォーム」
「ボタン」
「ドロップダウンメニュー」
「テーブル」
などがあります

「Bootstrap」ほど多機能でなくても良いから、とりあえずWEBサイトのグリッドだけでも、フレームワークを使って速攻作成したいという方にはピッタリだと思います。

こちらが「Pure」の公式サイト
＊Pure

実はこのサイトのグリッドも「Pure」を使っております。
お世話になっております。

というわけで、これから数回ほど「Pure」について解説していきます。
今回は「Pure」を導入する準備とグリッドシステムについて。

Pure導入の準備

まずは、headタグ内に、

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

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->

と記述します。
導入はこれだけです。簡単です。

ちなみに「Pure」の現在の最新バージョンは0.60です。
（2016年6月16日現在）

Pureのグリッドシステム

グリッドでは3種類のクラスを使用します。
「pure-g」
「pure-u」
「pure-u-*-*-*」

グリッドを使用したい親要素にクラス「pure-g」を適用し、その中の子要素にクラス「pure-u」、又は「pure-u-*-*-*」を適用します。

「Pure」のグリッドは全体の横幅を24分割又は5分割します。

たとえば「pure-u-3-24」は24分割中の3、
「pure-u-10-24」は24分割中の10、
「pure-u-2-5」は5分割中の2となります。
「pure-u」は単純にwidth100%となります。

これに各ブレークポイントの記号を加えます。

たとえば「pure-u-1 pure-u-sm-1-2 pure-u-md-1-4」の場合、
567px以下がwidth100%、
568px以上がwidth50%、
768px以上がwidth25%となります。

以下のコードの場合は、

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 pure-u-xl-1-8">A</div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 pure-u-xl-1-8">B</div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 pure-u-xl-1-8">C</div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 pure-u-xl-1-8">D</div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 pure-u-xl-1-8">E</div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 pure-u-xl-1-8">F</div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 pure-u-xl-1-8">G</div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 pure-u-xl-1-8">H</div>
</div>

768px以上が2分割、1024px以上が4分割、1028px以上が8分割です。

このコードでサンプルページを作りましたので、そちらをご参照ください。
＊PURE：グリッド解説
ブラウウザの横幅を広げたり狭めたりすると分かりやすいと思います。

Pureグリッドシステムの注意点

「Bootstrap」と比較した「Pure」のグリッドの注意点は、ガター（グリッドとグリッド間の余白スペース）が無いことと、全体に「box-sizing: border-box」が適用されてないことです。

「Bootstrap」に慣れた人は、この２つには大いに戸惑うのでご注意ください。