[Hexschool Web Layout Training] — Week_6 導入網頁規範設計流程

發表於 更新於 分類於 ， ， 文章字數： 5.3k 所需閱讀時間 ≈ 5 分鐘

第六週的練習

Introduction & 前言

沒想到結束前面的兩週 RWD 地獄式訓練，這週又來一個有點難度的切版練習。

還好本週配上 Bootstrap(以下簡稱 BS) 切版，讓整個切版開發順暢許多，甚至 CSS 也少寫了非常多，這週就來要說說怎麼使用 BS 的 隔線系統 及 修改BS變數為自訂義變數 讓整個開發流程縮短一半以上的時間吧！

本週也是使用 Gulp，如果你還沒用過或是想知道怎麼從 0 開始建立一個 Gulp 歡迎參考我的上一篇文章，[Tool Notes] — 關於Gulp。

提醒一下，如果沒有使用 Gulp 的話可能要另外尋找編譯軟體，因為這邊會使用 SCSS 來開發！

Summary & 摘要

*本篇文章將會以三個角度來紀錄， 課程心得(上課後的心得整理)、練習心得(做完作業後的心得整理)) 及 **小組任務(每週會有一項小組任務，寫完後的心得)*。

每週的練習挑戰和地下城有點像，都有自己必須練習到的地方；本週需要練習的目標有至少兩點以上的練習菜單，及額外的一項打字練習。

  1. 語意命名

  2. 幾乎全程使用 emmet 開發

  3. 英打速度 練習

關卡目標

  1. Bootstrap 4 格線系統設計

  2. 電商版型設計

課程心得

由於上週直播課程請假，首先於 5/19(二) 聽到 穎旻助教 的直播，大致講解了一下怎麼做這週的題目，所以大概有個底了，至於重播是大概到週三才看，週四才切版，週五完成。

Desktop First ? Mobile First ?

課程首先提到了切版如果有使用 RWD 一定都會使用到 media，如果不清楚可以先參考此篇文章，那你的切版習慣是從電腦版開始還是手機版呢？

這邊我都習慣從電腦版開始，但是由於 BS 是從手機開始，所以這次練習就從手機開始下手，其實兩者都是要先思考到當畫面更改後，我的 CSS 應該會怎麼下，這邊簡單示範下。

Desktop First

首先是電腦版先切，HTML 及 CSS 語法如下：

1
2
3
4
5
6
<div class="container">
  <div class="row">
    <div class="box box1"></div>
    <div class="box box2"></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
