CSS

【CSS】レスポンシブ・フレキシブルボックスグリッドAkali

July 18, 2016
Akali

Akaliはページが水平方向に12列のスペースを分割して考えられた考えられたフレキシブルボックスグリッド。

CSS

<link rel='stylesheet' type='text/css' href='akali-grid.css'>

Super Semantic

<div class="row">
  <div class="column">
    <p>Equal width column</p>
  </div>
  <div class="column">
    <p>Equal width column</p>
  </div>
</div>

<div class="row">
  <div class="four wide column">
    <p>Four wide column</p>
  </div>
  <div class="three wide column">
    <p>Three wide column</p>
  </div>
  <div class="two wide column">
    <p>Two wide column</p>
  </div>
  <div class="fill column">
    <p>Fill column</p>
  </div>
</div>

<div class="two column row">
  <div class="column">
    <p>Limited two column grid</p>
  </div>
  <div class="column">
    <p>Limited two column grid</p>
  </div>
  <div class="column">
    <p>Limited two column grid</p>
  </div>
  <div class="column">
    <p>Limited two column grid</p>
  </div>
</div>

Responsive

<div class="row">
  <div class="eight wide on mobile
              six wide on tablet
              five wide on computer
              column">
    <p>Super responsive column</p>
  </div>
  <div class="four wide on mobile
              fill on computer
              column">
    <p>Nice column</p>
  </div>
</div>
view raw

Magical

<!-- List Item 1 !-->
<div class="row">
  <div class="two wide column">
    <p>Two wide column</p>
  </div>
  <div class="fill column">
    <p>Fill column</p>
  </div>
</div>

<!-- List Item 2 !-->
<div class="centered row">
  <div class="four wide column">
    <p>Centered column</p>
  </div>
</div>

<!-- List Item 3 !-->
<div class="stackable row">
  <div class="nine wide column">
    <p>Stackable nine wide column</p>
  </div>
  <div class="three wide column">
    <p>Stackable three wide column</p>
  </div>
</div>

<!-- List Item 4 !-->
<div class="row">
  <div class="computer only
              column">
    <p>Computer only column</p>
  </div>
  <div class="mobile and tablet only
              column">
    <p>Mobile and tablet only</p>
  </div>
</div>

<!-- List Item 5 !-->
<div class="row">
  <div class="six wide on mobile
              offset two on tablet
              five wide on computer
              offset zero on computer
              column">
    <p>Offset only on tablet column</p>
  </div>
</div>

<!-- List Item 6 !-->
<div class="reversed row">
  <div class="column">
    <p>Reversed column 1</p>
  </div>
  <div class="column">
    <p>Reversed column 2</p>
  </div>
</div>

<!-- List Item 7 !-->
<div class="row">
  <div class="fluid container">
    <p>Full width container</p>
  </div>
</div>

MITライセンス