從 4 月底到現在，目前持續更新當中。

這是為了讓自己的網頁切版技巧可以更加熟練，而記錄的一些心得內容，還有一些初始的開發設置，提供自己能夠更快速地上手切版技巧。

Update date: 2018-07-15

開發前置作業

初始化與插件配置

  • CSS 初始化

    • 引入第三方初始化 CSS

      • 推薦選擇全部 margin & padding 初始化 0 的
      • ress.css

    • 加上自訂 reset.css，必加入的配置設定 : (可加在 body 上)

      • font-family
      • font-size
      • line-height
      • color
      • background-color
      • text-align

  • grid system 框架插件

  • UI 元件框架 (大型的)

    • 每個專案只要選一種就好
    • 文字 & 背景顏色配置
    • 若有內置自己的 reset.css 需要多留意是否會覆蓋到自訂的配置
    • 若有主題的 CSS 也需要多留意
    • 若需要特別修改 CSS 屬性，可改成 inherit 或 initial，繼承最初自訂的配置

開發環境建置

  • 自動化任務與打包配置
    • glup、webpack、Parcel
  • CSS 預處理器
    • SASS
    • PostCSS
  • HTML 樣板預處理器
    • pug
    • PostHTML

頁面版面配置

HTML 排版配置

  • 優先以設計師的角度去下排版

  • Flex 容器排版應用

    1. 使用 margin-left: auto; 在容器中讓子元素推移到右側，用來代替float: right;
    2. 若容器中只有 A & B 元素，A 為固定長度，使用 flex: 1 讓 B 填滿剩餘長度
    3. 於容器中讓多個子元素橫向排列
    4. 於容器中讓子元素垂直置中

  • 快速建置 HTML 區塊版面 - CSS 工具

RWD 版面配置

  • 使用 網格系統排版 + 顯示與隱藏的斷點切換

CSS Class 樣式命名的配置

  • 搭配 CSS / SASS 設計模式規範

  • 若有加入大型的 UI 元件框架，自訂的 CSS 樣式名稱需要加入自己的前綴符號，可避免與框架的 CSS 樣式名稱衝突或被覆蓋

  • 若要修改 UI 元件的 CSS 內容，最好的處裡方式為

    • 需要先擁有自訂的 CSS 樣式
    • CSS 撰寫類似如下 2 種，能明確增加 CSS 權重去覆蓋，如果還覆蓋不了就代表此 UI 元件的 CSS 權重值非常糟糕
1
2
3
4
5
6
7
8
9
/* 有明確指定的 UI 元件時適用 */
.self-class .ui-component-class {
  properties: xxx;
}

/* 同時有多個相同的 UI 元件，卻要套用不同的自訂樣式時適用 */
.self-type1-class.ui-component-class {
  properties: xxx;
}

增加使用者體驗

  • a & button 標籤的 hover 顯示
  • Loading 狀態過程顯示
  • 頁面全體遮罩 (在操做流程中適當的加入，可以避免一些問題)
  • Dialog Message 跳出訊息

無障礙標籤配置

待新增…

CSS 屬性架構

  • CSS 權重 (css specificity)

  • 使用 rem 單位，隨著根字體大小而自動改變，預設為 16px (參考網址)

    • font-size
    • width
    • height
    • margin
    • padding
    • border-radius
    • shadows

  • 使用 em 單位，隨著當下字體大小而自動改變，使用時機為 :

    • 單一元素或小型元件的文字內容不是使用默認根字體大小時
    • 此元素或元件可以有多種的字體大小時
    • 此元素或元件的大小是以字體大小的比例做縮放時

  • 若設計的內容無背景或邊框線條，需要加上間距 (邊距) 時

    • 使用 margin 優先於 padding
    • 使用單邊優先於雙邊
    • 單邊優先使用 margin-bottom 或 margin-right

SCSS 架構

基本檔案目錄

  • _variables.scss

    • 包含所有的變數與設定內容

  • _mixins.scss

    • 包含 @mixin、@extend、@function 之類的

  • _reset.scss

    • 初始化頁面基本元素，把所有預設值重置
    • 可加入第三方 reset CSS - ress.css
    • 加入自訂的預設值

  • _base.scss

    • elements & structure (layout) 單一元素或結構外框之類的
    • 專案變大時，以資料夾分出多個檔案

  • _components.scss

    • 元件，大部份都會是搭配 JS 的類型
    • 專案變大時，以資料夾分出多個檔案

  • _helpers.scss

    • 增加元素或元件的附加屬性，例: 背景大小、間距、位置型態之類的
    • CSS class 多為單一屬性內容

  • main.scss

    • @import 以上所有 scss/sass 檔案

Variables 必要的變數

  • 文字大小

    • 小字至少 1 種
    • 原始大小 1 種
    • 大字至少 3 種

  • 間距 (邊距) 大小

    • 總共至少 3 種 ~ 5 種

  • 顏色

    • 文字顏色
    • 背景顏色
    • 邊框線條顏色
    • 主題色彩顏色，像是 primary、info、success、warning、danger

  • madia query 斷點範圍

可做成 Helpers 的樣式種類 (需加上 ! important)

  • 間格距離、分隔空間之類的

    • 內外邊距 - margin 或 padding
    • 例如: margin-buttom: xxx => mb-x 樣式名稱

  • 顏色

    • 背景 - background-color
    • 文字 - color
    • 邊框 - border-color

  • 文字類型

    • 大小 - font-size + line-weight
    • 粗細 - font-weight
    • 斜體字 - font-style: italic
    • 底線 - text-decoration: underline
    • 基本顏色之明亮或黯淡 - color

  • 元素的顯示方式

    • 垂直置中 - display: flex + algin-items 或 justify-content
    • RWD 之元素的顯示或隱藏

顏色架構 (懶人包) - 以下為淡色系為主

文字顏色 - 由深到淺

  • 主顏色範圍: #000000 ~ #333333
  • lighten(主顏色 , 25%)
  • lighten(主顏色 , 35%)

邊框線條顏色 - 由深到淺

  • 主顏色範圍: bga(176, 176, 176) #B0B0B0 ~ bga(201, 201, 201) #C9C9C9

    • rbg 3 個值相加介於 528 ~ 603 之間
    • 每個數值介於 151 ~ 226 之間

  • lighten(主顏色 , 10%)

  • lighten(主顏色 , 14%) 最高值: #EDEDED

背景顏色 - 由深到淺

  • 主顏色範圍: bga(219, 219, 219) #DBDBDB ~ bga(232, 232, 232) #E8E8E8

    • rbg 3 種值相加介於 657 ~ 696 之間
    • 每個數值介於 206 ~ 245 之間

  • lighten(主顏色 , 5%)

  • lighten(主顏色 , 8%) 最高值: #FAFAFA

  • 計算公式:

    • 先定義出最高值 A 與主顏色亮度會提高 x% & y%，再定義 z% 的區間範圍 (此範例為 x=5, y=8, z=5)
    • 選色範圍: darken(A, y% + z%) ~ darken(A, y%)
    • 每個數值介於 (最低範圍值 - 範圍相差值) ~ (最高範圍值 + 範圍相差值)