CSS – Design System

介绍

这篇 Tailwind CSS 的教程:Translating a Custom Design System to Tailwind CSS

充分的体现了什么是 Design System.

设计讲求原则, 一致性, 规律, 所以它需要对很多元素做规则, 这些就可以称为 Design System 了.

 

参考:

市场上有许多 Design System / Guide 

这篇会拿几个来参考, 包括 Bootstrap, Tailwind, Material 2Material 3, Airbnb.

它们的 Figma UI : BootsrapTailwind UIMaterial 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

 

posted @   兴杰  阅读(143)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示