/UPUI-Practice

自製常用的前端組件

Primary LanguageCSS

手刻些常用組件,大約兩週一次進度,不定時台北實體聚會檢討。 目的是大家一起進步。 有興趣加入請留言給我

UPUI

UPUI is a styleless look and feel. It doesn’t rely on any frameworks and aims to optimize for cross-device use, lets you focus your UI/UX design, and offer an experience that is immediately accessible.

內容包含但不限於:

1, Reset Normalize CSS 認識 HTML tags 並將不同瀏覽器預設的樣式統一。 基礎的 css 與 html 知識可以在這裡觀察到: block-level elements 與 inline elements、偽元素與偽類、 多元素組合選擇器...等。 參考資料

2, 12 Column Grid Center Grid- % VS flex 實作css的佈局與定位、尺寸比例之關係,flow、layer、flex、grid、position ...等。 探討常見的置中版型,一般網路上的 css framwork 大多是齊左佈局,我的經驗中最常遇到的反而是置中為主的設計方式,如何設計出置中為主的 grid。

3, Layout 常用版型實作

4, Form UI Form 幾乎是所有網站必須的UI,各式各樣的input、select、check box、radio... 留意表單互動的各種細節、訊息回饋、等待回應的提示等等。

5, SVG Icons Solutions

6, Components UI - Vanilla VS Vue VS React

7, SVG Canvas

8, Scroll and Actions - Tween VS Animation

9, Simple Libraries - DOM、BOM、Img-Upload、Date、Full-Pages ...

9, Simple CRUD CMS build with firebase