通常サイトに不要な機能をそぎ落とした軽量CSSフレームワーク「Papier」を使ってみた

PapierというCSSライブラリを見つけました。

これがとても軽量で、使い勝手が良さそうだったので紹介です。

photo by Iouri Goussev

スポンサーリンク
レクタングル(大)広告

Papierとは

Papier CSS library

Papierとは、とても軽量で手軽に使えるセマンティックなレスポンシブCSSライブラリです。

セマンティックというのは、適切なマークアップを使うことで文章に意味を持たせることです。

セマンティックとは、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。セマンティックとは (semantic): – IT用語辞典バイナリ

当然レスポンシブにも多用しているので、ちょっとした記述で手軽にレスポンシブサイトを作成することもできます。

Papierのサイズについて

僕がちょっと利用して感じたのは、通常のサイトで、よく利用するものだけに機能限定して、かなり軽量に仕上げてあるということです。

Bootstrapの場合

Bootstrapロゴ

CSSフレームワークとしては、Bootstrapなどが有名ですが、Bootstrapは、ウェブサービスなど、様々な利用状況に対応できるように機能を盛り込んで作成されています。

そのため、ドットインストールのBootstrap開発準備で利用されているファイルだけ見ても、バージョン3.3.1の時点でサイズが以下のようになります。(縮小版利用時)

  • bootstrap.min.css(111KB)
  • bootstrap.min.js(34.7KB)
  • jquery.min.js(93.5KB)

Bootstrapを利用するのに必要なファイル

全部で240KBぐらいになります。

Papierの場合

Papierロゴ

反面、Papierの場合、JavaScriptは使用していないですし、テキスト入力以外のフォームなどのCSSもなく、できる限り機能をそぎ落とす形で作成されているように感じます。

最低限使用するファイルは、以下のようになっており、とても軽量です。(縮小版利用時)

  • papier.min.css(11KB)

Papierの利用に必要なファイル

JavaScriptなどを使用していないので、11KBと軽量です。

全体のサイズが少ないので、内容もわかりやすく、必要のないコンポーネントなどは、さらに省いて利用しても良いかもしれません。

Papierの利用準備

ファイルが少ないのでサイト作成時に、Papierを利用するのも手軽です。

主な利用手順

利用するのに必要な主な手順は、以下の3手順です。

  1. Papierをダウンロード&設置
  2. Papierファイルを呼び出す
  3. タグを入力

Papierをダウンロード&設置

Papierは、alexanderGugel/papier · GitHubからダウンロードします。

Papierのダウンロード

ダウンロードした「papier-master.zip」ファイルを解凍し、中の「dist」フォルダをサイト編集フォルダにコピーします。

「dist」フォルダの中には、いろいろなバージョンのPapierファイルが入っていますが、「papier.min.css」意外は削除してもOKです。

Papierファイルを呼び出す

Papierファイルを呼び出すには、以下のように書けばOKです。

WordPressで、以下のように利用できます。

テーマで利用

子テーマで利用

最低限の機能なので、既存のCSSと衝突はしづらいですが、子テーマで利用する場合は、当然親テーマのCSSと衝突する部分も出てきます。

ただ、1からレスポンシブテーマを作成するのには、軽量ですし最低限の機能はありますし、なかなかよさそうです。

タグを入力

あとは、タグを入力してクラスでスタイルを呼び出すだけです。

Papierで使えるコンポーネント

Papierは、軽量な分、使用できるコンポーネントが限られています。

以下では、Papierで使えるコンポーネントと、使用例となるソースの紹介をします。

WordPressテーマのスタイルと衝突する部分があるので、微妙に表示が異なるかもしれません。正しい動作は、Papier CSS libraryで確認してください。

ボタン

ボタンスタイルは、現在利用しているテーマのbutton要素と衝突しているので、マウスホバー時の動作が違います。通常は、背景色は変更されません。

ボタンサイズ

sとかmとかlとか短い。

ユーティリティー

12カラムのグリッドシステム

幅指定も簡単です。(以下画像)

12カラムグリッドシステム

Bootstrapのように、幅を12カラムで指定することができます。

レスポンシブグリッド

レスポンシブ表示も可能です。(以下画像)

レスポンシブグリットシステム

ブラウザな幅を狭めると、以下のように表示されます。

レスポンシブグリッドシステム

パネル

I am a header

This is where the content goes…
I am a header

This is where the content goes…
I am a header

This is where the content goes…
I am a header

This is where the content goes…
I am a header

This is where the content goes…

影つきカード

card
depth-0
card
depth-1
card
depth-2
card
depth-3
card
depth-4
card
depth-5

ページャー

  1. «
  2. 1
  3. 2
  4. 3
  5. 4
  6. »

アラート

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.

インプット

テキストエリア

ベーシックテーブル

通常のテーブル。

# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010

ゼブラテーブル

行ごとに色が変わるテーブル。

# 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

フルワイズテーブル

横幅いっぱいになるテーブル。

# 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

ホバーテーブル

マウスを乗せると、行の色が変わるテーブル。

# 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

タブ

WordPressのグローバルナビ的なメニューなどに。

まとめ

Papier CSS libraryは、11KBと軽量ながら、このようなコンポーネントが利用できます。

レスポンシブグリットで、骨格を作り、タブでグローバルナビを作成し、入力フォームとボタンでコメント入力欄を作成し、あとはインデックスページにページャーでもつければ、レスポンシブのWordpressテーマを手軽に作成できそうです。

「CSSフレームワークを使用してサイトを作りたいけど、Bootstrapまでの機能は必要ない」なんて場合は、軽くて利用も簡単なので、なかなか良さそうなCSSライブラリだと思います。