iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

30天30個前端任務系列 第 4

#3. Expanding Cards(原生JS版)+ 用tailwindcss玩grid排版

今日專案進度

A. 用grid方式將專案重新排版(透過tailwind css)

B. 使用vue-router建立新的分頁

C. 卡片擴展效果(codepen


A. 透過tailwind css排版首頁

原本
https://ithelp.ithome.com.tw/upload/images/20210904/20130534SgJa6brgAn.png

修改後
https://ithelp.ithome.com.tw/upload/images/20210904/20130534kacIPb6209.png

Demo LinkGit Commit

心得

  1. 在vue檔案內管理CSS:SCSS與tailwind css各有優勢。
  2. 以Home.vue來說,透過tailwind css能夠很方便做到RWD的設計,因為都直接寫在html tag裡,按著xs md lg來觀察就能夠知道RWD的變化。
  3. 在眾卡片尚未透過迴圈動態載入前,仍需要用scss寫一個語意化的選擇器名稱(eg. card)。才不會讓tailwind css的屬性重複太多。
  4. 除了將語意化的屬性寫在裡面,另一個作法放在tailwind css的@layer utilities當中(見index.css檔),好處是能夠配合RWD屬性來應用。如果是自定義在的CSS選擇器,就不能配合tailwind css的RWD屬性來使用。
  5. 承1.,tailwind css很方便,但目前還無法完全取代SCSS,比如說Tailwind css無法寫出比grid areas更直覺的排版。若因應專案考得兩者並用時,得先確立好一些使用原則,方便後續維護。(還在摸索中...)

B. 使用vue-router導至其他分頁

心得

  1. 目前還沒有遇到太大問題,之後分頁一多時,會需要考慮檔案結構。目前是把所有頁面放在views資料夾當中,元件類的統一放components集中管理。
  2. 今天有嘗試將昨日完成的圖片模糊載入效果用Vue來實現,還在研究中。

C. 卡片擴展效果

codepen: https://codepen.io/zyrxdkoz/pen/qBjaNRv

實作邏輯

  1. 先完成切版,讓每張卡片平均對齊,此時的flex屬性的值為0.5,意思是flex-grow為0.5,表示剩下的空間,每個都可以平均分到0.5份。
    https://ithelp.ithome.com.tw/upload/images/20210904/20130534s1IFKH9Plv.png

  2. 設定每個卡片的active狀態:flex-grow的值為5,左下角文字的顏色飽和度也從0變為1。再加上transition ease-in。讓active狀態平滑展示。

  3. 相關DOM掛載監聽器,被點擊的卡片加上active狀態,其他則移除。

明日任務

  1. 挑戰比較困難的Covid 19 Tracker
  2. Q&A欄位展示效果

上一篇
#2. Blurring Loading Image(原生JS版), Vercel 出乎意料好用
下一篇
#4. Covid 19 Tracker(Vue版)
系列文
30天30個前端任務19

尚未有邦友留言

立即登入留言