用 Storybook 做一個 UI 整理集

本篇大綱:本篇要解決的問題。安裝。整理檔案架構。檔案介紹。使用 pug、sass。在 Storybook 上使用標題跟資料夾的層級。輸出成靜態檔。範例程式碼。

用純css寫的網頁預覽效果

覺得可以用在歷年回顧或是頁面預覽的區塊上使用,就自己寫了一個。預設div的寬高就用width/padding的css特性直接做一個正方形處理。而捲動的效果直接用background-position來處理。結合以上2點,實際上會寫到的css沒幾行,如下…

一個簡單的卡片樣式 simple card ui

從Google Material Design問世以後,愈來愈多網站設計出了卡片的ui。卡片樣式大同小異,大部份包含:頭(大圖)、身體(內文)、尾巴(連結)。今天設計了一個簡單造形的卡片,歡迎大家取用。以下講一下設計上的思考,跟一些最近常用的方法。