第13組 第六週｜導入網頁規範設計流程
===

###### tags: `小組任務` `第幾週` `2021夏季切版班` `team13`
[【總】小組任務｜2021夏季切版班 Team13](https://hackmd.io/@HexSlicing2021-Team13/WeeklyMission/%2FGrA9x5TMQoGuIhR8xF7eyg)

:::info
- **開會地點：** meet
- **開會時間：** 8/8(日) 20:00
- **討論目錄：**[**第六週任務**](https://hackmd.io/@hexschool/ryCw9D91Y) `2hr`
- [x] 討論（截圖）
- [x] 公布下週開會時間
- [x] 小組任務
- **參與成員**：Ian, Jiang V, Min Chun Tsai, Shani, Summer.H, Sz, Xing,
- 未參加成員：mansonivan, 家齊, 巫樾
- 直播內容
- [第六週直播講義](https://hackmd.io/@hexschool/HJYAxvqkF)

:::

---

## 任務一：編譯 Bootstrap SCSS
修改變數
- 讓主色 primary 能變更自己想要的色系
- 整合自己的 all.scss，並確保有編譯成功
- 有必要時，組員彼此用 ZOOM 協助除錯，或召喚助教協助
### 回答區
- 下載[有載 bs5 的 gulp](https://github.com/hexschool/web-layout-training-gulp/tree/feature/bs5)
- 在 helper 裡的 variables 裡修改
- 修改 `$theme-colors` 這個 map 裡面的 `primary`，使他可以在 class 裡使用
- 想直接改變數要知道自己改的有沒有對應到 map 裡面去

>>[Github](https://github.com/viccjiang/2021layout_week6_exhibinection)
>>[name=Jiang V 分享][color=#A7E683]
>
>>[亂來的page+變數改色]( https://shanimacc.github.io/bs5_grid_hexteam13/)
>>[name=Shani 分享][color=#FFCE6B]

## 任務二：做[格線系統練習設計稿](https://bootstrap.hexschool.com/docs/4.2/examples/grid/)
### 回答區

>>[本來想翻成中文作筆記但我懶惹](https://codepen.io/szyln/pen/xxdyvXv)
>>[name=Sz 分享][color=#BB84F5]
>
>>[亂來的page+變數改色]( https://shanimacc.github.io/bs5_grid_hexteam13/)
>>[name=Shani 分享][color=#FFCE6B]
>
>>[來一個]( https://codepen.io/pwbzvqja/pen/abWPOep)
>>[name=yellamoon 分享][color=#BB84F5]
>>
>>

## 任務三：請討論[最終版型](https://rpg.hexschool.com/training/21/task?type=detail&id=208)的實作流程

LV1：至少做兩頁，其中一頁必須為首頁
LV2：全部頁面都做，不需做 jQ 與 BS4 JS 效果
LV3：全部效果都做

### 回答區
>
>Card>Image overlays
---
>
>grid system>offset
---
>
>input>radio，實際怎麼寫不清楚
---
>
>modal可以試試看
---
>
>badges>Pill badges

## 額外補充
### vs code 搜尋功能
該檔案內搜尋：cmd-F
全資料夾搜尋：cmd-shift-f
### REM 轉換器
[PX to REM Converter](https://nekocalc.com/px-to-rem-converter)

## 學校提供的 gulp 內 bootstrap 更新問題
由於[Bootstrap](https://github.com/twbs/bootstrap/tags) 已更新到5.1.0

### 作法一
1. 在 package.json 打開檔案
2. 裡面會有一段 bootstrap
3. 把版本改成 5.1.0
4. 刪除 node_modules 資料夾
5. 重新執行 npm install 指令即可

### 作法二
終端機執行以下兩行

npm install
npm install bootstrap

package.json 就會更新到 5.1.0

## variables 內容大略章節分類（版本不同會有差異）
* 色系81行
* Options(212行
* 預設樣式ex全站陰影、圓角設定)
* Spacing(250行 間隔)
* Body(277行 背景顏色 預設文字顏色)
* link(286行 連結)
* breakpoints(斷點)

---

## 討論截圖