【CSS】レスポンシブ・フレキシブルボックスグリッド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ライセンス

 
Akali

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

  • LATEST
  • RELATED
  • POPULAR