CSS变量系统

框架使用CSS自定义属性构建了完整的设计系统

颜色变量

--color-primary

--color-secondary

--color-accent

--color-success

间距变量

--spacing-xs: 0.25rem

--spacing-sm: 0.5rem

--spacing-md: 1rem

--spacing-lg: 1.5rem

/* CSS变量定义示例 */
:root {
  --color-primary: hsl(220, 85%, 55%);
  --color-gray-100: hsl(0, 0%, 97%);
  --spacing-md: 1rem;
  --font-size-base: clamp(1rem, 3vw, 1.125rem);
}
      

层叠图层系统 (@layer)

使用CSS @layer规则控制样式层叠顺序

卡片组件

使用@scope作用域样式的卡片组件

页脚内容

/* 层叠图层定义 */
@layer reset, base, components, utilities;

/* 组件层样式 */
@layer components {
  .card {
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
  }
}

/* 作用域样式 */
@scope (.card) {
  .card-header {
    font-size: var(--font-size-lg);
    font-weight: 700;
  }
}
      

网格布局系统

使用CSS Grid的现代布局方案

span-3

span-6

span-3

span-4

自动适应网格

Item 1

Item 2

Item 3

Item 4

容器查询

根据容器尺寸而非视口调整样式

可调整宽度的卡片

尝试调整此容器的宽度，观察卡片布局变化

/* 容器查询样式 */
.container-query {
  container-type: inline-size;
  container-name: component;
}

.card {
  /* 基础样式 */
  display: block;
  padding: var(--spacing-lg);
}

@container component (min-width: 480px) {
  .card {
    padding: var(--spacing-xl);
  }
}

@container component (min-width: 768px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}
      

Flexbox布局

一维布局系统，使用逻辑属性

左侧内容

项目1

项目2

项目3

子网格布局

嵌套网格与父网格对齐

A

B

C

右列

瀑布流布局

使用CSS Grid的masonry布局

短内容

中等内容
多行文字

另一项

较长内容
多行文字
更多内容

短

间距系统

使用逻辑属性的间距工具

垂直间距示例

使用space-y-*类

自动设置间距

水平间距

使用space-x-*

自动设置

使用逻辑属性：m-inline-auto

排版系统

响应式字体和排版工具

三级标题 h1.text-3xl

二级标题 h2.text-2xl

一级标题 h3.text-xl

大号正文 text-lg

基础正文 text-base

小号正文 text-sm

极小正文 text-xs

渐变文字效果

阴影系统

多级阴影深度

shadow-sm

shadow-md

shadow-lg

shadow-xl

边框系统

圆角和边框样式

rounded-sm

rounded-md

rounded-lg

rounded-full

border-primary

border-secondary

border-accent

border-success

实用工具类

丰富的CSS工具类

显示与隐藏

.block

.inline-block

位置定位

top-0 left-0

bottom-0 right-0

动画与过渡

CSS动画和过渡效果

过渡效果

缩放动画

进入动画

滑动进入

交互效果

悬停、聚焦等交互状态

切换开关

响应式设计

断点系统和响应式工具

移动端：垂直排列

桌面端：水平排列

在sm断点以上显示

在sm断点以下显示

/* 响应式断点 */
/* 小屏幕: 640px */
@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:hidden { display: none; }
}

/* 中屏幕: 768px */
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:flex-row { flex-direction: row; }
}
      

现代CSS特性

CSS Clip-path

混合模式

滚动行为

平滑滚动区域

功能检测与渐进增强

使用@supports检测浏览器特性支持

/* 容器查询功能检测 */
@supports (container-type: inline-size) {
  .container-query-support {
    display: block;
  }
}

@supports not (container-type: inline-size) {
  .container-query-support {
    display: none;
  }
  
  /* 回退方案 */
  .container-query {
    /* 使用媒体查询作为回退 */
  }
}
      

Vanilla Modern CSS 框架教程