読者です 読者をやめる 読者になる 読者になる

webhack / 猫とウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイドの技術やプロジェクトマネジメントとかウェブに関するマーケティングとかWEBを取り巻く全般を好きに書くブログ

小さくてシンプルなレスポンシブCSSフレームワーク「Skeleton」。Bootstrapに疲れた人はぜひ。

CSS ウェブデザイン レスポンシブデザイン オープンソース

「Skeleton」はMITライセンスの軽量CSSフレームワークです。ページ内ではcsフレームワークではなくboilerplate (ボイラープレート)と説明されています。

小さくてシンプル=分かり易くて、使い易い。例えばランディングページやコーポレートサイトで最小限のレスポンシブ対応ページを作りたい用途に向いていそうです。

Skeleton: Responsive CSS Boilerplate

f:id:tkosuga:20150629235556p:plain

GitHubのURLも載せておきます。

github.com

何がDeadSimpleかというと、400行未満と他CSSフレームワークと比べて短いです。UIフレームワークを含まない、そしてLESSやSaSSを利用しておらずコンパイル不要です。ファイルを置くだけで利用出来ます。※ LESS/SaSSはエクステンションで提供されています。親切ですね。

400行なら理解してカスタマイズするまでに、そんなに多くの時間を使わなくても出来てしまいそうです。

デモのためSkeletonを使って作られたページのURLとキャプチャをのせます。URL先のHTMLを開いて見て欲しいのですが、とてもシンプルです。

Skeleton: Responsive CSS Boilerplate

f:id:tkosuga:20150630000124p:plain

フルスタック型でなんでも出来るCSSフレームワークが人気ですが、用途によってはSkeletonのように軽量CSSを使って行きたいです。

フレームワークと比べるのは少し筋違いですが、Yahoo!の最軽量CSSフレームワーク「pure」よりも断然小さいです。

purecss.io

github.com

複雑化してきているウェブサイトのフロントエンドですが、その一方で軽量で扱い易いツールも登場しています。ミニマムなツールから勉強して複雑なツールを理解する方法もありますので、合わせて勉強していきたいですね。