layout-grid-float

l-row

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

命名規則を他のCSSフレームワークと同様にしたい場合は以下を調整すること。

  • /_scss/lauout/_grid_float.css
  • /_scss/mixin/mixin.css の make-row(), make-grid-columns()
l-col-4-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro
l-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-col-4-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="l-row">
    <div class="l-col l-col-4-lg m-b">
        <div class="bg-first p">l-col-4-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro</div>
    </div>
    <div class="l-col l-col-4-lg m-b">
        <div class="bg-first p">l-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-col l-col-4-lg m-b">
        <div class="bg-first p">l-col-4-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
</div>

l-row-(size)

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

l-row-0
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro
l-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-row-0
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
l-row-sm
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro
l-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-row-sm
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
l-row-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro
l-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-row-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="l-row l-row-0">
    <div class="l-col l-col-4-lg m-b">
        <div class="bg-first p">l-row-0<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro</div>
    </div>
    <div class="l-col l-col-4-lg m-b">
        <div class="bg-first p" style="height: 100%; opacity: 0.8;">l-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-col l-col-4-lg m-b">
        <div class="bg-first p">l-row-0<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
</div>

<div class="l-row l-row-sm">
    <div class="l-col l-col-4-lg m-b">
        <div class="bg-second p">l-row-sm<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro</div>
    </div>
    <div class="l-col l-col-4-lg m-b">
        <div class="bg-second p" style="height: 100%; opacity: 0.8;">l-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-col l-col-4-lg m-b">
        <div class="bg-second p">l-row-sm<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
</div>

<div class="l-row l-row-lg">
    <div class="l-col l-col-4-lg m-b">
        <div class="bg-third p">l-row-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro</div>
    </div>
    <div class="l-col l-col-4-lg m-b">
        <div class="bg-third p" style="height: 100%; opacity: 0.8;">l-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-col l-col-4-lg m-b">
        <div class="bg-third p">l-row-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
</div>

l-col

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

l-col-(column)-(breakpoint)

floatによるグリッドのセルを、ウィンドウ幅が(breakpoint)よりも大きくなったときに、(column) / 12の幅で配置する。
(breakpoint)の指定がない場合は、常にその幅となる。
このテーマでは、(column)は1 - 12、(breakpoint)は標準のブレークポイントを参照。

スマートフォン(default)、低解像度タブレットまたはスマートフォン横回転(sm)、XGA以上(lg)でレイアウトを変更する代表的な例

l-col-12
l-col-6-sm
l-col-4-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro
l-col-12
l-col-6-sm
l-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-col-12
l-col-6-sm
l-col-4-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="l-row">
    <div class="l-col l-col-12 l-col-6-sm l-col-4-lg">
        <div class="bg-first p">l-col-12<br>l-col-6-sm<br>l-col-4-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro</div>
    </div>
    <div class="l-col l-col-12 l-col-6-sm l-col-4-lg">
        <div class="bg-first p">l-col-12<br>l-col-6-sm<br>l-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-col l-col-12 l-col-6-sm l-col-4-lg">
        <div class="bg-first p">l-col-12<br>l-col-6-sm<br>l-col-4-lg<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
</div>

iPhone SEまたは拡大UI(default)、iPhone 8(xs)、iPhone 8 Plus(sm)間でレイアウトを変更する例

l-col-12
l-col-6-xs
l-col-4-sm
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro
l-col-12
l-col-6-xs
l-col-4-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-col-12
l-col-6-xs
l-col-4-sm
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="l-row">
    <div class="l-col l-col-12 l-col-6-xs l-col-4-sm">
        <div class="bg-second p">l-col-12<br>l-col-6-xs<br>l-col-4-sm<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro</div>
    </div>
    <div class="l-col l-col-12 l-col-6-xs l-col-4-sm">
        <div class="bg-second p">l-col-12<br>l-col-6-xs<br>l-col-4-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-col l-col-12 l-col-6-xs l-col-4-sm">
        <div class="bg-second p">l-col-12<br>l-col-6-xs<br>l-col-4-sm<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
</div>

l-col-(column)-(breakpoint)-(push or pull)

グリッドのセルの開始位置をずらす。pushは右、pullは左にずれる。
組み合わせるとfloatのグリッドでもセルの左右入れ替えができる。 このテーマでは、(column)は1 - 12、(breakpoint)はxs, sm, md, lg, xl, xxlに対応している。

l-col-6-lg
l-col-2-lg-push
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro
l-col-4-lg
l-col-8-lg-push
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
l-col-8-lg
l-col-4-lg-pull
Nostrum consectetur nihil nemo eum, recusandae minus impedit nisi aspernatur illo ipsum commodi animi earum perferendis facere voluptas ratione incidunt, ab aperiam.
<div class="l-row m-b">
    <div class="l-col l-col-6-lg l-col-2-lg-push">
        <div class="bg-third p">l-col-6-lg<br>l-col-2-lg-push<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit corporis nam aliquid at porro</div>
    </div>
</div>

<div class="l-row m-b">
    <div class="l-col l-col-4-lg l-col-8-lg-push">
        <div class="bg-third p">l-col-4-lg<br>l-col-8-lg-push<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
    <div class="l-col l-col-8-lg l-col-4-lg-pull">
        <div class="bg-third p">l-col-8-lg<br>l-col-4-lg-pull<br>Nostrum consectetur nihil nemo eum, recusandae minus impedit nisi aspernatur illo ipsum commodi animi earum perferendis facere voluptas ratione incidunt, ab aperiam.</div>
    </div>
</div>