設計師切版流程

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