YUI Grids CSS　読んでみた

YUI メモ デザイン

http://developer.yahoo.com/yui/grids/をちょろっと読んでみた
バージョンは2.6.0

YUI Grids CSS

Getting Started

(超適当)

ブラウザを標準モードにするため、DOCTYPE スイッチを
こんなのにするのがおすすめ。
（XHTMLにしてXML宣言を書くとIE6が互換モードになるのでXHTMLはだめそおだ）

CSSファイルはreset-fonts-grids.cssでOK。
reset-fonts-grids.cssはresetとfontsとgridsのCSSが入ってる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>YUI Grids CSS </title>
 <!-- Source File -->
 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css">
</head>

Using YUI Grids CSS

HTMLはヘッダー、ボディ、フッターの3つの領域が必要。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>YUI Grids CSS </title>
  <!-- Source File -->
  <link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body>
<div id="doc">
  <div id="hd"><!-- header --></div> 
  <div id="bd"><!-- body --></div> 
  <div id="ft"><!-- footer --></div> 
</div>
</body>
</html>

Choose the Overall Page Width

全体の幅を決めるには、一番外のdivのidを変えればOK

docからdoc4まである。

id="doc" 幅750px 中央寄せ
id="doc2" 幅950px 中央寄せ
id="doc3" 幅100%
id="doc4" 幅974px 中央寄せ


注意：
doc3は左右に10pxのマージンがとってあるので、無くしたかったら
こんな感じにすれば0にできる

<style>
#doc3 {margin:auto;}
</style>
Customizing the Page Width

幅をカスタマイズするには、指定したいpx単位の幅を
13で割り算してemに変換して指定する。ただし、IEの場合は13.3333で割る。

600pxの幅にする時の例はこんな感じで。
（*widthってなんだ？）

<style> 
#custom-doc {
	margin:auto;text-align:left; /* leave unchanged */
	width:46.15em;/* non-IE 600÷13≒46.15 */
	*width:45.00em;/* IE  600÷13.3333≒45.00*/
	min-width:600px;/* optional but recommended */
}
</style>

Note:あんまりこの辺をいじるな（超適当）

Using Template Presets

たいていのWEBコンテンツはメインコンテンツのブロックと2番目のコンテンツのブロックがある。
テンプレートは狭いほうのブロック（2番目）の配置を左右で選べるようにしてある
狭いほうのブロックは固定幅で、メインのブロックは幅は可変になるようにしてある。


2つのブロックがあって、両方ともdiv.yui-bになってる。"b"はブロックの意味ね。
メインのブロックはさらに別のyui-mainっていうdivで囲んどいてね。
こんな感じ

...
   <div id="bd">
      <div id="yui-main">
         <div class="yui-b"></div>
      </div>
      <div class="yui-b"></div>
   </div>
...

Source-Order Independence

（超適当）

HTML内のブロックの順とは関係なくyui-mainブロックを配置できる。
（どっちかって言うとサイドバーの位置を変えれる）

あらかじめ定義されているレイアウト

クラス サイドバーの幅 サイドバーの位置
.yui-t1 160 左
.yui-t2 180 左
.yui-t3 300 左
.yui-t4 180 右
.yui-t5 240 右
.yui-t6 300 右

こんな感じでdocのdivのクラスを指定する。
HTMLは変更しなくても、クラスを変えればサイドバーの位置と幅を変更可能。
（SEO的にメインが最初かサイドバーが最初か有利なほうを選べる）

...
<div id="doc" class="yui-t4"> <!-- change class to change preset -->
   <div id="hd"></div>
   <div id="bd">
      <div id="yui-main">
         <div class="yui-b">メイン</div>
      </div>
      <div class="yui-b">サイドバー</div>
   </div>
   <div id="ft"></div>
</div>
...

これはHTMLでメインが後だけど見た目は上と同じ。

...
<div id="doc" class="yui-t4"> <!-- change class to change preset -->
   <div id="hd"></div>
   <div id="bd">
      <div class="yui-b">サイドバー</div>
      <div id="yui-main">
         <div class="yui-b">メイン</div>
      </div>
   </div>
   <div id="ft"></div>
</div>
...