しかし、フレームワークとは何ですか？ プログラマーにとって有用ですか、それともWebデザイナーでさえそれらを利用できますか？..
「フレームワーク」とは何ですか？
したがって、少なくともこの記事全体を通して、「フレームワーク」は、ルーチンタスクを繰り返し使用できるモジュールに変えるのに役立つツール、ライブラリ、優れたコードのセットであると考えることに同意しましょう。 フレームワークの目標は、デザイナーまたは開発者がプロジェクトに固有のタスクに集中できるようにすることです。 言い換えれば、車輪を何度も再発明しないでください。 一般的に、これは上記のWebおよびJavaScriptフレームワークによって選択されたアプローチです。
デザイナーのためのフレームワーク
おそらく、サイトの設計全体を通して、CSSコードの同様の抽象化の恩恵を受けることができます。 このアプローチを評価できるのは、いくつかの同様のサイトで作業しているデザイナーです。 さらに、チームで作業するデザイナーは同じフレームワークを使用して作業できます。 例えば、私は新聞で働いており、小さなサイトを持っている私たちの20人全員に多くの共通点があります。 これらは主にニュースサイトであるという事実により、定義により異なるよりも類似しています。 しかし、まったく異なるプロジェクトに取り組んでいる1人のデザイナーでさえ、自分のメインフレームワークに追加できる要素を見つけることができます。
私が働いているLawrence Journal-Worldでは、最近CSSフレームワークを作成し、生産性が大幅に向上することを発見しました。 もちろん、作成には数日かかりましたが、準備が整うとすぐに、高品質のページを作成できる速度が劇的に向上しました。 さらに、フレームワークの使用を開始してから、すべてのデザイナーが誰かの作業で何かを修正することができ、何かがそのように書かれた理由を理解するのに20分は必要ありません。 彼らは仕事に突入しました。
正確に何を抽象化できますか？
CSSフレームワークの作成を開始したら、各プロジェクトで繰り返し使用するものを見つける必要があります。 全体のポイントは、「自分自身を繰り返さない」という方法に従って、すべてを1か所にまとめることです。 これにより、サポートがはるかに簡単になり、トラフィックを少し節約できます。
私の各プロジェクトで考慮していることは次のとおりです。
- 標準ブラウザスタイルの一括リセット。 たとえば、すべての要素のマージンとパディングを0に設定し、frameset'ovと画像のborder'ovを無効にするなど。
- レイアウトのサンプルタイプの作成：段落、見出し、リストなどのブロック要素のマージン
- フォームのシンプルなスタイルを作成します。
- 常に使用するいくつかのCSSクラスを作成します。たとえば、.hide（表示を設定する：none）および.mute（フォントサイズを小さくし、場合によっては明るい色を設定する）。
他にもいくつかの興味深い機能があります。 多くのデザイナーは多くの場合、同じレイアウトとスタイルを使用してページを作成します。 これをCSSファイルに転送して、複数のサイトで同時に使用できるように作成してください。 Yahooは、Yahoo User Interfaceグリッドコンポーネントで同様のことを行いました。 Journal-Worldのフレームワークを作成したとき、最初にYUIでこのコンポーネントの実装を見ました。 後で、これは必要なものではないと判断しましたが、それは私たちにとって良い例となり、独自の実装を作成するきっかけになりました。 私たちは16ブロックのデザインに決めました。これは非常に柔軟性があり、各サイトが他のサイトと少し異なって見えるという事実を考慮しても、各サイトで使用することができました。
さらに、多くのサイトは、ドロップダウンメニュー、ナビゲーションのブックマーク、ボタンなど、同じウィジェットを使用しています。 これらは抽象化に適しています。 さらに、サムネイルとして表示される写真のリストなど、イディオムの一部を解決することもできます。 CSSクラス“ thumbnail-list”を標準化できます。次回このクラスを挿入して作業バージョンを取得する必要があります。
それは本当に私に利益をもたらすでしょうか？
このようなフレームワークがあれば、すぐに新しいページの作成に飛び込むことができます。 新しい（X）HMTLドキュメントを作成し、フレームワークを接続します。不要なインデントを削除する時間は必要ありません。必要なタイポグラフィ、きれいなフォーム、機能するウィジェットなどがすでにあります。
特定のサイトの外観を何らかの方法で変更したい場合があります。 これを行うには、既存のスタイルを追加または変更するだけです。 たとえば、フレームワークが「タブ」クラスを持つ各「ul」に標準のナビゲーションバーをインストールする場合、灰色の背景と黒い境界線があります。 これを変更するには、スタイルを追加（または既存のスタイルを変更）するだけです。 例：
ul.tabs li {
ボーダー：なし;
background-image：url（ '/ images / tabs / site-specific-tab-look.jpg'）;
}
CSSフレームワークはどのように設計する必要がありますか？
フレームワークを作成する方法はいくつかありますが、最も一般的で間違いなく最も便利なのは、メインCSSファイルをいくつかの個別のファイルに抽象化することです。それぞれが異なる役割を果たします。 たとえば、タイポグラフィを処理できるスタイルシートと、標準スタイルをリセットする別のスタイルシートを作成できます。 このアプローチの利点は、必要なスタイルを正確に接続できることにあります。 フレームワークでは6〜7種類のスタイルページを使用できますが、特定のプロジェクトではそれらの1つまたは2つは必要ない場合があります。つまり、それらをまったく接続する必要はありません。 私たち自身のために作成したフレームワークは、5つのスタイルで構成されています。
- reset.css —デフォルトのスタイルをリセットします。
- type.css —タイポグラフィを担当します。
- grid.css —レイアウトを担当します。
- widgets.css —ウィジェットを担当します：タブ、ドロップダウンメニュー、および「続きを読む」ボタン。
- base.css —他のすべてのスタイルシートを有効にするため、フレームワーク全体を使用するために、（X）HTMLドキュメントからbase.cssにのみアクセスできます。
次に、フレームワーク全体を別の場所に保存し、そこからサイトから呼び出します。 もちろん、各サイトにはいくつかの特定のスタイルページがあり、必要なスタイルを書き換えたり追加したりします。
おわりに
実際には、プログラミングの世界の同僚のように、Webデザイナーは頻繁に繰り返す習慣を持っています。 標準スタイルをオフにするたびに、タブの新しいスタイルを作成します。これはプロジェクトごとに繰り返されます。 フレームワークの作成に少し時間を費やし、そこで何度か使用できるように要約します。 これにより、新しいページの作成をすばやく開始したり、既存のページを維持したりできます。 特別な知識を必要とせず、プロジェクトに悪影響を与えないため、これに注意してください。最も重要なことは、次のデザインを作成する時間を節約できることです。
A List ApartおよびJeff Croftの許可を得て公開。