Update: hlb 準備了原始檔和範本。
hlb根據YUI Grids與Mollio 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
留言