あらまし
「ジョジョの奇妙な冒険 未来への遺産」で２番目に好きなキャラクターがホル・ホースだったということもあってか、CSS Frameworkはbootstrapよりもマイナーなpureを推す事もあった(伏線)。
CSSフレームワーク「Pure」とは
yahoo YUIチームによる超軽量CSSフレームワーク。
javascript不使用。
v0.6.0の時点で約4KB。
v1.0.0の時点で約3.8KB。
レスポンシブ対応/非対応選択可。
好きなところ
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が存在する
まあコレ無いとデザインで泣くのですが。
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 10から動くし。
という訳で、bootstrapがシステム上で組み込まれていない環境であれば、pureも比較検討いただきたい。
（pure公式にbootstrapとちゃんぽんさせる方法が記載されていたが個人的にはナンセンス。bootstrap一本を推奨）
私信
20/05/15にてiOS 12- に正式対応。appleは赦された。
あとIE8のサポートが消えてた。いらないよね