*,*:before,*::after{
  box-sizing: border-box;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin:0 auto;
  width: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.box {
  background: yellow;
  height: 100px;
  outline: 5px solid #000;
}

.box1 {
  width: 30%;
}

.box2 {
  width: 70%;
}

@media(max-width:768px){
  .box1{
   width: 100%;
  }
  .box2{
    width: 100%;
  }
}

Desktop First

主要可以看到，這邊電腦版排版完成後，才會去寫當畫面到 768px 的時候 box1 及 box2 的寬度都改為 **100%**，而手機版範例如下：

Mobile First

html 同上，此處略過…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
*,*:before,*::after{
  box-sizing: border-box;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin:0 auto;
  width: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.box {
  background: yellow;
  height: 100px;
  outline: 5px solid #000;
}

.box1 {
  width: 100%;
}

.box2 {
  width: 100%;
}

@media(min-width:992px){
  .box1{
   width: 30%;
  }
  .box2{
    width: 70%;
  }
}

Mobile First

仔細看其實就是切入點從哪邊，思考點就不一樣，而會提到這個主要是因為 BS 的切入點為手機，所以當你套用 BS 的時候建議從手機開始切版，如果有要做 RWD 的話。

魔數？

照上面這樣說法，切版肯定會有很多地方要改變排版，比如設計師會想要你在寬度 200px 的時候每一欄都是 **100%**，然後在 490px 的時候每一欄佔 **70%**，最後 580px 的時候每一欄佔 50%…

這樣想起來你的 media(min-width:xxxpx) 大概就要寫上百行了吧，所以 BS 統整了幾個熱門的 斷點 搭配 格線系統 來解決這個問題，什麼是 斷點 呢？就是在哪個寬度會去改變樣式，而 BS 斷點的抓法就是以市面上熱門的手機或是平板寬度來寫，關於 BS 的斷線可以參考此處。

斷點參考

這麼多斷點為什麼會以 BS 為主呢？因為大部分的設計師雖然可能不會網頁三寶 HTML、CSS 及 JS，但大多數都有使用 BS 的格線系統來做設計。

這邊就大概示範一下 BS 斷點的用法(圖片就不貼了，直接貼上 Codepen)：

1
2
3
4
5
6
<div class="container">
  <div class="row">
    <div class="box col-12 col-lg-3"></div>
    <div class="box col-12 col-lg-9"></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
*,*:before,*::after{
  box-sizing: border-box;
}

.box {
  background: yellow;
  height: 100px;
  outline: 5px solid #000;
}

你沒看錯，CSS 就是這麼短！雖然上面已經貼出程式碼，但再講斷點之前我們必須先提提 格線系統。

960 Grid

對 格線系統 有一定概念的人，應該幾乎都會聽過這個，簡短解釋一下，因為以前解析度都是 1024，扣掉瀏覽器的捲軸跟編框，960 是許多數字的最小公倍數，所以被拿來當一個基準，而中間被分割成 12 等份，也是後來 BS 的概念，所以如果是 grid_3(960 的 Class Name)，就是佔 960 的 40%(總共 12 等份)，因為我們不會讓東西黏再一起，所以 960 還會有 間隔(Gutter)，大概算一下就是 **960 / 4 - (10 * 2)**，因為 960 間隔設定為 10px，所以算出來是 220px。

而 BS 的用法也是，從 col-1 ~ col-12，上面提到的斷點如果加在這裡面，就是 col-sm-2、col-md-5、col-lg-12…

小心地雷

雖然 BS 很方便，但是使用上有幾個要則一定要注意，沒辦法，誰叫你使用了人家的工具就要遵守人家的規則！

由於格線系統已經把大部分的數字都做好處理了，所以要特別遵守對於數字的操作，這邊列出幾點：

  1. 最外層盡量都要包上 container -> <section class="container"></section>

  2. <section class="container"></section> 的下一層如果要做物件的斷點變化，一定要加上 row -> <div class="row"></div>

  3. row 的內層第一層只能是 col 格線系統

  4. 在 container 及 row 上絕對不要去調整左右的 margin 與 padding

但你以為 BS 好處只有這個嗎？仔細上 BS 網站文件查看，其實許多功能都能加上斷點，比方說 d-none 為 display: none; 隱藏元素，但你可以在 Class 上再加上 d-lg-block，這樣元素將會在 992 斷點以上的時候將 display: none; 改為 display: block; 直接顯示元素，直接少了好幾行 CSS 呢。

用處多多

改進再利用，威力再加倍

前面講這麼多，其實我們就是要利用 BS 已經串好的斷點設計，將預設的變數改為我們設計稿的數字，直接加以利用，下方練習心得將會示範如何修改。

練習心得

這次也是第一次直接修改 BS 的預設變數來開發切版，之前在上 SASS 課程也沒有這樣做過，實際做起來真的省下不少時間；首先你必須要有 npm 的基礎，不然你可能要另外找編譯軟體，因為我們是使用 SCSS 來開發。

主角登場

首先安裝 BS。

此處提醒一下，如果沒有建立 Gulp 的環境

1
2
3
$ npm init / npm init -y

$ npm install bootstrap

安裝完成後建立好 HTML 的環境，然後建立 SCSS 資料夾，之後打開 node_module 資料夾然後進入 node_modules/bootstrap/scss/ 複製 _variables.scss，貼到自己的 SCSS 資料夾(要編譯的那個資料夾)。

複製 variables.scss

這隻檔案就是 BS 的預設變數所在，就像 CSS 的 :root，所以我們只要修改裡面的寬度、顏色…等等(有點像原料)，再經過 BS 寫好的 mixin(有點像機器)，包裝過後就會變成各式各樣的產品。

修改 variables.scss

修改完成後記得在要編譯的 SCSS 檔案要引入幾個基本的檔案，順序如下：

1
2
3
4
@import "../../../node_modules/bootstrap/scss/functions";
@import './helper/variables'; //- 修改 BS 變數
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/bootstrap";

這邊引入之後編譯就能把原本預設的樣式改掉了。

修改後的結果

按照這個樣子，除了修改顏色，也能修改間距，比方說下方這樣：

修改後的結果

就這麼簡單！以上就教完怎麼修改了，這邊看了一遍設計稿抓了大概的數字直接做修改，但其實實務上還是必須和設計師討論過，不然還是會有很多魔數呢…

關於瀑布流

什麼是瀑布流呢？下面一張圖告訴你。

瀑布流

平常我們使用 display:flex; 排版，不管元素是不是不一樣高，每一行的高度一定都是抓那一行最高的為主，所以沒辦法做到像上圖這樣的瀑布流。

但是我們可以透過 flex-direction: column; 把一行一行改為一列一列的方式，這樣每一個元素的下一個元素將會緊跟著上一個的屁股，然後第二列也是這樣做，這樣就能做到瀑布流的樣子。

範例可以參考此處

小組任務

任務一：請每個小組討論成員，試著用 NPM 安裝 BS4 SCSS ，並修改變數來調整主色，同時能看到編譯成功的結果

上方已示範如何修改。

任務二：請試著用第六週分享到的格線系統來實作 album (相簿)、Blog (部落格)的其中一個頁面，還請不要偷看他的程式碼來討論出來。

程式碼待補。

任務三：討論第六週版型該怎麼做

Conclusion & 結論

之前其實一直都比較偏好自己手幹 RWD，但是這次試著使用 BS 並且修改變數後發現省下超多時間，而且一至性更高，推薦給 CSS 命名苦手的人，善用別人的輪子在修改，說不定比自己照輪子還要來得快，雖然自己照輪子可能照得更好，因為邏輯是自己想的，但以現今公司案子趕的程度來看，這是最好的方案了。

眼看直播班也快結束了，這次直播班獲益良多，但還是有許多要自己改進的，希望最近遇到瓶頸的自己能快快突破。

Demo & 成果程式碼

Source Code：點我

Demo：點我

參考網站