幫我的 RoR 應用程式化妝 - Yullio

前言

使用 Yullio = Yahoo! UI Library: Grids CSS + Mollio CSS/HTML Templates

• Yahoo! UI Library: Grids CSS 負責版面配置.
• Mollio CSS/HTML Templates: 負責背景主題.

安裝

gem install layout_yullio_generator

使用

script/generate layout_yullio controller_name sidebar_name

產生

• app/views/layout/controller_name.rhtml
• app/views/controller_name/_sidebar_name.rhtml  為一個 partial 樣板
• public/ 目錄下的 CSS、JavaScript
• vendor/plugins/ 目錄下的 Yullio Plug-in

修改

版面配置

在欲修改的 Controller 中設定.

class ExpenseControler < ApplicationController
  ...
  yullio_page_width :doc2 # 決定頁面寬度.
  yullio_column_template :yui_t2 # 決定版面配置.

以下參考 http://developer.yahoo.com/yui/grids/

• yullio_page_width (參數如下)
• :doc - 750px centered (good for 800x600)
• :doc2 - 950px centered (good for 1024x768)
• :doc3 - 100% fluid (good for everybody)
• yullio_column_template
• :yui_t1 - Two columns, narrow on left, 160px
• :yui_t2 - Two columns, narrow on left, 180px
• :yui_t3 - Two columns, narrow on left, 300px
• :yui_t4 - Two columns, narrow on right, 180px
• :yui_t5 - Two columns, narrow on right, 240px
• :yui_t6 - Two columns, narrow on right, 300px
• :yui_t7 - ?

背景主題

以下引述自 [ Jedi's BLOG | Jedi.org ] :

Mollio 這套模版是一整份的 XHTML + CSS 模版，提供了一份樣式指南，有專屬的討論群組，就連用到的圖案素材都釋出了 Photoshop PSD 格式的原始檔。整份模版同時採創意公用授權條款、 GPL 和 CPL 三種不同的授權方式釋出，任何人想要使用、改作 Mollio 時，都祇需要從三種授權方式中挑選自己願意接受的一種即可。

以下引述自 http://anw.stikipad.com/ocean/show/Mollio+Templates :

Mollio 是個不錯的網頁樣版, 大部份都是靠 CSS 加上一些圖檔完成的, 只用到一個 javascript 做 menu 功能.

所以應該是以修改 原圖 跟 CSS 來達到修改背景主題的效果.

結語

• 沒有接觸過網路應用程式這一塊,真的是要懂好多,苦!
• 利用別人已經造好的輪子(畫面配置),再去做修改,以免自己重新發明輪子.
• 目前就維持 Yullio 的畫面,先回到 M 跟 C 不要再想 V 了! 再這樣下去不知多久才能寫完!

參考資料

• Yullio 試用感
• Yullio: YUI CSS Grids 與 Mollio 的結合
• Mollio CSS/HTML Templates
• YUI Grids