BluePrint:噂のCSSフレームワークを使ってみた

CSS3

08:52:56, by dozo

, 115 words, 6260 views

いつも思うがCSSってのは言語仕様まずすぎないか？

(ノ・・)ン。。。。。。(((●コロコロッ

CSSの悪いところは、
「オレ流フレームワーク乱立」

ＣＳＳ仕様書という謎の読み物を提出されるも、
読んでも意味不明なものばかり。
スパゲッティーコード、ＩＤ属性乱立、HTML知識無しと、
デザイナと名の付くもの達が組んだＣＳＳは酷いことが多い。

そう言ったところを吸収する出来そうな面白いものが

BluePrint CSS

blueprint CSSとは？

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

CSSにもフレームワークか。。。
と思ったが、よく考えたらもっと早くあるべきだったのでは無かろうか？

ブラウザによるＣＳＳの挙動の差異
オレ流フレームワーク乱立

この二つの大きな問題を吸収することが出来る。
さっそく試してデザイナに強要することにしよう。

[More:]

●カラム数を算出
横幅を790pxにするので、
下記の式に当てはめると、

Total width = (columns * 40) - 10

カラム数は20。

●ページのレイアウト
コンテントとメニューで２カラムのページで右メニュー。
メニュー幅は３カラム分120pxとすると、

<div class="container">
<div class="column span-20 last">
header
</div>
<div class="column span-17">
main
</div>
<div class="column span-3 last">
right menu
</div>
<div class="column span-20 last">
footer
</div>
</div>

お・・・あっという間にレイアウト完成。
素晴らしい。

tableタグを使わずに表が書けるし、
ID属性を排除出来るから非常にありがたい。

importが使われるのと一つのファイルが大きい分、若干重い。
compressedファイルを利用し、内容を追加したい時は別のファイルを使う感じでやるといいだろう。
mod_deflateやmod_expiresなどで圧縮、キャッシュをキチンとしておこう。