这是一套 CSS 样式标准与最佳实践,用于构建响应式、无障碍且易维护的 Web 界面,特别考虑多语言内容的显示。
核心原则:移动优先设计;符合 WCAG 2.1 AA;正确显示重音字符与不同书写系统;类名遵循 BEM(使用 Mantine 时除外);优化性能;React 前端使用 Mantine UI v8 组件系统。
Mantine UI v8 集成:在 frontend/src/theme.ts 中用 createTheme 配置主题,设置主色、字体族('Noto Sans', 'Arial Unicode MS'),默认暗色方案,并对 Text、TextInput、Textarea 等组件设置默认属性以适配 Chuukese 文本。在 main.tsx 中引入 '@mantine/core/styles.css' 与 '@mantine/notifications/styles.css',用 MantineProvider、Notifications、ModalsProvider 包裹应用。文中还给出 Chuukese 单词展示、翻译输入、加载状态、通知与确认弹窗等常见模式示例。
CSS 架构:按 normalize、variables、typography、layout、components、utilities、responsive 顺序组织文件;用 CSS 自定义属性定义颜色、排版、间距(与 Mantine 间距刻度对齐)和断点,并用 data-mantine-color-scheme 区分明暗模式。组件标准覆盖 Chuukese 文本显示、翻译输入框与词典条目卡片;布局标准含网格系统、容器与间距工具类。
响应式与无障碍:采用移动优先媒体查询和 clamp() 流体排版;提供焦点样式、高对比度与减弱动态偏好支持,强调 4.5:1 对比度。另有 display、text、响应式等工具类,以及性能、可维护性、跨浏览器与多语言的实践建议,并列出通过 W3C 校验、满足 WCAG 2.1 AA 等验收标准。
限制:资料未提供该规范的安装命令、版本号、许可证、收费方式或具体平台要求,这些信息暂未提供。