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

PavilionはシンプルなCSSフレームワーク。
<!-- pavilion.min.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pavilion/1.0.24/pavilion.min.css">
グリッドシステムは、デバイスの画面幅に合わせた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-* |
3タイプのコンテナがあります。
1140pxのデフォルトの最大幅、ビューポートの中央に配置されます。
<div class="container"> <!-- Container width: 1140px --> </div>
<div class="container-full-width"> <!-- Container width: 100% --> </div>
特定の狭いデザインを作成するときに使います。
<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>
その他にも下記のものが用意されています。
詳しい説明などはPavilionのページをご覧下さい。
MITライセンス