CSS にもフレームワークがあります: ブループリントの紹介

CSS フレームワークの設計は、高品質のページを迅速かつ効果的に作成するのに役立ちます。また、もちろん、各フレームワークは無数の先人の努力に基づいています。ここでは、推奨される CSS フレームワークである Blueprint CSS フレームワークを紹介します。

CSS フレームワーク + CSS リセット: ゼロからのデザイン

http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch

1. はじめに

ブループリントはいわゆる CSS フレームワークです。それに比べて、ブループリント コード内のコメントは比較的詳細です。

Jeff Croft の『デザイナーのためのフレームワーク』 (または『Understanding Web Frameworks and How to Build a CSS Framework』の中国語版) で説明されている CSS フレームワークの構築方法に従います。

フレームワークの構築にはいくつかの方法がありますが、最も一般的でおそらく最も便利なのは、共通の CSS を、全体の特定の部分をそれぞれカバーする個別のスタイルシートに抽象化することです。たとえば、次のようなスタイルシートがあるとします。このアプローチの利点は、必要なスタイルのみを選択的に含めることができることです。ただし、特定のプロジェクトがそうでない場合は、フレームワークに 6 つまたは 7 つの異なるスタイルシートが含まれる可能性があります。私たちのオフィスで作成したフレームワークには、1 つや 2 つ必要ではありません。次の 5 つのスタイルシートがあります。

reset.css - 一括リセットを処理します。

type.css - タイポグラフィを処理します。

Grid.css - レイアウト グリッドを処理します。

widgets.css - タブ、ドロップダウン メニュー、「続きを読む」ボタンなどのウィジェットを処理します。

Base.css - 他のすべてのスタイルシートが含まれるため、フレームワーク全体を使用するには、(X)HTML ドキュメントから Base.css を呼び出すだけで済みます。

ブループリントも同様に構築されます。

分割して征服する:

機能構成の観点から見ると、buleprint は、レイアウト、タイポグラフィ、ウィジェット、リセット、印刷などの機能を異なる CSS ファイルに分散します。これにより、ユーザーはすべてのファイルをインポートするのではなく、使用したい機能のみをインポートできるようになり、ページ読み込みのパフォーマンスが向上します。現在、コンポーネントセクションはボタン処理のみを提供しており、マッキンゼーのMECE（「相互に独立し、完全に網羅する」）アプローチをまだ実現していません。

統一インターフェース:

機能は複数の css ファイルに分散されていますが、インポート時には同じファイル screen.css のみを含める必要があり、特定のインポートの詳細は外部インターフェイスを統合する screen.css で処理されます。

ブループリントに含まれる CSS ファイルの説明:

スクリーン.css

これはフレームワークのメイン ファイルであり、「lib」ディレクトリから他の CSS ファイルをインポートし、すべてのページに含める必要があります。

Jeff Croft の Base.css 関数と同様に、このファイルを含めるだけでインポートできます。

印刷.css

このファイルは、印刷バージョンがすべてのページに含まれるように、いくつかのデフォルトの印刷ルールを設定します。

印刷を処理するために使用され、ウィジェットとして分類できます。

lib/grid.css

このファイルにはグリッドが設定されます (これは本当です)。このファイルには、列ベースのグリッドを設定するために div に適用するクラスが多数含まれています。

ページ レイアウト (列) を処理するために使用されます。

lib/typography.css
このファイルには、デフォルトのタイポグラフィが設定されています。また、テキストを処理するためのいくつかのメソッドも含まれています。

ページ要素のレイアウトを処理するために使用されます。

lib/reset.css

このファイルは、ブラウザーが設定する傾向にある CSS 値をリセットします。

ページをリセットし、CSS 属性を指定しないページ要素のデフォルト値を指定するために使用されます。

lib/buttons.css
いくつかの優れた CSS 専用ボタンを提供します。

ウィジェットとして分類できるボタンを処理するために使用されます。

lib/compressed.css

コア ファイルの圧縮バージョン。すべてのライブ サイトでこれを使用します。

手順については、screen.css を参照してください。

圧縮された CSS ファイル (grid.css、typography.css、reset.css、buttons.css を含む) を提供します。

2. 各モジュールの使用方法の調査

2.1. Grid.css の研究

クロスブラウザーのセンタリングの互換性処理

