PapierというCSSライブラリを見つけました。
これがとても軽量で、使い勝手が良さそうだったので紹介です。
photo by Iouri Goussev
スポンサーリンク
目次
Papierとは
Papierとは、とても軽量で手軽に使えるセマンティックなレスポンシブCSSライブラリです。
セマンティックというのは、適切なマークアップを使うことで文書に意味を持たせることです。
セマンティックとは、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。セマンティックとは (semantic)： – IT用語辞典バイナリ
当然レスポンシブにも多用しているので、ちょっとした記述で手軽にレスポンシブサイトを作成することもできます。
Papierのサイズについて
僕がちょっと利用して感じたのは、通常のサイトで、よく利用するものだけに機能限定して、かなり軽量に仕上げてあるということです。
Bootstrapの場合
CSSフレームワークとしては、Bootstrapなどが有名ですが、Bootstrapは、ウェブサービスなど、様々な利用状況に対応できるように機能を盛り込んで作成されています。
そのため、ドットインストールのBootstrap開発準備で利用されているファイルだけ見ても、バージョン3.3.1の時点でサイズが以下のようになります。（縮小版利用時）
- bootstrap.min.css（111KB）
- bootstrap.min.js（34.7KB）
- jquery.min.js（93.5KB）
全部で240KBぐらいになります。
Papierの場合
反面、Papierの場合、JavaScriptは使用していないですし、テキスト入力以外のフォームなどのCSSもなく、できる限り機能をそぎ落とす形で作成されているように感じます。
最低限使用するファイルは、以下のようになっており、とても軽量です。（縮小版利用時）
- papier.min.css（11KB）
JavaScriptなどを使用していないので、11KBと軽量です。
全体のサイズが小さいので、内容もわかりやすく、必要のないコンポーネントなどは、さらに省いて利用しても良いかもしれません。
Papierの利用準備
ファイルが少ないのでサイト作成時に、Papierを利用するのも手軽です。
主な利用手順
利用するのに必要な主な手順は、以下の3手順です。
- Papierをダウンロード＆設置
- Papierファイルを呼び出す
- タグを入力
Papierをダウンロード＆設置
Papierは、alexanderGugel/papier · GitHubからダウンロードします。
ダウンロードした「papier-master.zip」ファイルを解凍し、中の「dist」フォルダをサイト編集フォルダにコピーします。
「dist」フォルダの中には、いろいろなバージョンのPapierファイルが入っていますが、「papier.min.css」以外は削除してもOKです。
Papierファイルを呼び出す
Papierファイルを呼び出すには、以下のように書けばOKです。
<link rel="stylesheet" href="dist/papier.min.css">
WordPressで、以下のように利用できます。
テーマで利用
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/dist/papier.min.css">
子テーマで利用
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/dist/papier.min.css">
最低限の機能なので、既存のCSSと衝突はしづらいですが、子テーマで利用する場合は、当然親テーマのCSSと衝突する部分も出てきます。
ただ、1からレスポンシブテーマを作成するのには、軽量ですし最低限の機能はありますし、なかなかよさそうです。
タグを入力
あとは、タグを入力してクラスでスタイルを呼び出すだけです。
<button class="bg-white">bg-white</button> <button class="bg-red">bg-red</button>
Papierで使えるコンポーネント
Papierは、軽量な分、使用できるコンポーネントが限られています。
以下では、Papierで使えるコンポーネントと、使用例となるソースの紹介をします。
WordPressテーマのスタイルと衝突する部分があるので、微妙に表示が異なるかもしれません。正しい動作は、Papier CSS libraryで確認してください。
ボタン
ボタンスタイルは、現在利用しているテーマのbutton要素と衝突しているので、マウスホバー時の動作が違います。通常は、背景色は変更されません。
<button class="bg-white">bg-white</button> <button class="bg-red">bg-red</button> <button class="bg-pink">bg-pink</button> <button class="bg-purple">bg-purple</button> <button class="bg-deep-purple">bg-deep-purple</button> <button class="bg-indigo">bg-indigo</button> <button class="bg-blue">bg-blue</button> <button class="bg-light-blue">bg-light-blue</button> <button class="bg-cyan">bg-cyan</button> <button class="bg-teal">bg-teal</button> <button class="bg-green">bg-green</button> <button class="bg-light-green">bg-light-green</button> <button class="bg-lime">bg-lime</button> <button class="bg-yellow">bg-yellow</button> <button class="bg-amber">bg-amber</button> <button class="bg-orange">bg-orange</button> <button class="bg-deep-orange">bg-deep-orange</button> <button class="bg-brown">bg-brown</button> <button class="bg-grey">bg-grey</button> <button class="bg-blue-grey">bg-blue-grey</button>
ボタンサイズ
<button class="xs bg-deep-purple">xs</button> <button class="s bg-indigo">s</button> <button class="m bg-blue">m</button> <button class="l bg-light-blue">l</button> <button class="xl bg-cyan">xl</button>
sとかmとかlとか短い。
ユーティリティー
<button class="loose bg-red">loose bg-red</button> <button class="uppercase bg-green">uppercase bg-green</button> <button disabled="disabled">[disabled]</button> <button class="bg-indigo"><i class="icon ion-ios-cart"></i> Icon button</button>
12カラムのグリッドシステム
幅指定も簡単です。（以下画像）
<div class="row demo"> <div class="col-2 bg-red"><strong>col-2</strong><br> bg-red</div> <div class="col-2 bg-pink"><strong>col-2</strong><br> bg-pink</div> <div class="col-2 bg-purple"><strong>col-2</strong><br> bg-purple</div> <div class="col-2 bg-deep-purple"><strong>col-2</strong><br> bg-deep-purple</div> <div class="col-2 bg-indigo"><strong>col-2</strong><br> bg-indigo</div> <div class="col-2 bg-indigo"><strong>col-2</strong><br> bg-indigo</div> </div> <div class="row demo"> <div class="col-2 bg-blue"><strong>col-2</strong><br> bg-blue</div> <div class="col-2 bg-light-blue"><strong>col-2</strong><br> bg-light-blue</div> <div class="col-2 bg-cyan"><strong>col-2</strong><br> bg-cyan</div> <div class="col-2 bg-teal"><strong>col-2</strong><br> bg-teal</div> <div class="col-2 bg-green"><strong>col-2</strong><br> bg-green</div> <div class="col-2 bg-light-green"><strong>col-2</strong><br> bg-light-green</div> </div> <div class="row demo"> <div class="col-2 bg-lime"><strong>col-2</strong><br> bg-lime</div> <div class="col-3 bg-yellow"><strong>col-3</strong><br> bg-yellow</div> <div class="col-4 bg-amber"><strong>col-4</strong><br> bg-amber</div> <div class="col-3 bg-orange"><strong>col-3</strong><br> bg-orange</div> </div> <div class="row demo"> <div class="col-6 bg-deep-orange"><strong>col-6</strong><br> bg-deep-orange</div> <div class="col-3 bg-brown"><strong>col-3</strong><br> bg-brown</div> <div class="col-1 bg-grey"><strong>col-1</strong><br> bg-grey</div> <div class="col-2 bg-blue-grey"><strong>col-2</strong><br> bg-blue-grey</div> </div>
Bootstrapのように、幅を12カラムで指定することができます。
レスポンシブグリッド
レスポンシブ表示も可能です。（以下画像）
ブラウザの幅を狭めると、以下のように表示されます。
<div class="row demo"> <div class="col-sm-6 bg-red"><strong>col-sm-6</strong><br> bg-red</div> <div class="col-sm-6 bg-yellow"><strong>col-sm-6</strong><br> bg-yellow</div> </div> <div class="row demo"> <div class="col-md-6 bg-lime"><strong>col-md-6</strong><br> bg-lime</div> <div class="col-md-6 bg-grey"><strong>col-md-6</strong><br> bg-grey</div> </div> <div class="row demo"> <div class="col-lg-6 bg-blue-grey"><strong>col-lg-6</strong><br> bg-blue-grey</div> <div class="col-lg-6 bg-cyan"><strong>col-lg-6</strong><br> bg-cyan</div> </div> <div class="row demo"> <div class="col-xl-6 bg-teal"><strong>col-xl-6</strong><br> bg-teal</div> <div class="col-xl-6 bg-purple"><strong>col-xl-6</strong><br> bg-purple</div> </div> </div>
パネル
This is where the content goes…
This is where the content goes…
This is where the content goes…
This is where the content goes…
This is where the content goes…
<section class="panel"> <header class="bg-subtle">I am a header</header> <main>This is where the content goes...</main> </section> <section class="panel"> <header class="bg-blue">I am a header</header> <main>This is where the content goes...</main> </section> <section class="panel"> <header class="bg-red">I am a header</header> <main>This is where the content goes...</main> </section> <section class="panel"> <header class="bg-teal">I am a header</header> <main>This is where the content goes...</main> </section> <section class="panel"> <header class="bg-orange">I am a header</header> <main>This is where the content goes...</main> </section>
影つきカード
card
depth-0
depth-0
card
depth-1
depth-1
card
depth-2
depth-2
card
depth-3
depth-3
card
depth-4
depth-4
card
depth-5
depth-5
<div class="row">
<div class="col-md-6">
<div class="card depth-0">card<br> <strong>depth-0</strong></div>
</div>
<div class="col-md-6">
<div class="card depth-1">card<br> <strong>depth-1</strong></div>
</div>
<div class="col-md-6">
<div class="card depth-2">card<br> <strong>depth-2</strong></div>
</div>
<div class="col-md-6">
<div class="card depth-3">card<br> <strong>depth-3</strong></div>
</div>
<div class="col-md-6">
<div class="card depth-4">card<br> <strong>depth-4</strong></div>
</div>
<div class="col-md-6">
<div class="card depth-5">card<br> <strong>depth-5</strong></div>
</div>
</div>ページャー
<ol class="pager"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li class="active">3</li> <li><a href="#">4</a></li> <li><a href="#">»</a></li> </ol>
アラート
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it’s not super important.
Warning! Better check yourself, you’re not looking too good.
Oh snap! Change a few things up and try submitting again.
<div class="alert alert-success" role="alert"> <strong>Well done!</strong> You successfully read this important alert message. </div> <div class="alert alert-info" role="alert"> <strong>Heads up!</strong> This alert needs your attention, but it's not super important. </div> <div class="alert alert-warning" role="alert"> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> <div class="alert alert-danger" role="alert"> <strong>Oh snap!</strong> Change a few things up and try submitting again. </div>
インプット
<input type="text" placeholder="Your name"> <input type="text" placeholder="[disabled]" disabled="disabled"> <input type="text" value="[readonly]" readonly="readonly">
テキストエリア
<textarea>I'm a textarea.</textarea> <textarea class="full-width">I'm a textarea.</textarea>
ベーシックテーブル
通常のテーブル。
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
<table>
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>ゼブラテーブル
行ごとに色が変わるテーブル。
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
| 4 | Cars | Accord | 2012 |
| 5 | Are | BMW | 2010 |
| 6 | Obsolete | BMW | 2010 |
<table>
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody class="zebra">
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
<tr>
<td>4</td>
<td>Cars</td>
<td>Accord</td>
<td>2012</td>
</tr>
<tr>
<td>5</td>
<td>Are</td>
<td>BMW</td>
<td>2010</td>
</tr>
<tr>
<td>6</td>
<td>Obsolete</td>
<td>BMW</td>
<td>2010</td>
</tr>
</tbody>
</table>フルワイズテーブル
横幅いっぱいになるテーブル。
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
| 4 | Cars | Accord | 2012 |
| 5 | Are | BMW | 2010 |
| 6 | Obsolete | BMW | 2010 |
<table class="full-width">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody class="zebra">
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
<tr>
<td>4</td>
<td>Cars</td>
<td>Accord</td>
<td>2012</td>
</tr>
<tr>
<td>5</td>
<td>Are</td>
<td>BMW</td>
<td>2010</td>
</tr>
<tr>
<td>6</td>
<td>Obsolete</td>
<td>BMW</td>
<td>2010</td>
</tr>
</tbody>
</table>ホバーテーブル
マウスを乗せると、行の色が変わるテーブル。
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
| 4 | Cars | Accord | 2012 |
| 5 | Are | BMW | 2010 |
| 6 | Obsolete | BMW | 2010 |
<table>
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody class="hover">
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
<tr>
<td>4</td>
<td>Cars</td>
<td>Accord</td>
<td>2012</td>
</tr>
<tr>
<td>5</td>
<td>Are</td>
<td>BMW</td>
<td>2010</td>
</tr>
<tr>
<td>6</td>
<td>Obsolete</td>
<td>BMW</td>
<td>2010</td>
</tr>
</tbody>
</table>タブ
WordPressのグローバルナビ的なメニューなどに。
<ul class="tabs bg-blue"> <li><a href="#">This</a></li> <li><a href="#">is</a></li> <li class="active"><a href="#">another</a></li> <li><a href="#">test</a></li> </ul> <ul class="tabs tabs-justified bg-green"> <li><a href="#">Justified</a></li> <li><a href="#">tabs</a></li> <li class="active"><a href="#">work</a></li> </ul> <ul class="tabs bg-orange"> <li><a href="#">Just</a></li> <li><a href="#">another</a></li> <li><a href="#">test</a></li> </ul>
まとめ
Papier CSS libraryは、11KBと軽量ながら、このようなコンポーネントが利用できます。
レスポンシブグリットで、骨格を作り、タブでグローバルナビを作成し、入力フォームとボタンでコメント入力欄を作成し、あとはインデックスページにページャーでもつければ、レスポンシブのWordpressテーマを手軽に作成できそうです。
「CSSフレームワークを使用してサイトを作りたいけど、Bootstrapまでの機能は必要ない」なんて場合は、軽くて利用も簡単なので、なかなか良さそうなCSSライブラリだと思います。
