CSS

【CSS】flexboxに基づくCSSフレームワークEqualize

April 22, 2017
EqualizeCSS

Equalizeはflexboxの特性に基づいて作られた軽量のCSSグリッドフレームワーク。必要なスタイルを置き換えるだけで列とマークアップを管理できます。クラス名は、他のCSSフレームワークと一致しています。

CSS

<link rel="stylesheet" href="css/equalize.css">

Responsive columns

フレームワークの主な要素はカラム。グリッドは12列の原則に基づいており、クラスを使用してコンテナ内の各デバイスのブロック用の列の数を指定できます。

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
</div>
</div>
</div>

Demo/Download