FH-UI（全称：Fallen Homes UI in Upperworld）是一款风格独特的前端框架。FH-UI重视视觉冲击力、层次感和适当的装饰，以活泼、锐利作为核心设计理念。
这可能并不是一个适合大多数需求的框架，如果您恰好十分欣赏这个框架，那么恭喜您！希望您喜欢这个框架。
基于 FH-UI 活泼的特点，FH-UI 的配色比较鲜艳明亮。根据各种使用场景，FH-UI设计了 General、Safe、Warn、Danger 和 Special 四种界面颜色，并基于这四种基色设计了除 Default 外的 Dark 和 Glass 两种变种。其中，Default 是 FH-UI 的主题颜色，主题颜色可自定义（与 Default 区分），不过需要注意的是，FH-UI 大多使用白色作为背景颜色，很少应用到主题颜色。
以上配色是预先设置的，在实际应用中，部分颜色会使用各类滤镜动态调整。
Default - 基色。用于没有文本内容的界面。
Dark - 暗色。用于有文本内容的界面，例如按钮。
Glass - 半透明色。用于 Ghost 样式的界面。
General - 普通色。普通或缺省的按钮、普通的消息提示框等控件均使用此颜色。
Safe - 安全色。吸引用户交互的颜色，常用于保存、同意等操作按钮。
Warn - 警示色。提醒用户留意的颜色，一般用于消息提示，不建议使用在按钮上，除非周围有 Safe 和 Danger，可以作为过渡色。
Danger - 危险色。告知用户谨慎操作，一般用于删除、取消等操作按钮。
Special - 特殊色。提醒用户对象的特殊性，例如难以定性又需要引起用户注意的复杂信息、操作等。
FH-UI 沿用了 Ant Design 的 Grid 栅格布局方式，将整个设计建议区域按照 24 等分的原则进行划分。
如您所见，您现在正在浏览 FH-UI 所提供的文档版式。FH-UI 支持优化文章排版，仅需在文章所在的元素上添加类fh-article即可格式化为文章版式。
为了避免读者在阅读大量文本时串行，中文字体需要有较大的行间距。在文档版式下，<p>标签具有 1.5em 行高，同时段落（<p>）之间还有 0.5em 上下外边距。
FH-UI 对于控件有一个独特的设计——角标，统一位于右上角。在 FH-UI 中，任何一个可交互的控件都会有一个角标，在选择类型的控件中，角标还会被用来容纳代表选中的图标。角标使用 CSS 渐变功能实现，默认长度为 5px。在控件没有填充颜色的情况下（例如 Ghost 样式），角标跟随控件颜色；而在控件有深色填充颜色的情况下，角标颜色变为 50% 不透明度的白色，浅色则为 15% 不透明度的黑色。
FH-UI 设计了四种按钮样式：Full、Ghost、Dashed 和 Air，这些样式均有 Disabled 变种。
上文提到，角标是由 CSS 渐变实现的，而渐变应用在 background-image 中，这就导致如果元素存在边框就会产生怪异的视觉效果。由于按钮控件的边框的宽度已经被算入按钮总尺寸中，因此为了统一视觉效果，角标也要有所偏移。
首先是 Dashed 按钮。由于边框是虚线，留下虚线会产生凹凸不平的角标边缘，因此角标必须将边框覆盖，角标向右上角偏移了 1px。
其次是 Ghost 按钮。由于有实线边框的存在，产生了角标偏大的视觉错觉，但如果将角标向右上角偏移了 1px 又会产生偏小的错觉，因此折中一下向右上角偏移了 0.5px。
Block 按钮会自适应父元素的宽度。
在 Msgbox 对话框中的按钮会使用固定的最小宽度和一定的间距。Msgbox 可以使用方法创建，本段落效果仅作演示。
动画是 FH-UI 中的一项重要元素。需要注意的是，在 FH-UI 中大多数情况下动画都以右上角作为起点，即从右上角向左下角展开，从左下角向右上角收起。例如下面的窗口：（刷新页面可查看展开动画）
以上动画播放速度被设定为1秒，播放速度可修改。
我觉得大概没多少人会愿意阅读这个章节，因为如果您是来干正事的，那么这个章节就是在浪费您的时间。当然如果您和我一样是个大闲人，那您不妨坐下来听听这个故事。不过我不能说太多，这里毕竟还是 FH-UI 的设计文档，不要喧宾夺主了。
现在，让我们回顾这套框架的全称，Fallen Homes UI in Upperworld。我们暂且把这个“Upperworld”放一边，Fallen Homes 是什么？它是一个出自作者我 Sheep-realms 笔下、由我花费数年时间设计的一套世界观。虽然相关文学作品已经几乎停止更新，但这个世界观里的各种设计对我产生了深远的影响。
总的来说，Fallen Homes 是一个诞生在未来高科技世界下的一个用于训练人工智能的模拟世界，而伴随这个世界诞生的还有其特色UI，也就是您现在看到的东西。随着时间的推移，在 Fallen Homes 世界中的人们意识到了他们是“缸中之脑”，并将外面的世界称之为“Upperworld”，也叫“上界”。
所以说，代入这个世界观，您现在所看到的是 Fallen Homes UI 在 Upperworld 的拷贝版本。