Yullio: YUI CSS Grids 與 Mollio 的結合

2006年12月26日 星期二

Update: hlb 準備了原始檔和範本

hlb根據YUI GridsMollio CSS/HTML Templates, 製作了一套名為 “Yullio” 的模版(Yullio = YUI + Mollio)。原來 Mollio 已經有不錯的佈景主題與版面配置(type-a 到 type-f 六種)。我們把 Mollio 的版面配置部份抽掉,改用 YUI Grids 來處理,這樣做有幾個好處:

  • YUI Grids 提供至少三種頁面寬度設定,增加彈性
  • YUI 的二欄式設計較為靈活
  • YUI 二欄式的主欄,裡面還可以再切分為各子欄位

Yullio的原始檔和範本可從這裡瀏覽和取得

對於 Rails 的開發者來說,我們還製作了一個名為 Yullio Layout Generator 的產生器,現已發表到 RubyForge 上。取得及安裝方法非常簡單:

  gem install layout_yullio_generator

然後針對你要生 layout 的 controller,例如 Expense ,下達以下指令:

  script/generate layout_yullio Expense sidebar

此時你的 app/views/layout 目錄下會增加一個名為 expense.rhtml 的版面,而 app/views/expense 下方則會多一個名為 _sidebar.rhtml 的部份頁面檔(partial)。同時這個產生器還會將相關需要的 CSS、JavaScript 及 plug-in 拷進你的 public/ 及 vendor/plugins/ 目錄下。

重新載入你的 Rails app ,然後叫出 Expense 相關的頁面,你會發現已經套上了 Yullio layout。

要更改 layout 的方法很簡單,在你的 Expense controller 下,增加下面兩行:

  class ExpenseControler < ApplicationController
...
yullio_page_width :doc2
yullio_column_template :yui_t2

yullio_page_width 後面的參數,目前有 :doc, :doc2, :doc3 三種,分別對應至 YUI 的 #doc, #doc2, #doc3 ,至於 yullio_column_template 後面的參數,則為 :yui_t1 至 :yui_t7 ,分別對應至 .yui-t1 至 .yui-t7 等七種版面(由於 Ruby 的 symbol 不能用 dash ,因此改代換以底線)。

在程式碼更改後,版面也就隨之改變。需注意的是,如果你還需要主欄位內的分欄版面,得自己去填入 .yui-g 相關 HTML 程式碼。

進一步的使用說明,可參考本產生器的說明文件:

  script/generate layout_yullio

可使用的版面,則可以參考 Yahoo! UI Grids CSS 文件。佈景主題的各種用法,則可以參考 Mollio。

Yullio Layout Generator 是使用 BSD 授權公開發表的軟體套件,由 hlb 和 lukhnos 製作。YUI Grids 及 Mollio 的授權,請參考其各自的網頁。

註:感謝 Forth 提供 Ruby plug-in 撰寫指引。;)

by lukhnos

沒有留言: