ユーティリティも用意された超軽量なCSSレイアウトライブラリ・「lyt」

lyt

lytはユーティリティも用意された超軽量なCSSレイアウトライブラリです。flexboxベースのグリッドレイアウトをシンプルなclassで構築する事が可能です。

また、痒いところに手が届くユーティリティクラスも用意されており、lytのみでもある程度完成されたWebページを作れるようになっています。

動作サンプルは上にある通りですが、簡単に使い方をご紹介します。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ColinEspinas/lyt/dist/lyt.min.css">

↑ ライブラリはCDNも用意されているので導入前にテスト出来ます。

<div class="row gap">
    <div class="column -6">
        <p class="padding-m box">6 of 12</p>
    </div>
    <div class="column -6">
        <p class="padding-m box">6 of 12</p>
    </div>
</div>

↑ 基本的には-nクラスで幅を制御します。例えば上記なら1/2にする際は-6というclassを使います。

<div class="row gap">
    <div class="column sm-10 md-2">
        <p class="padding-m box"></p>
    </div>
    <div class="column sm-2 md-10">
        <p class="padding-m box"></p>
    </div>
</div>

↑ こちらはブレークポイントを使う場合の指定方法です。先ほどの-nクラスの前にsm(544px)やlg(1012px)などを加える事で任意の要素を各モニタサイズに応じて設計する事が可能です。

<p class="display-ib">...</p>
<p class="float-l">...</p>
<p class="margin-xs">...</p>
<p class="padding-t-xxl">...<p>
<p class="width-33">...<p>

↑ 各ユーティリティクラスです。class名を見ればなんとなく分かると思いますが、想像通りに動作します。xsやxxlなどの各サイズはドキュメントをご参照下さい。

こちらのライブラリは圧縮版で25kb程度と、とても軽量なサイズで設計されています。class名の命名規則的に他ライブラリとのコンフリクトの可能性もありますが、なかなかよさげでした。ライセンスはMITとの事です。

lyt