u-expand

コンテナブロックの最大幅を無視して、要素のアウトラインのみをウィンドウ幅全体に拡張する。
.l-document の max-width を解除していると、横スクロールバーが表示されてしまう。

(l-container > this)

(l-container > u-expand > this)

<div class="l-container" style="background-color: #ffaacc; padding-top: 1rem; padding-bottom: 1rem;">
    <div style="margin-bottom: 1rem; padding: 1rem; text-align:center; background-color: rgba(255,255,255,.5); color: #000">(l-container > this)</div>

    <div class="u-expand" style="background-color: #ffcc66;">
        <div style="padding: 1rem; text-align:center; background-color: rgba(255,255,255,.5); color: #000">(l-container > u-expand > this)</div>
    </div>
</div>

u-expand-sm-down

(breakpoint)が sm 以下のときのみ、コンテナブロックの余白を無視して、要素全体をウィンドウ幅全体に拡張する。
u-expand とは異なり、.l-document の変更による影響はない。

(l-container > this)

(l-container > u-expand-sm-down > this)

<div class="l-container" style="background-color: #ffaacc; padding-top: 1rem; padding-bottom: 1rem;">
    <div style="margin-bottom: 1rem; padding: 1rem; text-align:center; background-color: rgba(255,255,255,.5); color: #000">(l-container > this)</div>

    <div class="u-expand-sm-down" style="background-color: #ffcc66;">
        <div style="padding: 1rem; text-align:center; background-color: rgba(255,255,255,.5); color: #000">(l-container > u-expand-sm-down > this)</div>
    </div>
</div>

utility-expand

u-expand

u-expand-sm-down

Style guide