# 概述

# 命名由来

# Cyan

赤橙黄绿青蓝紫中唯一一个你不会的英文单词,隐喻了在这套框架中你无需记忆和使用那些你不熟悉单词或API,所有的一切都异常简单。

# Maple

maple中文译为枫叶,它代表坚毅的性格,更代表岁月的沉淀,而其常见的颜色为黄色、红色,均为暖色,使其与cyan交相辉映,预示着前端的两极,同时也是LOGO的原型。

# 前身

CyanMaple的前身是2012年使用less语言编写的WEB端响应式框架feebless,后在2015年转为SASS语言重构,同时加入VUE组件功能。针对移动端进行了大量的优化并用于实际项目的开发,简称CMUI。从这段发展历史中你可以看到这套框架并不追求高深的新技术,但是在实际的开发中你会发现它比任何你曾经用过的框架都简洁高效,一定会让你爱不释手。

警告

虽然我们的简称是CMUI,你也可以在GitHub上找到一个名为CMUI的前端框架,但并非我们的CyanMaple,请注意辨别使用。

# 使用

CyanMaple包含三个部分:CyanMaple方法CMUI组件库

Cyan是一个功能强大的CSS库,我们称之为描述性样式库,你可以单独引用到你的项目里。在不借助任何其他框架、组件库甚至在不写任何额外的CSS样式的情况下,亦可完成绝大部分的UI工作需求。

Maple方法中涵盖了前端开发中的一些常用的方法,这些方法能够帮助你快速完成功能。我们也会陆续加入更多的方法。

Maple组件库基于VUE封装了常用组件,和其他UI库相比,提供的组件并不算多,原因很简单:因为根本不需要。绝大多数UI问题都可以被Cyan解决掉,因此这里只对下面三种情况进行了组件封装。

  • Cyan解决不了的UI问题
  • Cyan可以解决但是结构复杂的UI问题
  • 需要调用JS来处理事件的UI问题

使用cyan的盒模型注意事项

Cyan采用的盒模型为box-border,并且是全局使用,如果你的项目使用其他形式的盒模型可能会受到影响。

解决方案:
在项目中添加如下代码重置盒模型
*,*:before,*:after{
  box-sizing: content-box;
}
为需要使用到Cyan的外层容器的class增加cmuiBox

使用Maple的依赖注意事项

Maple中的组件依赖于lodash,因此你需要保证你的项目引入lodash。

# 接下来请选择你需要了解和学习的内容(建议从Cyan开始):

Cyan

maple方法

CMUI组件