レスポンシブなデザインを構築する際のベースに「skelJS」
skelJSはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
レスポンシブなWebデザインを考える際にはブロックを意識してデザインを行う必要があります。多くは幅を12分割して提供するようです。レスポンシブなサイトやWebアプリを開発するためのフレームワーク、skelJSも同様の設計となっています。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-24 10.24.50.1375322940.png)
デスクトップサイズ。Bootstrapのように見やすい画面になっています。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-24 10.25.22.1375322944.png)
タブレットサイズ。この場合もデスクトップライクですが、横の隙間は狭まっています。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-24 10.25.36.1375322947.png)
スマートフォンサイズ。メニューなどはそのままに、下のコンテンツはずれています。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-24 10.33.10.1375322949.png)
作成例。12個のブロックをどう割り当てるかを決めていく形です。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-24 10.33.20.1375322951.png)
-3uといった指定をすると左側が空く仕組みになっています。これは面白いです。
[](http://images.moongift.jp/2013/08/Screenshot 2013-07-24 10.33.35.1375322954.png)
入れ子にした場合の表示はちょっと変わっています。
skelJSは大きなフレームワークではなく、ブロックの幅を管理するのに使うのみなようです。それだけに後は自由にできますので、デザイナーの方の創造性を維持できるのではないでしょうか。
MOONGIFTはこう見る
Bootstrapはプログラマにとっては便利なフレームワークですが、デザイナーから見ると束縛が強く、それを破ると全体が崩れてしまって思い通りのデザインにならないことが多いようです。だから凝ったデザインをしようと思うと一から自分でレスポンシブな実装を行う必要があります。
skelJSはその最低限の部分だけを提供してくれるフレームワークと言えるのではないでしょうか。ブロック単位で考えるのはレスポンシブである以上、致し方ないと思われます。であれば、その薄いフレームワークだけあれば後は自由にできそうです。