#やりたかったこと
CSSフレームワークを使いたい。けど、Bootstrapだとありきたりすぎる…というときに、他のCSSフレームワークを探してみました。
Bootstrap 以外のCSSフレームワークいろいろ
##HTML Kick start
http://www.99lime.com/elements/
全体的に丸みを帯びている。アイコンデザインがよい。
他の特徴はよく分からないです。
##Cascade
http://jslegers.github.io/cascadeframework/index.html
Also different from Twitter Bootstrap or other CSS Frameworks out there, Cascade Framework can be used for modern browsers and older browsers alike. All features of Cascade Framework support Internet Explorer from IE6 upwards or degrade gracefully.
Cascade は最新ブラウザも昔のブラウザも同じように動く。そしてIE6以上に対応している、とのこと。悪夢のようなIE対策が要らないというのはよいですね。
##PURE
http://purecss.io/
yahoo が開発した、シンプルイズザベスとなフレームワーク。
なんと、最小でたったの4.4KB(!)。bootstrap をDLすると200KBくらい。
さらに、ダウンロードする必要すらなく、次の1行を挿入してCSSを取得すればよい。
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
こりゃいいな。
##Foundation
http://foundation.zurb.com/
シンプルでかっこいい。マスコットキャラ(?)が良い味出しています。
Foundation は、
- 学習コンテンツが豊富
- 作例が豊富
- グリッドのテンプレートが豊富
ということで、CSSフレームワーク初心者にも親切です。
公式でここまで充実しているフレームワークは、他にないのではないか。
ただし、全部英語です。
何気にSassにも対応しています。Sass なしでも使えます。
その他
他のCSSフレームワークについては、下の記事で紹介されているので、ぜひご覧ください。
最近のレスポンシブ対応フロントエンドCSSフレームワークまとめ
[カスタマイズ性抜群!Sassに対応したCSSフレームワークがアツイ! | 株式会社LIG] (http://liginc.co.jp/web/tool/other-tool/60107)
最後にー英語は覚えよう
どのCSSフレームワークを使うにしても、 英語が必要です。
なぜなら、ドキュメントが英語だからです。Bootstrap だと日本語の解説もたくさんありますが、マイナーなフレームワークだと日本語情報が無いか、古いものだけだったりします。
英語のサイトが出てきても、そっとブラウザを閉じないようにしましょう。