有渔 UI 库

用于公司项目的 UI 库

介绍

项目是以 Bootstrap 为基础进行开发的,除此之外还用到了一些第三方插件。为了符合 UI 设计的风格,根据需求对 Bootstrap 进行了一些定制和适当的扩展,同时对个别的第三方插件进行了样式重写。本文档将展示修改后的视觉效果以及如何去使用。

目录

关于 UI 库

库的核心代码都通过 stylesheets/youyu.scss 引用,包含了定制并扩展后的 Bootstrap 和一些自定义的组件等;还有几个分散到其他文件夹中的文件起到重写第三方插件样式的作用:

文件引用

/ 在 Slim 中
/ youyu.scss 一定要在最前面,第一个引用
= stylesheet_link_tag "youyu", "application"

关于本文档

本文档的存在是为了提高设计师和开发者的工作效率以及降低设计师与开发者之间的沟通成本。它同时扮演着两个角色:

  • 一套设计规范,供设计师在设计新页面时引用参考;
  • 一份 API 文档,让开发者能够迅速构建页面。

因此,本文档提供了「设计师」和「开发者」这两种浏览模式供不同角色来查看,默认为「设计师」模式。

除了自定义的组件之外,第三方的库与插件(包括 Bootstrap)的示例只有被改造(定制、扩展和重写)过的,关于它们的具体用法还请移步各自的官网:

另外,所列出的组件不局限于已通过 UI 库进行改造过的,还有一些为了设计师方便而加进去的。