鐵人檔案
將 UIUX 與前端工程師的雙重角度來撰寫這次主題。
把 Figma 上的設計稿 ，從 design system 到 UI 元件利用 Chakra UI 完成實作，嘗試在30天摸索出視覺系統開發流程，以及分析如何搭配 framer motion 等技術以 React 實作流行的網頁動態特效。
multipart components 已經介紹完像是 Button 類型的 UI 元件該如何利用 theme 客製化來達成設計稿上的 UI可以持續用相同的方...
上一篇已經了解到 multipart components 在更改 style 上的細節。今天就按照計畫，把原本預設的 Modal 樣式改造成設計稿上的樣式。...
上一篇想利用 style config 來客製化 Modal 的樣式，ModalHeader、ModalFooter、ModalBody 等可以正在改動，卻發現...
今天想來討論關於 Chakra UI breakpoint 使用方式，雖然跟設計系統不一定很有關係，但又很有關係。 Responsive Styles Resp...
在色彩計畫上，我們都透過 Semantic Tokens 去設定好元件在白天和深夜模式的顏色，我們可以利用 Chakra UI 提供的 useColorMode...
經過了15天嘗試以 Charkra UI 把設計系統實作出來。有些細節可以根據設計文件去做調整:像是 空間 Space、陰影 Shadow 也可以先規劃好系列的...
今天想介紹我在實作RWD上很常用到的 Aspect Ratio ，讓我們可以簡單做到等比例縮放的容器搭配內容。他算是 Chakra UI 幫你處理好的語法糖。篇...
昨天有介紹 Aspect Ratio 運用在 RWD 排版相當的方便 如下圖是旅遊類型的卡片 卡片排列四欄，卡片寬度會隨著螢幕寬度做變化，就很適合使用 Aspe...
Stack Stack 也是我很常用於排版的 UI component 。display 屬性是 Flex ，添加了方便排版的語法糖元件。適合用於群組元件們來安...
Grid、GridItem 熟悉 CSS gird 屬性，應該會熟知 display grid 屬性，不過語法較為複雜，Chakra UI 提供許多簡略的方式，...
