Bootstrapもいいのですが、ちょっと巨大すぎるので、代替品がないかなと思って探しました。
要件は、
- スマホでも使えるようにレスポンシブ対応
- あまりできることは多くなくてよい、ボタンとかフォームとかの見た目がきれいになればよい
- できれば、CSSだけでJavaScript不要のフレームワークがよい
といったところです。
色々探しましたが、有名どころでJavaScript不要と言う要件を満たすものはあまりなく、結局見つけたのがこれです。
レスポンシブ対応のサイトをサクッと作れるフレームワーク『InK』
この「InK」というネーミングですが、何が困るって、検索キーワードとして使えないことです。Google検索すると、"do you mean link?"とかなってしまう。そんなわけで、使用感などのレポートが見つからなかったです。どれだけ有名なのかもよく分かりません。
また、日本だと、
http://d.hatena.ne.jp/keyword/InK
と混同しそうです。
さて、話を戻すと、Inkは要件を満たしています。全体的な設計がシンプルで、CSSだけで構成されていていい感じです。早速ちょっと使ってみて感じたのは、レイアウトの指定が面白いということです。Bootstrapだと12 spanでfixedとfluidがありますが、Inkだとパーセント指定です。また、fixedはなくてfluidだけのようです（未確認）。fixedも使いたいケースがあるので、それは残念なところです。で、面白いのは、「Multiple Layouts」というレイアウトの指定方法です。これは、CSSのメディアクエリを3通り用意して、それぞれのレイアウトをCSSのクラス指定で定義するのです。
うまく説明できないので、サンプルを。
<div class="ink-l50 ink-m50 ink-s100">
エリア１
</div>
<div class="ink-l50 ink-m50 ink-s100">
エリア２
</div>このようにすると、大画面と中画面では、エリア１とエリア２が横に並んで２カラムのレイアウトになり、スマホなどの小画面では、エリア１とエリア２が縦に並んで１カラムのレイアウトになります。ちなみに、大画面、中画面、小画面が、それぞれ、"l", "m", "s"に対応します。
あと、Bootstrapで困っていたレイアウト時のスペース追加も、Inkではink-vspaceとink-gutterで解決しそうです。もっとも、細かい制御をするときは結局CSSを書くことになりそうですが。
とりあえずは、レイアウトだけ試して満足しました。
コメント