layout-grid-flex

l-f-row

flexboxによるグリッドのグループを作成する。
余白・段組の仕様を変更したい場合は /_scss/config_advance.css の各変数を調整すること。

l-f-col-4-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro
l-f-col-4-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!
l-f-col-4-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="l-f-row">
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-first p" style="height: 100%;">l-f-col-4-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro</div>
    </div>
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-first p" style="height: 100%;">l-f-col-4-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!</div>
    </div>
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-first p" style="height: 100%;">l-f-col-4-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
</div>

l-f-row-(size)

flexboxによるグリッドで余白が異なるグループを作成する。
(size)は0, sm, md, lg に対応している。

l-f-row-0
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro
l-f-row-0
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!
l-f-row-0
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
l-f-row-sm
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro
l-f-row-sm
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!
l-f-row-sm
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
l-f-row-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro
l-f-row-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!
l-f-row-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="l-f-row l-f-row-0">
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-first p" style="height: 100%;">l-f-row-0<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro</div>
    </div>
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-first p" style="height: 100%; opacity: 0.8;">l-f-row-0<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!</div>
    </div>
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-first p" style="height: 100%;">l-f-row-0<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
</div>

<div class="l-f-row l-f-row-sm">
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-second p" style="height: 100%;">l-f-row-sm<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro</div>
    </div>
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-second p" style="height: 100%; opacity: 0.8;">l-f-row-sm<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!</div>
    </div>
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-second p" style="height: 100%;">l-f-row-sm<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
</div>

<div class="l-f-row l-f-row-lg">
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-third p" style="height: 100%;">l-f-row-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro</div>
    </div>
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-third p" style="height: 100%; opacity: 0.8;">l-f-row-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!</div>
    </div>
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-third p" style="height: 100%;">l-f-row-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
</div>

l-f-col

flexboxによるグリッドのセルを作成する。このクラス単独では余白のみ確保する。

l-f-col-(column)-(breakpoint)

flexboxによるグリッドのセルを、ウィンドウ幅が(breakpoint)よりも大きくなったときに、(column) / 12の幅で配置する。
(breakpoint)の指定がない場合は、常にその幅となる。
このテーマでは、(column)は3, 4, 6のみ、(breakpoint)はsm, md, lgのみ対応している。

l-f-col-3-sm
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro
l-f-col-3-sm
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!
l-f-col-3-sm
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
l-f-col-3-sm
Lorem ipsum dolor sit amet
l-f-col-3-md
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro
l-f-col-3-md
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!
l-f-col-3-md
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
l-f-col-3-md
Lorem ipsum dolor sit amet
l-f-col-4-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro
l-f-col-4-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!
l-f-col-4-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
l-f-col-6-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro
l-f-col-6-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!
l-f-col-6-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
l-f-col-6-lg
Lorem ipsum dolor sit amet
<div class="l-f-row m-b-lg">
    <div class="l-f-col l-f-col-3-sm m-b">
        <div class="bg-first p" style="height: 100%;">l-f-col-3-sm<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro</div>
    </div>
    <div class="l-f-col l-f-col-3-sm m-b">
        <div class="bg-first p" style="height: 100%;">l-f-col-3-sm<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!</div>
    </div>
    <div class="l-f-col l-f-col-3-sm m-b">
        <div class="bg-first p" style="height: 100%;">l-f-col-3-sm<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
    <div class="l-f-col l-f-col-3-sm m-b">
        <div class="bg-first p" style="height: 100%;">l-f-col-3-sm<br>Lorem ipsum dolor sit amet</div>
    </div>
</div>

<div class="l-f-row m-b-lg">
    <div class="l-f-col l-f-col-3-md m-b">
        <div class="bg-second p" style="height: 100%;">l-f-col-3-md<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro</div>
    </div>
    <div class="l-f-col l-f-col-3-md m-b">
        <div class="bg-second p" style="height: 100%;">l-f-col-3-md<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!</div>
    </div>
    <div class="l-f-col l-f-col-3-md m-b">
        <div class="bg-second p" style="height: 100%;">l-f-col-3-md<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
    <div class="l-f-col l-f-col-3-md m-b">
        <div class="bg-second p" style="height: 100%;">l-f-col-3-md<br>Lorem ipsum dolor sit amet</div>
    </div>
</div>

<div class="l-f-row m-b-lg">
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-third p" style="height: 100%;">l-f-col-4-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro</div>
    </div>
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-third p" style="height: 100%;">l-f-col-4-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!</div>
    </div>
    <div class="l-f-col l-f-col-4-lg m-b">
        <div class="bg-third p" style="height: 100%;">l-f-col-4-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
</div>

<div class="l-f-row">
    <div class="l-f-col l-f-col-6-lg m-b">
        <div class="bg-important p" style="height: 100%;">l-f-col-6-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro</div>
    </div>
    <div class="l-f-col l-f-col-6-lg m-b">
        <div class="bg-important p" style="height: 100%;">l-f-col-6-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro, fugit omnis, expedita ratione eos sunt quaerat, numquam eaque a iusto. Quia, nobis explicabo asperiores facere!</div>
    </div>
    <div class="l-f-col l-f-col-6-lg m-b">
        <div class="bg-important p" style="height: 100%;">l-f-col-6-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
    <div class="l-f-col l-f-col-6-lg m-b">
        <div class="bg-important p" style="height: 100%;">l-f-col-6-lg<br>Lorem ipsum dolor sit amet</div>
    </div>
</div>