最近ではモバイルファーストというのも当たり前になっています。まずタブレットやスマートフォン向けに最適化されていれば、デスクトップ向けに考える時にも情報が整理された状態から考えられます。逆からは情報を削除する必要があり、ストレスです。 今回紹介するMobi.cssはまさにモバイル用のCSSフレームワークとなっています。

Mobi.cssの使い方

それほど多くのデザインに対応しているわけではありませんが、まずは定番のグリッド。

グリッドを使うとこんな会話型のインタフェースも作れます。

テーブル。上下へのスクロールはもちろん、右側にもスクロールできます。

フォーム。

長い文章をスクロールしながら表示する例。縦に長いデータを表示する際に使えます。

Mobi.cssはモバイル向けのフレームワークですが、デスクトップに対しても十分利用できます。サイズはGZip後で3.6KBとなっています。カスタマイズも可能な仕組みとなっているので、Mobi.cssをベースにしてモバイル向けのWebアプリケーションやハイブリッドアプリを作るのも良さそうです。

Mobi.cssはCSS製のオープンソース・ソフトウェア（MIT License）です。

Mobi.css xcatliu/mobi.css: A lightweight, flexible css framework that focus on mobile.