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

Bootstrap

Material 3 & Figma

Color

Tailwind 没有 build-in primary, secondary color 这个概念, 但是可以 custom set.

Bootsrap

Material 3

Spacing

Tailwind

参考: Padding, Margin, Space Between

Boostrap

AirBnb