Help us understand the problem. What is going on with this article?

BootStrapより軽くて少機能! CSS Framework「Pure」をBootStrap Advent Calendarで宣伝する暴挙に出る!

More than 3 years have passed since last update.

あらまし

「ジョジョの奇妙な冒険 未来への遺産」で2番目に好きなキャラクターがホル・ホースだったということもあってか、CSS Frameworkはbootstrapよりもマイナーなpureを推す事もあった(伏線)。

CSSフレームワーク「Pure」とは

yahoo YUIチームによる超軽量CSSフレームワーク。
javascript不使用。
v0.6.0の時点で約4KB。
v1.0.0の時点で約3.8KB。
レスポンシブ対応/非対応選択可。

Pure公式サイト / GitHub

好きなところ

1. 24Grid or 5Grid。黄金比もより近似値に

メジャーなCSSフレームワークは12Gridの場合が多いが、Pureは二倍の24Grid。
更に面倒な5等分、5Gridも設定可能。

美しく見えるというオカルト比率、黄金比。
24Gridだと、12Gridより近似値で作りやすい。

黄金比 長辺 短辺
24grid 15(14.83) 9(9.17)
12grid 7(7.42) 5(4.59)

bootstrapで黄金比に固執する場合だと、下記のようなサブセットを代わりに導入する必要がある(こちらはheaderサイズも黄金比で組まれていて面白い)
https://github.com/iamkevinrhodes/goldbootstrap

まあその、BootStrapとかなら白銀比が使いやすいので、こっちの方が断然オススメ。

白銀比 長辺 短辺
24grid 14(14.06) 10(9.94)
12grid 7(7.03) 5(4.97)

ちなみに計算はこちらを利用。
http://voidism.net/metallicratio/

2.hiddenパラメータ

これが

<div class="hoge" hidden>ふっかつ おそ松くん</div>

こうなる

<div class="hoge" style="display: none !important;">ふっかつ おそ松くん</div>

運用上、一般ユーザ(ソース見る奴を一般とは言わないならば)に隠したい項目を、html6文字で消せる。
実は一番お気に入りの機能。
jQueryで扱うなら、hoge.attr('hidden',''); みたいな感じ。
(bootstrapだとhoge.addClass('hidden')なのでpureは直感的じゃない気がする)

3.Skin Builderが存在する

http://yui.github.io/skinbuilder/?mode=pure

まあコレ無いとデザインで泣くのですが。
bootstrapのカラフルなコンポーネントの方針とは違い、一色系、もしくは二色系を中心にデザインしていく形。

bootstrapならPaintStrapが非常に良い。Adobe Color CCのプロファイルが使えるのが素敵。アプリ併用すれば写真から色情報起こせるので。
http://paintstrap.com/ja/

4.コンポーネント切り離しが可能で小さい、CSSのマイクロフレームワーク

機能ごとに絞った個別導入ができるので、デフォルトのファイルサイズ(4KB)から更に絞れる。
http://purecss.io/customize/

また、bootstrapに存在する「ラベル」「バッジ」「アラート」など、CSSで書き直すのが比較楽な機能は存在せず、色に関しても「primary,success,info,warning,danger」などの色の区分もない。

公式サイトを見るに「そんなの自分で組んだほうが早いよ!!!!」と言わんばかりの解説が行間から漂う。

例:「アイコンフォント? そうそうFont Awesomeって知ってる? すごく便利だよ!!!!」

pureはまさしく「CSSマイクロフレームワーク」だ。
Rubyで言えばRailsではなくSinatra。
PHPで言えばSymfonyではなくSilex。
必要なコンポーネントを選び採用することで反応速度を上げるタイプ。

まとめ、もしくは「pureが生きる現場とは」

アクセスが激しい大規模サイトなど。
初動のレンダリング速度を重視したい販促用サテライトサイトなど。
軽量高速のpureは、これらによく合う。

また、js不使用でcssの記述量も少なく、既存のサイトへ適用した際の破綻が少ない。
レガシーサイトを中途半端に対策する際に便利。IE 8から動くし。

という訳で、bootstrapがシステム上で組み込まれていない環境であれば、pureも比較検討いただきたい。
(pure公式にbootstrapとちゃんぽんさせる方法が記載されていたが個人的にはナンセンス。bootstrap一本を推奨)

最後に

最後になったが、ブラウザの対応環境を記載しよう。

IE 8+
Latest Stable: Firefox, Chrome, Safari
iOS 6-8
Android 4.x

_人人人人人人人人_
> iOS9どうした <
 ̄Y^Y^Y^Y^Y^Y^Y ̄

オチ

やっぱりbootstrapには勝てなかったよ……。

私信

17/06/05にまさかのv1.0.0出たわ。で、iOS11への対応状況は

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away