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

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

CDN

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

Breakpoints

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

Phone Portrait Smaller than phone landscape *-pp-*
Phone Landscape 540px and larger *-pl-*
Tablet Portrait 768px and larger *-tp-*
Tablet Landscape 991px and larger *-tl-*
Desktop 1200px and larger *-dt-*

Containers

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>

Grid

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

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

Columns

pavilion_1

<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>

Columns & breakpoints

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

<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ライセンス

 
Pavilion

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

  • LATEST
  • RELATED
  • POPULAR