CSS – Design System

介绍

这篇 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 的比例

Tailwind

Bootstrap

Material

Typography

font-size 和 line-height

Tailwind

text-xs:    12px / 16.0px / 1.33
text-sm:    14px / 20.0px / 1.43
text-base:  16px / 24.0px / 1.5
text-lg:    18px / 28.0px / 1.56
text-xl:    20px / 28.0px / 1.4
text-2xl:   24px / 32.0px / 1.33
text-3xl:   30px / 36.0px / 1.2
text-4xl:   36px / 40.0px / 1.11
text-5xl:   48px / 48px   / 1.0
text-6xl:   60px / 60px   / 1.0
text-7xl:   72px / 72px   / 1.0
text-8xl:   96px / 96px   / 1.0
text-9xl:  128px / 128px  / 1.0

Bootstrap

Material 3 & Figma

Display Large :  57px / 64px  / 1.12
Display Medium:  45px / 52px  / 1.16
Display Small :  36px / 44px  / 1.22

Headline Large:  32px / 40px  / 1.25
Headline Medium: 28px / 36px  / 1.29
Headline Small : 24px / 32px  / 1.33

Title Large   :  22px / 28px  / 1.27
Title Medium  :  16px / 24px  / 1.50
Title Small   :  14px / 20px  / 1.43

Body Large    :  16px / 24px  / 1.50
Body Medium   :  14px / 20px  / 1.43
Body Small    :  12px / 16px  / 1.33

Label Large   :  14px / 20px  / 1.43
Label Medium  :  12px / 16px  / 1.33
Label Small   :  11px / 16px  / 1.45