介绍
这篇 Tailwind CSS 的教程:Translating a Custom Design System to Tailwind CSS
充分的体现了什么是 Design System.
设计讲求原则, 一致性, 规律, 所以它需要对很多元素做规则, 这些就可以称为 Design System 了.
参考:
市场上有许多 Design System / Guide
这篇会拿几个来参考, 包括 Bootstrap, Tailwind, Material 2, Material 3, Airbnb.
它们的 Figma UI : Bootsrap, Tailwind UI, Material 3, Airbnb
Tailwind build-in 会有一些 Design System, 但是很宽松, 它鼓励使用者自己去 custom set Design System.
Boostrap, Material 就真的是 Design System.
对于初学者最好越多限制越好, 因为你不懂, 你做越多决定就越有可能错. 比如 Airbnb 的 spacing 就只给了 5 个.
Breakpoint
在 RWD (Responsive Web Design) 概念篇 里有提到阔度的概念, percentage 可以在一定范围内实现 RWD, 一旦超出范围最好是修改排版来增加体验.
这个范围就是 breakpoint.
Tailwind
Bootstrap
bootstrap 的 breakpoint 使用
参考: Boostrap Docs – Breakpoints
@include media-breakpoint-up(sm)
@include media-breakpoint-down(sm)
@include media-breakpoint-only(xs)
@include media-breakpoint-between(md, xl)
有 up, down, only, between
up 表示 >= breakpoint
down 表示 <= breakpoint - 0.02px
only 表示 >= breakpoint-a && <= breakpoint-a - 0.02px
between 表示 >= breakpoint-a && <= breakpoint-b - 0.02px
Container
网页设计通常都会有一个 container 概念, 最外层的框框, 它通常用来限制内容的宽度. 电脑虽然是宽屏, 但一般人的视线都集中在中心范围而已, 所以就有了框的概念.
在不同 breakpoint 下, container 的 max-width 是不一样的哦.
Tailwind
Bootstrap
Layout Grid – Column
RWD 要求 width 要依赖 viewport 做 percentage, Bootstrap 会在 container 里切 12 个 column, 通过比例来做内容的 width.
Tailwind
Bootstrap
Aspect Ratio
通常用于图片 / video 的比例
Bootstrap
Material
Typography
font-size 和 line-height
Tailwind
Bootstrap
Material 3 & Figma
Color
Tailwind 没有 build-in primary, secondary color 这个概念, 但是可以 custom set.
Bootsrap
Material 3
Spacing
Tailwind
参考: Padding, Margin, Space Between
Boostrap
AirBnb
