Cntlog > 開発 > フレームワーク > 学習コストが低くて使いやすいCSSフレームワーク(Skeleton)

学習コストが低くて使いやすいCSSフレームワーク(Skeleton)

最近色々なサイトを作る機会に恵まれました。
普段はUikitといった大型のCSSフレームワークを使うのですが、ふとした機会にミニマムなCSSフレームワークに出会い、一目惚れしましたのでご紹介します。

Skeletonとは

Skeletonはとても軽量なCSSフレームワークです。
容量で言えば12kb
ちなみにデブで有名なBootstrapはminifyされても119kbです。
Skeleton-公式サイト
SASS版もあります。
Skeleton-SASS版

ほかのCSSフレームワークとどう違うのか

Skeletonは本当に最小の要素で構成されているので非常に学習コストが低いです。
多くのCSSフレームワークは独自のclassがある前提ですがSkeletonはHTMLタグ中心で拡張されています。

他の軽量なCSSフレームワーク

  1. Kube
  2. Papier
  3. wirefy
  4. pure
  5. Milligram
  6. Vital

どんな機能があるのか

かなり軽量なので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フレームワークというのも良いと思います(*ゝω・*)

関連記事

Google謹製Material Design Liteを触ってみた所感... Googleがマテリアルデザインの考えを取り入れた公式フレームワーク「Material Design Lite」(以下、MDL)を公開しました。 少し触ってみましたので、基礎的な使い方と自分の備忘録も兼ねてまとめてみます。 Material Design Liteとは ...
CSSフレームワークの使いドコロ CSSフレームワークは以前からありましたが、レスポンシブデザインが流行するのに比例して、こちらの注目度も高まってきています。 レスポンシブ対応を0から自作しようと思うと時間と労力もかかりますし、メンテナンスにも欠けてしまうあたりが流行出した理由でしょうか。 CSSフレームワークと...
Flexbox童貞を卒業させるためのフレームワーク(Dlex)作りました。... Flexbox ベースのレスポンシブ CSS フレームワーク Dlex を作りしました。 もともと Flexboxは好きではなく、display:table派だったのですが、長いことFlexboxを放置していたのですが、 Disろうと思って学び直して見たらつい熱が入りフレームワーク化してしてま...
bootstrap並にイケてたCSSフレームワーク※サンプル有り... 新年もあけましたので新しいCSSフレームワークを探していたら素敵なものと出会いました。 Gumby Gumbyで作られたサイト 作成したサンプル CSSフレームワークって? CSSフレームワークとは、htmlソースにフレームワークに沿った記述をするだけで、簡単に...