CSS – SUSY3 – 部屬架構(3)

直接開發

我在 Github 打包了基本架構叫做 frontpack ,一來也方便我後續開發,依照下方稍微配置了一些路徑與工具,主要就是編寫 JS 與使用 Susy 3 ,可以直接前往 Github 下載使用。下方介紹教學,會與開發包 frontpack 稍微不同。

 

認識架構

繼承上一篇,為了讓 Susy3 的配置更容易維護,我簡單規劃了系統架構。我們的 SUSY 全部放在 assets/src/scss/ 底下喔!

  • assets/src/scss
    • config/
      • _global.scss 全域引入,包含使用設定、載入需要的 mixin
      • _susy.scss 放置 susy map 的部分,包含斷點的設置都在這裡
    • mixin/ 日後擴增的 mixin 位置
      • susy/ 放置官方提供的片段
        • _gallery.scss 如 susy2 的 gallery 一行解決相簿模式排列
        • _susy-breakpoint.scss 如 susy2 的斷點
        • _with-layout.scss 給斷點使用 layout
    • app.scss 範例

 

依序添加

設定檔:config/_global.scss,這是全域使用的,我們可以手動增減我們要的參數、 mixin 等等總體的設定。

 

Susy Map:config/_susy.scss,不同的 map 定義都放在這裡,日後調整斷點或整體外框也能方便許多。

 

好用的 Gallery 畫廊模式:mixin/susy/_gallery.scss,上一篇有提過的範例。

 

斷點:mixin/susy/_susy-breakpoint.scss,參考官方建議

 

mixin/susy/_with-layout.scss

 

全域樣式:src/scss/global.scss

 

單頁樣式:src/scss/app.scss,container 因為在不同尺寸要出現不同的柵欄,所以也要使用 Breakpopint。

 

這樣我們的範例都設定好了,接著產出

並添加到 HTML:dist/index.html

完成!

Comments

發表迴響