はじめに
OSS の CSS Framework Bulma を使って、メルカリ風のレスポンシブなデザインを構築する方法について整理した。
「メルカリ風のレスポンシブなデザイン」というのは、
- デスクトップなどでは「サイドバー」+「コンテンツ」
- モバイルでは「サイドバー」が非表示になり、クリック(タップ)で表示される
というような構成を意味している。
TL;DR
- モバイル表示時には隠したい部分に
is-hidden-mobile
クラスを付与する - モバイル表示時に隠した要素を表示するためのボタンなどに
is-hidden-tablet
クラスを付与する - 上記ボタンをクリックした時に
is-hidden-mobile
をトグル(On/Off)する - 全体のデザインは
columns
+column
+is-<n>-<device>
で調整する