十二月 15, 2010

CSS framework整理-1

Posted in Uncategorized at 12:36 上午 由 midashuang

BluePrintCSS
Blueprint基本的寬度為 950px,共有 24 格,每個格寬 30px,每個格位間隔 10px 的留白(使用 margin-right)。首先當我們確定好要自己的Layout之後就可以開使用Grid來編排Layout中所有元件的位置。目前Grid 是依照預設的欄位寬度來開發,若要增加或減少欄位的寬度則需要自己去執行 lib/compress.rb 這個程序(使用 Ruby),可增加便利性。

假設我們要作兩個欄位的框架,左邊要6格,右邊要18格。
則左邊欄位寬度為(30+10)*6-10=230
右邊欄位寬度為40*18-10=710
要注意的是兩欄的欄位之間會有10px的留白,切越多欄,留白越多,每切一次就會少10px。

<div class="container">
    <div class="span-6"></div>
    <div class="span-18 last"></div>
    <hr />
</div>

另外span 就是格的意思,而 span-1 即是 1 格,span-18 即是佔用 18 格。而格和格加在一起是 24 即是剛好是 Blueprint 設定的最大像素 – 950 像素,若像上面的例子切成兩個欄位,排在最後的格需要加上 last 這個 CSS Class,不然會出錯誤。

亦支援 border 的功能,格的最右邊會出現一條直線,用來分隔格和格。加入 bordercolborder 這個 class 就可以,而其中 colborder 會佔用一個格的位置,border 則不會。另外prepend-1代表在左邊加入一格空格,append-1代表在右邊加入一格空格,另外Blueprint還有一個特殊的class,pull 與 push,pull代表將本身位置往前拉,push代表將本身位置往後推。
特點:

  1. 採用浮動來實現佈局,簡單明了
  2. 採用margin-right, 最後一列的class需要加上last

960 Grid System

視屏教學

<div class="container_12">
    <div class="grid_4"></div>
    <div class="grid_4"></div>
    <div class="grid_4"></div>
    <div class="clear"></div>
</div>

用法跟 blueprint 大同小異,同樣是要載入他的預設 CSS 檔案,然後繼續編寫你所要的 grid,用 960 GS 另一個要注意的地方,是不可再設置 grid 和 container 的左右 margin 和 padding (上下的沒有問題),否則會破壞了整個系統的結構。但在製作網頁時,往往希望內文不要和背景圖貼在一起,解決的方法是在 div 內再加多一個 div tag,為其加上 padding size,這可是一個較麻煩的地方。
960 Grid System 的限制

  • 960 GS只處理網頁的排版,採用額外標籤來清除浮動
  • 960 GS 的寬度是固定的無法更改,不像是 blueprint 可以重新產生出全新的不同尺寸的 Grid System
  • 960 GS 主要是因為設計方式而限制了變化所以看起來會較為工整,不過若不在網頁的每部分都設背景圖,則一格格的外觀不會很明顯。

ElasticCSS
Elastic提供了一個完整的系統,複雜的佈局,並解釋每個組合有時需要多行,有時有哪幾種解決方案來完成相同的結果。
Elastic欄位範例
採用ElasticCSS架構製作的網頁範例
在body內建置div.columns>div.container>
其中container內部可包含的元素有column、column fixed、column elastic這三種,其中fixed的範圍是比elastic還小,若要產生三個欄位可以選擇切成三等份,或者兩大一小,一大兩小等方式,採用這種方式可以交給框架自動裁切並可快速開發網頁。另外可將單一區塊區分為三個欄位,此時可寫成columns on-3,多的欄位就會自動排在第二排。若要將兩個欄位結合在一起,需在加上span-2欄位。

YUI Grid CSS
YUI的框架由三個元件組成:

reset.css - 樣式重置
fonts.css - 版式字體控制
grids.css - 柵格系統
頁面共有四種寬度可供設定,目前此頁面預設寬度為750
<body>
<div id="doc">
   <div id="hd"><!-- header --></div>
   <div id="bd"><!-- body -->
      <div id="yui-main">
         <div class="yui-b"></div>
      </div>
      <div class="yui-b"></div>
   </div>
   <div id="ft"><!-- footer --></div>
</div>
</body>

另可修改為其他頁寬,並設定左右兩欄位寬度
<!-- #doc2 = 950px width, centered, 180 on left -->
<div id="doc2" class="yui-t2"></div>
<!-- #doc3 = 100% width, 300 on left -->
<div id="doc3" class="yui-t3"></div>

特點:

  1. 採用浮動佈局,槽(Gutter)寬通過margin-left來控制(Blueprint採用右邊距,960.gs採用均分)
  2. 總寬度採用em, 這樣可以用在彈性佈局上
  3. 欄的佈局用的是百分比,採用了流體佈局

但是在普通佈局YUI顯得有點瑣碎。比如要呈現四個欄位:

<div id="yui-main">
   <div class="yui-b">
      <div class="yui-g">
         <div class="yui-g first">
            <div class="yui-u first"></div>
            <div class="yui-u"></div>
         </div>
         <div class="yui-g">
            <div class="yui-u first"></div>
            <div class="yui-u"></div>
         </div>
      </div>
   </div>
</div>
先來兩欄佈局,在切割兩欄。
About these ads

1 則迴響 »


發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

關注

Get every new post delivered to your Inbox.

%d 位部落客按了讚: