utility-bg

u-bg-(color)

背景に色をつける。オブジェクト・コンポーネントを可能な限り上書きする。
(color)は標準のカラーテーブルを参照。
.u-bg-third は文字色が $body-color = $gray-strong となる。

bg-gray
bg-first
bg-second
bg-third
bg-info
bg-important
<div class="u-bg-gray">bg-gray</div>
<div class="u-bg-first">bg-first</div>
<div class="u-bg-second">bg-second</div>
<div class="u-bg-third">bg-third</div>
<div class="u-bg-info">bg-info</div>
<div class="u-bg-important">bg-important</div>

u-bg-fade

.u-bg-(color) と併用すると背景色を薄くする。

bg-gray
bg-first
bg-second
bg-third
bg-info
bg-important
<div class="u-bg-gray u-bg-fade">bg-gray</div>
<div class="u-bg-first u-bg-fade">bg-first</div>
<div class="u-bg-second u-bg-fade">bg-second</div>
<div class="u-bg-third u-bg-fade">bg-third</div>
<div class="u-bg-info u-bg-fade">bg-info</div>
<div class="u-bg-important u-bg-fade">bg-important</div>