前言

渐进真实 (Progressive Truthfulness)
[渐进的真实性]可能是构建物理对象模型的更好方法......从一个完全详细但仅类似于所需内容的模型开始。然后,一个接一个地调整一个属性,使结果更接近新创建的精神视觉,或更接近现实世界对象的真实属性。
......从样本本身具有一致性的样本开始,确保设计师失去这种一致性。
弗雷德里克布鲁克斯 -设计中的设计
Semantic UI中的组件旨在帮助开发人员在开发过程中遵循渐进的真实性。
使用Semantic UI的开发人员只需要使用CSS变量指定其组件与默认主题的区别,而不必从空白画布创建组件。
对于没有时间磨练特定外观的开发人员来说,默认主题是优雅和中性的,具有清晰易读的开源sans-serif字体Lato。

用例引导 (Lead By Example)

重新创建GitHub (Recreating GitHub)
Semantic UI包括一个旨在展示主题的示例项目。此项目包括创建打包主题,使用组件CSS覆盖以及使用管理主题的示例theme.config。
示例项目包括两个HTML文件,index.html旨在使用侧边栏交换主题,并使用预编译的CSS。static.html使用Semantic UI输出的文件,可以与我们的gulp pipeline 一起使用,尝试修改主题。
一些特别需要注意的事项:
使用 site.variables 修改页面容器大小,默认字体和颜色。
使用带有变量的 overrides 来添加 GitHub 的特殊格式的选项卡样式。
在theme.config中将多个单独的组件主题组合在一起。

使用主题

全站默认设置 (Sitewide Defaults)
Semantic UI 包括十二种命名颜色。具有颜色变化的组件在定义颜色应如何显示时会继承这些全局变量。
每个继承级别 包含一个特殊文件site.variables,该文件定义了每个组件可以扩展的主题范围的默认值。
全局变量使用更高级别的抽象,以避免繁琐的必须修改多个属性以更改元素的外观。
其他按钮阴影(如悬停hover、活动active和焦点focus状态中使用的按钮阴影)是通过修改颜色变量的饱和度和亮度来创建的,这些派生的变量将自动调整为新的调色板。