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


ちょっと前に知った、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)

YahooのCSSフレームワーク「Pure」” へのコメントが 1 点あります

  1. ピンバック: 6月23日の注目記事 | Javable.Jp

コメントを残す

メールアドレスが公開されることはありません。