Back to Details

generic-static-design-system

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Static Site Design System

静态网站设计系统

Design system patterns for minimalist static sites (pure HTML/CSS/JS).
Extends: Generic Design System - Read base skill for color theory, typography scale, spacing system, and component states.
适用于极简静态网站（纯HTML/CSS/JS）的设计系统模式。
扩展自： 通用设计系统 - 阅读基础技能文档以了解色彩理论、排版比例、间距系统和组件状态。

Pure CSS Approach

纯CSS方案

No preprocessors, no Tailwind, no build tools. Just CSS.
无需预处理器、无需Tailwind、无需构建工具。仅使用CSS。

CSS Custom Properties

CSS自定义属性

css
:root {
  /* Brand colors - keep palette minimal */
  --bg-primary: #000000;
  --text-primary: #ffffff;
  --accent: #00ff00;

  /* Spacing */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  /* Timing */
  --transition-fast: 0.15s;
  --transition-base: 0.3s;
}
css
:root {
  /* 品牌颜色 - 保持调色板简洁 */
  --bg-primary: #000000;
  --text-primary: #ffffff;
  --accent: #00ff00;

  /* 间距 */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  /* 过渡时长 */
  --transition-fast: 0.15s;
  --transition-base: 0.3s;
}

System Font Stack (No Web Fonts)

系统字体栈（无Web字体）

css
/* System fonts = zero load time */
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

code {
  font-family: "SF Mono", Monaco, "Courier New", monospace;
}
css
/* 系统字体 = 零加载时间 */
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

code {
  font-family: "SF Mono", Monaco, "Courier New", monospace;
}

Responsive Typography with clamp()

使用clamp()实现响应式排版

css
/* Fluid sizing, no media queries needed */
h1 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

body {
  font-size: clamp(1rem, 3vw, 1.125rem);
}
css
/* 流式尺寸，无需媒体查询 */
h1 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

body {
  font-size: clamp(1rem, 3vw, 1.125rem);
}

CSS-Only Animations

纯CSS动画

Keyframe Animations

关键帧动画

css
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}
css
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

Transition Patterns

过渡模式

css
/* Hover effect - GPU accelerated */
.link {
  transition:
    transform var(--transition-base) ease,
    color var(--transition-base) ease;
}

.link:hover {
  transform: translateY(-2px);
  color: var(--accent);
}
css
/* 悬停效果 - GPU加速 */
.link {
  transition:
    transform var(--transition-base) ease,
    color var(--transition-base) ease;
}

.link:hover {
  transform: translateY(-2px);
  color: var(--accent);
}

Staggered Animation with nth-child

使用nth-child实现 stagger 动画

css
.menu a {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.menu.visible a {
  opacity: 1;
  transform: translateY(0);
}
.menu.visible a:nth-child(1) {
  transition-delay: 0.1s;
}
.menu.visible a:nth-child(2) {
  transition-delay: 0.2s;
}
.menu.visible a:nth-child(3) {
  transition-delay: 0.3s;
}
css
.menu a {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.menu.visible a {
  opacity: 1;
  transform: translateY(0);
}
.menu.visible a:nth-child(1) {
  transition-delay: 0.1s;
}
.menu.visible a:nth-child(2) {
  transition-delay: 0.2s;
}
.menu.visible a:nth-child(3) {
  transition-delay: 0.3s;
}

CSS-Only Interactive Patterns

纯CSS交互模式

Hidden/Visible Toggle

隐藏/显示切换

css
.hidden {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.visible {
  max-height: 300px; /* Must be > content height */
}
css
.hidden {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.visible {
  max-height: 300px; /* 必须大于内容高度 */
}

Icon Rotation

图标旋转

css
.arrow {
  transition: transform 0.3s ease;
}

.rotated .arrow {
  transform: rotate(180deg);
}
css
.arrow {
  transition: transform 0.3s ease;
}

.rotated .arrow {
  transform: rotate(180deg);
}

Focus States

聚焦状态

css
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
css
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

Component Patterns (No JS)

组件模式（无JS）

Accessible Button

可访问按钮

html
<button class="btn" type="button">Click Me</button>
css
.btn {
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: 1px solid var(--text-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-base) ease;
}

.btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-primary);
}
html
<button class="btn" type="button">点击我</button>
css
.btn {
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: 1px solid var(--text-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-base) ease;
}

.btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-primary);
}

Navigation

导航栏

html
<nav>
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
</nav>
css
nav a {
  padding: var(--space-sm);
  text-decoration: none;
  color: var(--text-primary);
}

nav a:hover {
  color: var(--accent);
}
html
<nav>
  <a href="#section1">章节1</a>
  <a href="#section2">章节2</a>
</nav>
css
nav a {
  padding: var(--space-sm);
  text-decoration: none;
  color: var(--text-primary);
}

nav a:hover {
  color: var(--accent);
}

Performance Targets

性能目标

FileMax Size
HTML< 5KB
CSS< 10KB
JS< 5KB
Total< 50KB
LighthouseTarget
Performance95+
Accessibility90+
Best Practices100
文件类型最大尺寸
HTML< 5KB
CSS< 10KB
JS< 5KB
总计< 50KB
Lighthouse指标目标值
性能95+
可访问性90+
最佳实践100

See Also

另请参阅

  • Generic Design System - Token organization, spacing
  • Design Patterns - Core patterns
  • UX Principles - Visual hierarchy
  • 通用设计系统 - 令牌组织、间距
  • 设计模式 - 核心模式
  • UX原则 - 视觉层级