# t3 code review

---

Chris希望我們幾乎完全使用bootstrap，所以做任何改動應該要去翻bootstrap文件看看如何改，真的沒辦法才自己寫css

---

# 季芳
* 想好如何針對不同裝置去調整RWD，例如：手機400px、平板768px、電腦1200px
* 使用bootstrap時要看他原本的class做了什麼，例如container有預設尺寸
* 思考什麼是`<a>`、什麼是`<button>`，再做選用
* 使用grid時如果要加gap有另一種系統可以用--CSS Grid（須改Sass，暫不碰）
* 修改時看bootstrap底下文件、規範
* 思考什麼是card，有沒有需要用
* 從網頁右邊的style欄如何看出是bootstrap寫的還是自己寫的
* 寫code時，`＠media`要套用的對象離對象位置越近越好，不要怕寫很多次`@media`
* fontawesome有文件可以修正每個icon寬度不同問題，關鍵字：Fixed Width Icons
* flex不要用太多or濫用，練習時沒關係
* 關於改樣式用bootstrap class（!important）還是寫css，Chris的書第七章有提到

---
# Mango
* `display: flex`就用flex的方式調整，例如：`width:100%` or `flex-basis:100%`
* 善用branch做版本管理
* 版面從小切到大 or 大到小要一致，從小切到大（手機為主）`@media (min-width)`，從大切到小（電腦為主）`@media (max-width)`
* 命名規則統一且嚴格執行
* css分檔管理，例如：reset.css

---
# Chris
* 做RWD時要考慮與設計圖畫面感受相同，例如：banner圖片是重點要隨時都很大
* 設計RWD時選模擬器不同裝置，橫向縱向去切，拉軸調大小不專業
* grid system是什麼，清楚以後切版會好切很多，[裡面的網格系統](https://www.youtube.com/@user-zm7wx6jv3t/videos
)，有Gutter才是grid system
* 容器元素要分離，控制上比較容易
* 屬性要加在哪一層才對，是容器要的樣式還是元素
* 設計RWD時要考慮什麼是可動距離，什麼是固定距離
* bootstrap的套件像是套餐，要點就要一整套，沒有套餐就單點
* flex-shrink算法是加權平均，概念就是感受相同
* 有剩餘空間且想水平置中可用offset去填
* 思考常態與特例