最近色々なサイトを作る機会に恵まれました。
普段はUikitといった大型のCSSフレームワークを使うのですが、ふとした機会にミニマムなCSSフレームワークに出会い、一目惚れしましたのでご紹介します。
Skeletonとは
Skeletonはとても軽量なCSSフレームワークです。
容量で言えば12kb
ちなみにデブで有名なBootstrapはminifyされても119kbです。
Skeleton-公式サイト
SASS版もあります。
Skeleton-SASS版
ほかのCSSフレームワークとどう違うのか
Skeletonは本当に最小の要素で構成されているので非常に学習コストが低いです。
多くのCSSフレームワークは独自のclassがある前提ですがSkeletonはHTMLタグ中心で拡張されています。
他の軽量なCSSフレームワーク
どんな機能があるのか
かなり軽量なのでJSとかはなく、すべてCSSで完結していますので、UIコンポーネントは少ないです。
参考までにサンプルのでもページを作りました。
Skeleton-サンプル
- THE GRID-グリッド
- TYPOGRAPHY-タイトル
- BUTTONS-ボタン
- FORMS-フォーム
- LISTS-リスト
- CODE-コード
- TABLES-テーブル
- MEDIA QUERIES-メディアクエリ
どんな案件に向いているか
正直どんな案件でも使えると思います。
というのがこれだけ小規模だとnormalize.cssと大差ないのかなと思っています。
参考までにnormalize.cssでつくるとどう見えるか比べてみてください。
※Skeletonと比べやすくするためにcontainerなど一部コードは追記してます。
normalize.css ver
最後に
おまけ程度のgridはありますが最初はこれを使ってすむようならこれを使えば良いでしょうし、不足を感じたなら追加か別のgridシステムを入れる複数の選択肢が選べます。
依存度が低いので上書きしていく前提で作れるので、戻りの作業がおそらく出ないCSSフレームワークと認識してます。
そういう観点で見るとインブラウザデザインの案件には強い気がしています。
特に活用しやすそうなのがWordPressのようなブログテーマです。
Skeletonの特徴は軽量というのもそうなのですが、デザイン的にスタイリッシュで美しいタイポグラフィーにあると思っています。
ですのでテキストがメインとなるブログが最適と考えています。
BootstrapやFoundationの大型のCSSフレームワークが悪いということはありませんが、大きすぎるコードはメンテがしずらいというのがずっと付きまといますし、コーディング規約もバラバラになるケースもあるので常に最適ということはないのかなと思っていますので軽量なCSSフレームワークというのも良いと思います(*ゝω・*)