2016 09 13

モバイル特化のcssフレームワーク Mobi.css

http://getmobicss.com/
名前の通り、モバイル特化のフレームワーク

モバイルサイトをざざっとつくる足がかりにはよさそう。
だけどあくまでモバイル用で、デスクトップ表示をゴリゴリつくりこむのには向いてなさそう。

デスクトップ <-> モバイル 切り替え用class

hide-on-mobile show-on-mobile
そういったクラス、だいたいつくるけど、わかりやすくてなんか良い名前だと感じた。

Margin top only

Margin top only の指針、良さそう。
提供されているマージン関連のclassも、 mt-30, mt-15 and mt-0 の3つで、ブレ少なくすみそう。 後から、調整用の新しい mt-50 とか作りだしたらヤバそう。

フォントサイズ

html のfont-sizeを10pxにして、rem指定。
最近多いような気もするし、自分もよく使ってる。
けど、まだpx指定の延長でしかないので、ベースフォントのサイズの研究とかもうちょっと深く調べると良い収まりどころが見つかるかもしれない。

フォーム

selectのアイコンは、svgで出してる

background:url("data:image/svg+xml;charset=utf-8,</svg>") right 10px center no-repeat;

これ、確認してみたところ、現状(2016/09)webkitでしか使えないようだった。
確かに、モバイル用と割りきってしまうとそれでも大丈夫なのかもしれない。
これ全面的に使えるようになったら便利そうだな―と。