嘗試自己設定網頁規範,將 css 分成 base、components、custom(參考網路命名方式並分類 css),而 RWD 是運用 bootstrap 的 grid 檔案,並搭配 fontawesome 呈現 icon。
- base 基礎css:包含預設樣式、字型、顏色、padding、margin等網頁基礎設定
- components 組件css:包含按鈕、圖像、card、navbar、jumbotron、footer等細節設定
- custom :其餘 css 調整設定
- COLOR PALETTE | 顏色規範_主色調與輔助色
- ICONS | 網頁可放置的 icon
- TYPOGRAPHY | 字型與文字段落相關規範
- LAYOUT | 佈局設定
- BUTTONS | 按鈕相關規範
- AVATARS | 頭貼規範
- NAVIGATION | 導覽列在不同主題下的樣式呈現
- JUMBOTRON 的呈現樣貌
- CARDS 的呈現樣貌
- FOOTER | 頁尾在不同主題下的樣式呈現
開發環境: Visual Studio Code