Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris. @bulmaio.
#css #responsive
11:09 PM - 1 Jan 2016
広告やアプリ宣伝のバナーを追加したついでに、最近見かけてたCSSフレームワークのBulmaに切り替えた。
Bulma: a modern CSS framework based on Flexbox
Bulma is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.
もともとはSpectreというフレームワークを使っていたのだが、レスポンシブ対応にすこし足りない機能があったので一気にざざざーっと書き換え。 切り替えてみると、Class指定がSpectreよりもまとまっていて分かりやすかった。
なにが足りなかったというと、Spectreではモバイルでは表示させないという機能はあるのだがモバイルのときだけ表示させるという機能がない。まあ、JSでスクリーンサイズ拾って切り替えるということは出来るんだけど。
そろそろJSでレイアウトを弄るのはあんまり流行ってないようだし、そもそもCSSフレームワークをCSSオンリーの軽量タイプに変えてるんだからJSでレイアウト弄るんだったらBootstrapとかのほうが良いよね。ってことで。
かといってBulmaが完璧かというと、そうでもない部分がある。
一つ目が、スクリーンサイズが780pxくらいまでモバイル扱いになること。
イメージ的には、モバイルと言えば500px位までじゃないかなと思うのだが、今時はこんなもんなんだろうなと諦めた。(昔のモニタとか800x600とかって時代が長かったんだぞー)
二つ目は、デスクトップでの横幅が1200pxくらいまで許容されていること。
ドキュメントを読む限りだと980pxくらいが最高になっている感じなのに、 container クラスをあてても狭くならない。ソースを見るとやっぱり1200pxくらいまでは広げてあるのでそこはコメントアウトして使ってる。
多段カラムレイアウトだったら1200pxくらいは欲しいのだろうけど、こういう文章だけのサイトだとちょっと読みづらくなる。
そんな足りないところがあっても、魅力な機能が沢山ある。
例えばこういうカードが作れたり、
John Smith
@johnsmith
こういうスレッドっぽいやり取りが表現できたりと、そのままでも使えそうなサンプルが多い。
新しいものは次から次へと出てくる。
全てで遊んでみることは時間的になかなか出来ないけれど、新しいものをキャッチアップするアンテナに試したい意欲と試す気力、そしてそれを支える心の余裕だけはいつまでも持っておきたいと思う。