- 首先觀察欲切版型的content部份，要小心在index.html.erb不要刪到<%= render%>裡面的東西(這是把header和orbit_bar和footer都引入進來的意思)，也不可以在body class="page-home"的地方新增data-pp
- 去header.scss調整header-banner的width等細節
- 更改header-nav的樣式，如果底色要滿版，則把它移到container外
- 看background的position要不要更改或刪除(這個設計可以讓使用者自訂背景)
- 去menu.scss的.modules-menu的地方更改position及寬度高度間距和背景顏色等屬性，若是垂直選單則刪掉display:flex;，更改裡面的ul及li屬性(這邊可以用的class有collapse navbar-collapse modules-menu，可用的id是layout-navigation，但因為collapse navbar-collapse是bootstrap的預設所以建議不要使用)
- 利用bootstrap的grid system網格系統，依照版型寬度更改row裡的.col-sm的數字
- 若要更改container的width則去template.scss更改.response-container的設定
- 依照顏色更改_variables裡引用的$theme color(可方便一次替換顏色)
- 自行新增內頁的樣式(附檔名是scss)，可新增在content.scss或是創建一個scss的檔案到layout中(若是創建一個新檔案則需要在檔案中引入@charset "utf-8"; @import "../initial")
- 最後更改footer的樣式(footer底色預設是滿版，若要做置中則須把background-color拿掉，改在layout-footer-inner加底色調整)
- 檢查RWD有無跑版的間距
設計師切版流程
設計師切版流程