ITエンジニア/デザイナ向けにオープンソースを毎日紹介

skelJSはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

レスポンシブなWebデザインを考える際にはブロックを意識してデザインを行う必要があります。多くは幅を12分割して提供するようです。レスポンシブなサイトやWebアプリを開発するためのフレームワーク、skelJSも同様の設計となっています。


デスクトップサイズ。Bootstrapのように見やすい画面になっています。


タブレットサイズ。この場合もデスクトップライクですが、横の隙間は狭まっています。


スマートフォンサイズ。メニューなどはそのままに、下のコンテンツはずれています。


作成例。12個のブロックをどう割り当てるかを決めていく形です。


-3uといった指定をすると左側が空く仕組みになっています。これは面白いです。


入れ子にした場合の表示はちょっと変わっています。

skelJSは大きなフレームワークではなく、ブロックの幅を管理するのに使うのみなようです。それだけに後は自由にできますので、デザイナーの方の創造性を維持できるのではないでしょうか。


MOONGIFTはこう見る

Bootstrapはプログラマにとっては便利なフレームワークですが、デザイナーから見ると束縛が強く、それを破ると全体が崩れてしまって思い通りのデザインにならないことが多いようです。だから凝ったデザインをしようと思うと一から自分でレスポンシブな実装を行う必要があります。

skelJSはその最低限の部分だけを提供してくれるフレームワークと言えるのではないでしょうか。ブロック単位で考えるのはレスポンシブである以上、致し方ないと思われます。であれば、その薄いフレームワークだけあれば後は自由にできそうです。

skelJS: A framework for building responsive sites and apps.

n33/skelJS

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2