YahooのCSSフレームワーク「Pure」

Tweet

Share on Tumblr

ちょっと前に知った、Yahooが公開しているjavascript不要で軽量なCSSフレームワーク「Pure」関連のメモ。
Pureという、他でもわんさか使われてるような単語が名前になってるので、検索に引っかかりにくいということもあり、このページにメモっておくことにしました。

Pure(公式)
Pure自体が欲しい方は、ここにいけばOKです。

Pureを使うには、

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css">

と1行書くだけで大丈夫です。これに全機能が入ってます。
※2013年6月11日に0.2.0が公開されました。

全機能入ったもの(pure-min.css)で20KB程度です。
Bootstrap2.x系は100KB位なので、ずいぶん軽いですね。もちろんその分シンプル(出来ること、デザイン・色のパターンは少ない)ですが、フレームワークは必要最低限のもので、後は自分で作るという人には選択肢の一つとしてありかと思います。

Pureで出来ることの内主なものは、

• Grids
  グリッドデザイン、レスポンシブデザインなど
• Forms
  フォームデザイン(横並び、縦並び、マルチカラム、グループ化、input欄のサイズ指定、入力必須、フォーム項目無効化など)
• Buttons
  ボタンデザイン(色、サイズ、ボタン無効化、ボタンにアイコンをつける)
• Tables
  テーブルデザイン(表の枠、背景色、横線のみ表示、ストライプ)
• Menus
  メニューデザイン(横並びメニュー、縦並びメニュー、ドロップダウンメニュー、ページング)

な感じです。
公式サイトの左メニューを押せば、それぞれの書き方が出てきます。

レイアウトに関しては、公式のLayoutsに掲載されているページと、そのソースを見つつ、試行錯誤してみるのが良いかと思います。

日本語で、という方は以下のページが参考になります。
Pure を使って 5分でレスポンシブな Blog テンプレートを作る(WWW WATCH)