基建开始
工具层体系——比较独立的类
这里是设置文字的基础部分，为了整个网站的基础内容有一个很好的基座。
工具层 Utilities
圆角 Radius
圆角类 = 挂类即得圆角。值引用基础变量 ty-radius-*，改变量全站同步变。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-radius-4 | border-radius: var(–ty-radius-4) → 4px | 小控件（输入框、标签） |
| ty-radius-8 | border-radius: var(–ty-radius-8) → 8px | 默认圆角（按钮、卡片） |
| ty-radius-12 | border-radius: var(–ty-radius-12) → 12px | 卡片、图片容器 |
| ty-radius-16 | border-radius: var(–ty-radius-16) → 16px | 大卡片、弹窗 |
| ty-radius-24 | border-radius: var(–ty-radius-24) → 24px | 特大容器、Hero 图 |
| ty-radius-full | border-radius: var(–ty-radius-full) → 9999px | 胶囊 / 圆形（按钮、头像、徽章） |
ty-radius-4
ty-radius-8
ty-radius-12
ty-radius-16
ty-radius-24
ty-radius-full
工具层 Utilities
阴影 Shadow
阴影类 = 挂类即得阴影。值引用基础变量 ty-shadow-*，hover-shadow-lg 是 hover 时出现 lg 阴影。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-shadow-sm | box-shadow: var(–ty-shadow-sm) | 轻微悬浮（hover 微效果） |
| ty-shadow-md | box-shadow: var(–ty-shadow-md) | 卡片默认阴影 |
| ty-shadow-lg | box-shadow: var(–ty-shadow-lg) | 下拉菜单 / 导航浮层 |
| ty-shadow-xl | box-shadow: var(–ty-shadow-xl) | 弹窗 / toast / 最高层级 |
| ty-hover-shadow-lg | hover 时 box-shadow: var(–ty-shadow-lg) | 静态无阴影，hover 出现 lg |
ty-shadow-sm
ty-shadow-md
ty-shadow-lg
ty-shadow-xl
ty-hover-shadow-lg（hover 看）
工具层 Utilities
Hover 位移
hover 时元素沿上下左右位移 5px，带 0.3s 过渡。类内置过渡，挂上即有效果。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-hover-up-5 | translateY(-5px) | hover 向上移 5px |
| ty-hover-down-5 | translateY(5px) | hover 向下移 5px |
| ty-hover-left-5 | translateX(-5px) | hover 向左移 5px |
| ty-hover-right-5 | translateX(5px) | hover 向右移 5px |
ty-hover-up-5
ty-hover-up-5
ty-hover-down-5
ty-hover-left-5
ty-hover-right-5
工具层 Utilities
Grid 网格
grid 类分两组：固定列数（三端断点内建）+ fit 自适应（auto-fit 自动换列）。gap 统一走 ty-layout-gap。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-grid-421 | 桌面 4 / 平板 2 / 手机 1（gap 24） | 产品/文章卡片网格（最常用） |
| ty-grid-331 | 桌面 3 / 平板 3 / 手机 1（gap 24） | 3 列卡片 |
| ty-grid-211 | 桌面 2 / 平板 1 / 手机 1（gap 24） | 两列大块 |
| ty-grid-111 | 桌面 1 / 平板 1 / 手机 1（gap 24） | 单列 |
| ty-grid-631 | 桌面 6 / 平板 3 / 手机 1（gap 24） | 图标/统计墙 |
| ty-grid-531 | 桌面 5 / 平板 3 / 手机 1（gap 24） | 5 列窄项 |
| ty-grid-442 | 桌面 4 / 平板 4 / 手机 2（gap 24） | 4 列→平板保持→手机 2 |
| ty-grid-432 | 桌面 4 / 平板 3 / 手机 2（gap 24） | 4→3→2 阶梯 |
| ty-grid-fit-280 | auto-fit minmax(100%, 280px)（gap 24） | 自适应小卡片（最小宽 280） |
| ty-grid-fit-380 | auto-fit minmax(100%, 380px)（gap 24） | 自适应中卡片（最小宽 380） |
| ty-grid-fit-560 | auto-fit minmax(100%, 560px)（gap 24） | 自适应大块（最小宽 560） |
| ty-grid-auto-rows | _gridAutoRows: 1fr（gap 24） | 行高统一（配合 grid 类用） |
ty-grid-421（4→2→1）
ty-grid-331（3→3→1）
ty-grid-211（2→1→1）
ty-grid-111（1→1→1）
ty-grid-631（6→3→1）
ty-grid-531（5→3→1）
ty-grid-442（4→4→2）
ty-grid-432（4→3→2）
ty-grid-fit-280（自适应）
ty-grid-fit-380（自适应）
ty-grid-fit-560（自适应）
ty-grid-auto-rows（配合 grid 用）
工具层 Utilities
Flex 布局
命名：ty-flex-{x横排/y竖排}-{主轴对齐}，次轴默认居中；例外才加第二个对齐词。gap 走 ty-layout-gap。
| 类名 | 方向 | 说明 |
|---|---|---|
| ty-flex-x-left | 横排 x | 横排左对齐 |
| ty-flex-x-center | 横排 x | 横排居中 |
| ty-flex-x-right | 横排 x | 横排右对齐 |
| ty-flex-x-between | 横排 x | 横排两端对齐（header 用） |
| ty-flex-y-up | 竖排 y | 竖排顶部 |
| ty-flex-y-center | 竖排 y | 竖排居中 |
| ty-flex-y-down | 竖排 y | 竖排底部 |
| ty-flex-y-between | 竖排 y | 竖排两端 |
| ty-flex-y-center-left | 竖排 y | 竖排居中 + 左对齐（卡片内容） |
| ty-flex-y-up-left | 竖排 y | 竖排顶部 + 左对齐 |
| ty-flex-y-down-left | 竖排 y | 竖排底部 + 左对齐 |
ty-flex-x-left（横排左对齐）
ty-flex-x-center（横排居中）
ty-flex-x-right（横排右对齐）
ty-flex-x-between（横排两端对齐（header 用））
ty-flex-y-up（竖排顶部）
ty-flex-y-center（竖排居中）
ty-flex-y-down（竖排底部）
ty-flex-y-between（竖排两端）
ty-flex-y-center-left（竖排居中 + 左对齐（卡片内容））
ty-flex-y-up-left（竖排顶部 + 左对齐）
ty-flex-y-down-left（竖排底部 + 左对齐）
工具层 Utilities
行数截断 Line Clamp
超长文字按 1/2/3 行截断，超出显示省略号。不断单词（去掉 break-all），英文可读性好。
| 类名 | 属性 | 说明 |
|---|---|---|
| ty-line-clamp-1 | -webkit-line-clamp: 1 | 1 行截断（标题/链接） |
| ty-line-clamp-2 | -webkit-line-clamp: 2 | 2 行截断（卡片描述） |
| ty-line-clamp-3 | -webkit-line-clamp: 3 | 3 行截断（长摘要） |
ty-line-clamp-1：这是一段用于演示行数截断效果的超长文字内容，用于验证当文字超出容器宽度时，多余的部分会被省略号优雅地截断，而不会破坏整体布局的美观性和一致性。这是一段用于演示行数截断效果的超长文字内容，用于验证当文字超出容器宽度时，多余的部分会被省略号优雅地截断，而不会破坏整体布局的美观性和一致性。这是一段用于演示行数截断效果的超长文字内容，用于验证当文字超出容器宽度时，多余的部分会被省略号优雅地截断，而不会破坏整体布局的美观性和一致性。
ty-line-clamp-2：这是一段用于演示行数截断效果的超长文字内容，用于验证当文字超出容器宽度时，多余的部分会被省略号优雅地截断，而不会破坏整体布局的美观性和一致性。这是一段用于演示行数截断效果的超长文字内容，用于验证当文字超出容器宽度时，多余的部分会被省略号优雅地截断，而不会破坏整体布局的美观性和一致性。这是一段用于演示行数截断效果的超长文字内容，用于验证当文字超出容器宽度时，多余的部分会被省略号优雅地截断，而不会破坏整体布局的美观性和一致性。
ty-line-clamp-3：这是一段用于演示行数截断效果的超长文字内容，用于验证当文字超出容器宽度时，多余的部分会被省略号优雅地截断，而不会破坏整体布局的美观性和一致性。这是一段用于演示行数截断效果的超长文字内容，用于验证当文字超出容器宽度时，多余的部分会被省略号优雅地截断，而不会破坏整体布局的美观性和一致性。这是一段用于演示行数截断效果的超长文字内容，用于验证当文字超出容器宽度时，多余的部分会被省略号优雅地截断，而不会破坏整体布局的美观性和一致性。这是一段用于演示行数截断效果的超长文字内容，用于验证当文字超出容器宽度时，多余的部分会被省略号优雅地截断，而不会破坏整体布局的美观性和一致性。
工具层 Utilities
链接下划线动效
hover 时下划线滑入。to-right 从左到右，to-side 从中间向两边展开。颜色继承文字色。
| 类名 | 动效 | 说明 |
|---|---|---|
| ty-link-underline-to-right | 从左滑入 | 经典下划线（导航/正文链接） |
| ty-link-underline-to-side | 中间向两边展开 | 现代感（卡片链接/CTA） |
hover 我看看 → Learn Morehover 我看看 → Explore
工具层 Utilities
三段显隐 Show
三段互斥：桌面 >1024 / 平板 768-1024 / 手机 <768，任意宽度只显示一段。三个 div 各挂一个类，拖窗口看切换。
| 类名 | 显示区间 | 说明 |
|---|---|---|
| ty-show-desktop | >1024px（min-width:1025） | 桌面专属内容 |
| ty-show-tablet | 768~1024px | 平板专属内容 |
| ty-show-mobile | <768px（max-width:767） | 手机专属内容 |
ty-show-desktop
我是桌面版 div（ty-show-desktop）→ 缩到 1024 以下我会消失
ty-show-mobile
我是平板版 div（ty-show-tablet）→ 只在 768-1024 显示
ty-show-tablet
我是手机版 div（ty-show-mobile）→ 只在 <768 显示