utility-bg

bg-(color)

背景に色をつける。オブジェクト・コンポーネントを可能な限り上書きする。.bgを付与する必要はない。

bg-first
bg-second
bg-third
bg-info
bg-important
  <div class="m-b p-sm bg-first">bg-first</div>
  <div class="m-b p-sm bg-second">bg-second</div>
  <div class="m-b p-sm bg-third">bg-third</div>
  <div class="m-b p-sm bg-info">bg-info</div>
  <div class="m-b p-sm bg-important">bg-important</div>

bg-mild

.bg-(color)と併用すると背景色を弱める。オブジェクト・コンポーネントを可能な限り上書きする。.bgを付与する必要はない。

bg-first
bg-second
bg-third
bg-info
bg-important
  <div class="m-b p-sm bg-first bg-mild">bg-first</div>
  <div class="m-b p-sm bg-second bg-mild">bg-second</div>
  <div class="m-b p-sm bg-third bg-mild">bg-third</div>
  <div class="m-b p-sm bg-info bg-mild">bg-info</div>
  <div class="m-b p-sm bg-important bg-mild">bg-important</div>

bg-fade

.bg-(color)と併用すると背景色を薄くする。オブジェクト・コンポーネントを可能な限り上書きする。.bgを付与する必要はない。

bg-first
bg-second
bg-third
bg-info
bg-important
  <div class="m-b p-sm bg-first bg-fade">bg-first</div>
  <div class="m-b p-sm bg-second bg-fade">bg-second</div>
  <div class="m-b p-sm bg-third bg-fade">bg-third</div>
  <div class="m-b p-sm bg-info bg-fade">bg-info</div>
  <div class="m-b p-sm bg-important bg-fade">bg-important</div>

bg-inverse

文字色と背景色を反転する。オブジェクト・コンポーネントを可能な限り上書きする。.bgを付与する必要はない。

bg-inverse
  <div class="p-sm bg-inverse">bg-inverse</div>