CSSフレームワーク「Bulma」の Tips集

はじめに

業務でBulmaを一通り使ってみて、Tipsが溜まってきたので吐き出しておきます。
今後、何かあれば随時更新したいと思っています。

レスポンシブ無効にしてwidthを固定化したい

PCオンリーのサイト作成にBulmaを使っていてwidthを固定したい時があったので紹介します。
Nuxt.js+Bulmaなのでapp.scssでBulmaの変数を以下のように変更しています。

assets/css/app.scss

$navbar-breakpoint: 0px;
$tablet: 0px;
$desktop: 1024px;
$widescreen-enabled: false;
$fullhd-enabled: false;

#main {
    width: $desktop;
    margin: 0 auto;
}

簡単に説明すると各種breakpointを0pxに設定して無効化。
desktopを起点にするのでお好みのwidthを設定。
widescreenとfullhdはenabledで無効化できるのでfalseを指定。
あとはcssでwidth固定してセンタリングすることで対応しました。

formのplaceholderの色を変更したい

Bulmaのドキュメントになかったので掲載しておきます。

assets/css/app.scss

$input-placeholder-color: #お好みの色

Columsのマージンを無くしたい

columsはマージンがdefaultでついており、
マージンを消したいシーンがよくあるのでメモ。
is-marginlessをcolumsと一緒に付けるだけ。

<footer class="footer columns is-marginless">
.
</footer>

Columsの間隔(gap)を変更したい

is-variableをつけてis-(n)でgapを変更することが出来る。

<div class="columns is-variable is-3">
.
</div>

横方向(水平方向)centerにしたい

<div class="has-text-centered">
縦方向センター
</div>

縦方向(垂直方向)centerにしたい

columnsにはis-vcenteredが使える。

<div class="columns is-vcentered">
縦方向センター
</div>

それ以外の要素で縦方向centerを使いたい時には普通にclassを定義。

.is-vertical-center {
  display: flex;
  align-items: center;
}

動的に要素が変更されるdropdown-menuでwidthを自動調節したい

検索の候補などをdropdown-menuで表現したい時に、普通にdropdown-menuを使うとwidthが表示内容に関わらず$dropdown-menu-min-width(12rem)が適応されてしまう。
これを解消するために以下のようにclassを定義することで解消。

.dropdown-menu {
  white-space: nowrap;
}

ulのデザインが反映されない

普通にulタグで組むとリストマーカーもインデントも反映されません。
以下のようにcontentクラスで

ブロックを囲ってやるとデザインが反映されます。

<div class="content">
  <ul>
    <li>いぬ</li>
    <li>ねこ</li>
  </ul>
</div>

まとめ

Bulmaはドキュメントも充実しているので、自分書くCSSの量を大幅に抑えて（ほぼ書かなくていいと言ってもいいくらい）ページコーディングが出来るのでとても便利です。

たまにこれどうすんの？って疑問に思うこともありますが、Bulmaのコードを読めばよしなにカスタマイズも可能です。

今後Bulmaを使って詰まったことなどあれば随時、追記していこうと思います。