PavilionはシンプルなCSSフレームワーク。

<!-- pavilion.min.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pavilion/1.0.24/pavilion.min.css">

グリッドシステムは、デバイスの画面幅に合わせた4ブレークポイントで動作します。

3タイプのコンテナがあります。

Standard (fixed width) container

1140pxのデフォルトの最大幅、ビューポートの中央に配置されます。

<div class="container">
    <!-- Container width: 1140px -->
</div>

Full width container

<div class="container-full-width">
    <!-- Container width: 100% -->
</div>

Breakpoint specific containers

特定の狭いデザインを作成するときに使います。

<div class="container-pl">
    <!-- Container width: phone landscape / 540px -->
</div>

<div class="container-tp">
    <!-- Container width: tablet portrait / 768px -->
</div>

<div class="container-tl">
    <!-- Container width: tablet landscape / 991px -->
</div>

列を持つレイアウトを作成する際には.container要素で画面の左右の端を維持します。コンテナ内部の列を配置する場合、二重のパディングを防止するために.rowを配置する。

<div class="container">
    <div class="row">
        <!-- Columns go here, inside a row to prevent double paddings -->
    </div>
</div>

<div class="row">
    <div class="col-pl-50 col-tl-33">
        <!-- 33.3333% width on 'tablet landscape' or larger -->
        <!-- 50% width on 'phone landscape' or larger -->
        <!-- 100% width on smaller than 'phone landscape' -->
    </div>
    <div class="col-pl-50 col-tl-66">
        <!-- 66.6666% width on tablet landscape or larger -->
        <!-- 50% width on 'phone landscape' or larger -->
        <!-- 100% width on smaller than 'phone landscape' -->
    </div>
</div>

柔軟なレイアウトを作成するには、ブレークポイントごとに、特定の列の幅を設定できるようにする必要があります。列にブレークポイントの略称クラスを追加します。

<div class="row">
    <div class="col-pl-50 col-tl-33">
        <!-- 33.3333% width on 'tablet landscape' or larger -->
        <!-- 50% width on 'phone landscape' or larger -->
        <!-- 100% width on smaller than 'phone landscape' -->
    </div>
    <div class="col-pl-50 col-tl-66">
        <!-- 66.6666% width on tablet landscape or larger -->
        <!-- 50% width on 'phone landscape' or larger -->
        <!-- 100% width on smaller than 'phone landscape' -->
    </div>
</div>

その他にも下記のものが用意されています。

1. Flexbox
2. Typography
3. Buttons
4. Lists
5. Forms
6. Tables

詳しい説明などはPavilionのページをご覧下さい。
MITライセンス

• Tag
• CSS
• Responsive