一般に、中央揃えを処理する際に Firefox と IE の違いに対処するには、次の方法が使用されます。

body{text-align: center;}div#container{margin-left: auto;margin-right: auto;width: 50em;text-align: left;}

取得元: http://www.maxdesign.com.au/presentation/center/

ブループリントの扱い方:

body { text-align: center; /* IE6 修正 */ margin:36px 0;}/* コンテナーはすべての列をグループ化する必要があります。 : 0 auto; /* レイアウトを中央に配置 */ width: 1150px; /* 合計幅 */ }列のブループリントを実装する方法:

ブループリントでは、.column、.span-x、.last が定義されており、これらを組み合わせることで列関数を実現します。

その中には、 .column は列の float 属性を定義し、 .span-x は列の幅を定義し、 .last は margin-right を 0px に設定します。

2.2.reset.cssの研究

Reset.css の元のコードは Eric Meyer からのものであるはずです。Eric Meyer にはリセットに関する 2 つのログがあり、これらはブラウザー間で異なるデフォルト値の問題に対処するために使用されます。 Eric Meyer のドキュメントは優れています。

推論のリセット: http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

リセット・リローデッド: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

なぜリセットするのか
基本的な理由は、すべてのブラウザにはプレゼンテーションのデフォルトがありますが、同じデフォルトのブラウザは存在しないということです (2 つのブラウザ ファミリは存在しません。ほとんどの Gecko ベースのブラウザは同じデフォルトを持っています)。
たとえば、一部のブラウザーは順序なしリストと順序付きリストを左マージンでインデントしますが、他のブラウザーは左パディングを使用します。過去数年間、私たちはケースバイケースでこれらの不一致に取り組みました。

ユニバーサル セレクターではなくリセット スタイルを使用する理由

いわゆるユニバーサル セレクターは、ドキュメントのすべての要素を表すために * を使用します。たとえば、

* { margin: 0;} リセット スタイルに関するいくつかのリソース:

YUI リセット ライブラリ: http://developer.yahoo.com/yui/reset/

http://leftjustified.net/journal/2004/10/19/global-ws-reset/

以下の記事は実際には CSS フレームワークまたはヒントについて説明した記事ですが、すべてリセットに関するトピックについて言及しています。

http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/

http://businesslogs.com/design_and_usability/my_5_css_tips.php

http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/

2.3. タイポグラフィ.cssの研究

typography.css は、ページ要素のデフォルトのレイアウト形式 (ベースライン) を決定するために使用されます。

Web 上のタイプをベースライン グリッドに設定します。

http://alistapart.com/articles/settingtypeontheweb

2.4. button.cssの研究

「ボタン要素の再発見」では、ボタン要素を使用して入力要素を置き換えることのさまざまな利点について説明します。ボタン要素は、より豊富な機能を提供します。

http://particletree.com/features/rediscovering-the-button-element

2.4. Print.css の調査

Eric Meyer による CSS での print 関数の実装に関する記事があり、print.css を理解するための参考として使用できます。

CSS デザイン: 印刷に進む

異なるものを印刷する

2.5、圧縮.css

COMPLEX.CSS は、複数のブループリント ファイルを圧縮するパッケージで、CSS ファイルも圧縮され、不要なスペース、改行、コメント、その他のテキストが削除されます。

この方法は、実稼働システムにデプロイするときにページに複数の CSS ファイルがインポートされるのを避けるために使用され、ページのパフォーマンスの向上にも役立ちます。

lib/screen.css の指示に従って、teenage が提供する css 圧縮サービスを使用する必要があります。

http://teenage.cz/acidofil/tools/cssformat.php

さらに、CSS と JavaScript の最適化と圧縮を提供する同様のサービスには次のものがあります。

http://csstidy.sourceforge.net/ (オープンソース)

http://www.cssdrive.com/index.php/main/csscompressor/

http://www.cleancss.com/ (csstidy に基づく)

3. 使用例

4. 参考資料

http://code.google.com/p/blueprintcss/wiki/チュートリアル

5. 関連プロジェクト

ブループリントジェネレーター: http://kematzy.com/blueprint-generator/

トリポリ: http://monc.se/tripoli/

推奨記事: http://www.cssdemos.com/2007/12/29/hands-on-with-blueprint-a-css-framework/