ユーティリティ

回り込み

右寄せ
.%{STYLEGUIDE_PAGE}-float-right
左寄せ
.%{STYLEGUIDE_PAGE}-float-left
回り込み解除
.%{STYLEGUIDE_PAGE}-clear

幅と高さ

幅 100%
.%{STYLEGUIDE_PAGE}-width-max
高さ 100%
.%{STYLEGUIDE_PAGE}-height-max
幅と高さ 100%
.%{STYLEGUIDE_PAGE}-width-height-max

幅(スマートフォン用)

幅 100%
.%{STYLEGUIDE_PAGE}-width-sp
幅 オート
.%{STYLEGUIDE_PAGE}-width-auto-sp

テキスト

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

<p class="%{STYLEGUIDE_PAGE}-text-left">こちらはテストの本文です。</p>
<p class="%{STYLEGUIDE_PAGE}-text-right">こちらはテストの本文です。</p>
<p class="%{STYLEGUIDE_PAGE}-text-center">こちらはテストの本文です。</p>
<p class="%{STYLEGUIDE_PAGE}-text-nowrap">こちらはテストの本文です。</p>

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

<p class="%{STYLEGUIDE_PAGE}-text-primary">こちらはテストの本文です。</p>
<p class="%{STYLEGUIDE_PAGE}-text-info">こちらはテストの本文です。</p>
<p class="%{STYLEGUIDE_PAGE}-text-success">こちらはテストの本文です。</p>
<p class="%{STYLEGUIDE_PAGE}-text-warning">こちらはテストの本文です。</p>
<p class="%{STYLEGUIDE_PAGE}-text-danger">こちらはテストの本文です。</p>

アイコン用背景

<span class="%{STYLEGUIDE_PAGE}-icon-bg">...</span>
<span class="%{STYLEGUIDE_PAGE}-icon-bg %{STYLEGUIDE_PAGE}-icon-bg-info">...</span>
<span class="%{STYLEGUIDE_PAGE}-icon-bg %{STYLEGUIDE_PAGE}-icon-bg-success">...</span>
<span class="%{STYLEGUIDE_PAGE}-icon-bg %{STYLEGUIDE_PAGE}-icon-bg-warning">...</span>
<span class="%{STYLEGUIDE_PAGE}-icon-bg %{STYLEGUIDE_PAGE}-icon-bg-danger">...</span>

角丸

角丸
.%{STYLEGUIDE_PAGE}-round
.%{STYLEGUIDE_PAGE}-circle
<span class="%{STYLEGUIDE_PAGE}-icon-bg %{STYLEGUIDE_PAGE}-round">...</span>
<span class="%{STYLEGUIDE_PAGE}-icon-bg %{STYLEGUIDE_PAGE}-circle">...</span>

画像のレスポンシブ対応

<img src="/themes/system/admin/styleguide/images/sampleImage.jpg" alt="" class="%{STYLEGUIDE_PAGE}-img-responsive">