来迎接一款让你心动的UI框架

时间  2019-11-05
标签 迎接 一款 让你 心动 框架 繁體版
原文   原文链接

推荐一款优秀的UI框架
原文连接：juejin.im/post/5dbbfe…css

来迎接一款让你心动的UI框架

今天要为你们安利的是冰山工做室出即将推出的前端框架CMUI，本文会抽取框架的一部分进行介绍（布局，列表，动态辅助），让你了解一下这款框架的强大与便捷，但这只是框架的冰山一角。若是你想了解更加详细的信息，能够破解本文底部的二维码，加入咱们的群聊来获取。html

起源

2011左右的时候我开始着手研究响应式网页设计，并基于less语言设计了一套CSS布局框架，起初的设计包括12列，15列，16列三种结构，最终肯定了12+15差值双列的结构，并考虑申请相应的专利，意外的是几个月以后推特发布了前端界家喻户晓的bootstrap框架。后来我进入一家建站公司并基于这套样式框架开发了一个高速建站系统feebless（一款Windows下的应用程序），为了防止之后有新的想法作出来以后没有推广而落后于人的状况发生，还在系统上线后对响应式结构申请了对应专利保护（点击了解一下），这是如今要为你们介绍的CMUI最先的雏形，值得庆幸的是我在准备这篇文章的时候居然翻到了9年前的手稿，当你了解CMUI以后再后头看这些手稿的时候你会发现不少当年残留的影子或者一些思想雏形，包括组件化，异步组件，高速布局，组合，继承等。前端

14年左右的时候我基于模板引擎封装了一套UI系统，取名为CMUI，后用VUE从新封装为组件库用于咱们的项目，在咱们的实际使用中发现这套结构的开发效率很是之高，而且可以精准匹配设计稿，如今咱们决定将其从新封装并开源，但愿更多的开发者可以参与其中。bootstrap

九年前的手稿

2011年双列差值网格系统手稿

重要说明

真假美猴王

CMUI是框架的简称，GitHub上的CMUI并非本次介绍的框架。sass

专利保护

CMUI以MIT协议进行开源，你能够随意使用到你的项目中，可是其内部的部分结构（如布局系统，组合样式）依旧受专利保护，若是你须要应用到你的框架并再次发布，请提早联系咱们，以避免引发对应法律纠纷。bash

PC端仍是移动端

CMUI主要用于移动端，可是样式部分彻底适用于PC端，组件方面PC端使用的组件目前提供的还不全面。前端框架

为何要本身写一套组件库？

虽然目前市面上有很是多的组件库，其中也有一不少很是优秀的表明，可是存在一些非技术性的问题框架

糟糕的C端应对方案

你所知的大部分框架大量保留了bootstrap的思想，这一点从栅格系统和按钮及表单的描述就能看出来，我始终不认为用success表示绿色，用primary表明主色是一个优秀的方案，这种结构的优点在于开发没有设计师参与的项目时（如中台系统）能够达到风格的高度统一而且实现主题变色，可是若是针对C端开发，设计稿变幻无穷，尤为是你的设计团队并不十分严格的状况下就会变得很是尴尬。less

完善不表明适用

提供了完善的组件系统，小到一个按钮，大到完善的表单，首先要认可这是很是优秀的设计，但并非最实用的。由于你可能只须要用到一种样式上的展现，却要引入一个完整的组件，固然你能够只引入它的样式文件，可是若是你这么作，你就须要记忆大量的class命名，而且在不少状况下根据你的须要去重写默认的样式。好比下面这样异步

  1. <button type="button" class="xx-button xx-button--text" style="float: right;padding: 3px 0px;"><span>操做按钮</span></button>
复制代码

我一眼就知道你是谁

若是你使用了一套UI框架，在你不进行海量修改的的状况下几乎一眼就能看出是哪一个框架搭建的，就像全部使用bootstrap搭建的网站几乎都长得差很少。

API是个头痛的问题

记忆API和使用方式是一件很是麻烦的事情，当你使用一套UI框架进行页面开发的时候，脱离了官网的DEMO和API文档，你可能步履维艰，当你想实现一个相似的效果的时候，你也许会常常把代码来回复制，以防止写错。

你只是个使用者而非创造者

若是你使用了一款UI框架，而在这套框架里没有提供你所需的UI功能，这就变的很是尴尬，若是你再次封装，可能你的结构可能和原有的结构彻底不搭，甚至彻底没有关系，换句话讲，你只是一款工具的使用者，而非基于一款工具的创造者。

抛砖引玉的开始

简介

如今要为你们介绍的框架名为CMUI，这只是一个简称，一共包括三个部分：样式库，组件库，方法库，每一个部分均可以独立使用，你甚至能够直接把它直接插入你的项目，和你如今所使用的UI库一块儿使用。

**样式库：**全称cyan，就是赤橙黄绿青蓝紫中你惟一不会的那个英文单词（这一点很是重要）使用sass对css进行了从新的抽取和封装，基于这套样式库你几乎能够在不书写额外的CSS的状况下，仅凭借样式组合完成页面的拆分。更重要的是全部的命名都简单到使人发指，以致于在你用过一次以后不再须要去看API文档。

**组件库：**得益于样式库提供了强大的VIEW层展现，所以咱们提供的组件也相对较少，仅在单凭样式没法解决的问题上提供对应的组件，其目的也是为了下降开发者的门槛

**方法库：**这里对经常使用的WEB功能提供了对应的方法，用于减小你的代码量

无图无真相，秀个logo

Cyan不让你思考，不让你写错

咱们在开发的过程当中为模块起名字是一个很是痛苦而费脑的过程。主要包括如下几个方面：

  • 命名中存在不经常使用的英文单词，不易理解和阅读（你必定用过百度翻译😁）
  • 模块在通过屡次需求修改后名称已经和实际用途不相符
  • 两个样式彻底相同的模块使用不一样的命名，屡次编写样式，好比一个品牌列表和一个用户列表在样式上彻底相同，鬼知道你的产品和设计何时会修改，那么你该如何复用？
  • 同一个页面存在两个相似的模块时命名混乱，如porductTop productBottom productRecommend productNew
  • 为准确描述而使用过长的名称
  • ...

为了解决这一问题，Cyan在命名上作了大量的调研和优化，咱们但愿咱们用到的单词全部人都能一次理解，全部人都能一次写对，先来看一下样式库默认的的全部关键字。

颜色类：red orange yellow green cyan blue purple coffee
调整类：margin padding top left bottom center full
边框类：border item radius round light shadow pill
尺寸类：big small block
元素类：img form swich btn reverse badge
布局类：flex ratio list item img scroll container
辅助类：disabled square float pos clearfix overflow delete justify limit fixed
复制代码

你看到的这些词就是CMUI样式库整合后的的所有class名称，其中颜色类和尺寸类是用户自定义的，你可能很难想象紧靠这些简单的单词就能完成一个页面的拆分，但事实确实如此。

随手写个京东

咱们先用Cyan的结构来还原一个京东首页商品列表做为一个小小的DEMO。

<div class="list list-col2 border">
    <div class="list-item">
        <div class="ratio-container img-container">
            <img src="图片地址" alt="">
        </div>
        <span class=" reverse red badge square pos-a top10 left10">抢</span>
        <div class="padding10">
            <span class="text-limit2 fs-13">日本进口FaSoLa 瓷砖贴纸对角贴 美缝地板贴防水耐磨地贴客厅装饰墙贴自粘 波西风情(12个/张) 大</span>
            <div class="flex-container margint10">
                <span class="text-delete text-light marginr10">999</span>
                <span class="text-red fs-13 right">222</span>
              	<span class="badge reverse">找类似</span>
            </div>
        </div>
    </div>
    <div class="list-item">
        <!--此处代码和上面的相同-->
    </div>
</div>
复制代码

输出效果

描述型样式库

在这案例中你能够看到咱们没有使用任何额外的CSS就完成了样式布局。使用Cyan样式库的一个特色就是你不须要关心你作的是什么，你只须要将你看到的设计稿用class组合描述出来就能够。从另外一个角度来讲，当你看到HTML结构的时候，你不须要看页面就知道最终的效果是什么样子，所以咱们将Cyan称为描述型样式库。

业务逻辑拓展库

虽然我认为起名字是个很是麻烦的事情，可是若是你以为使用class进行描述不是你的风格，必定要使用标识业务的命名，你还能够直接引用咱们的拓展库。

<div class="productList">
    <div class="productItem">
        <div class="productImg">
            <img src="" alt="">
        </div>
        <span class="productName"></span>
        <div class="productInfo">
            <span class="info_oldPrice"></span>      
            <span class="info_newPrice"></span>
            <span class="p_find"></span>
        </div>
    </div>
</div>
复制代码
@import cyan/extend;
.productList{
    @extend list;
    .productItem{@extend list-item;}
    .productImg{ @extend ratio-container img-container;}
    .productName{@extend text-limit2 fs-13;}
    .productInfo{
        @extend flex-container margint10;
        .info_oldPrice{@extend text-delete text-light marginl10}
        .info_newPrice{@extend text-red fs-13 right}
        .p_find{@extend badge reverse}
    }
}
复制代码

真正的开篇

六大布局容器

Cyan提供了6个布局容器，几乎能够知足你全部的布局需求，一块儿来看一下

网格容器

相似于bootstrap的栅格系统，同时提供12或15两种阵列方式。

盒容器

与网格容器惟一的区别是没有间距。

网格容器和盒容器是因为历史缘由以及从此要在PC端实现实现响应式而保留下来的，在实际的移动端开发中并不经常使用，固然若是你习惯了使用栅格系统也彻底可使用。

比例容器

在任何宽度内建立任何比例的区域，一般用于制做头像或商品列表，好比上面的案例，视窗宽度不固定，两列之间的的间距甚至列数设计随时有可能调整，使用的图片不必定是正方形，还要保证图片以某种比例（一般是一比一）进行展示，此时你会用到比例容器。

为了方便你理解，咱们先用网格系统来建立列，后面会有更好的方式

<div class="container">
  <div class="row">
    <div class="span6 margint20"> 先不用关心这个margint20是干什么用的，虽然你能猜出来
      <div class="ratio-container">此处添加比例容器，内部节点默认会以1：1进行展现
        <img src=""/>
      </div>
    </div>
  </div>
</div>
复制代码

输出效果

​

你能够看到在不管可视区宽度是多少，图片均已固定比例展现，若是你须要其余的比例尺寸，直接在后面标识出来就能够了

<div class="ratio-container" ratio="2:3">
  这里的节点会以2：3的比例展现
</div>
复制代码

比例容器的做用不光如此，他还能够实现很是多的效果，好比下面这样，你能想到怎么作吗?咱们后面再说

图片容器

直接将图片放入比例容器会产生一个问题，就是若是使用的图片不是对应比例的，会被拉伸变形，这必定不是你想要的，所以咱们须要图片容器。只须要添加几个额外的class他就能支持很是多的效果，能够知足你的各类须要，

<div class="img-container">
  <img src=""/> 图片默认显示在容器居中的位置
</div>
<div class="img-container round">
  <img src=""/> 图片将以圆形显示
</div>
复制代码

为了方便你理解案例中使用了不一样数字来标识位置，选项中蓝色的字就是你能够额外添加的class，并且能够随意组合，你能用到的全部图片展现效果均可以组装出来。

滚动容器

想建立一个如丝般顺滑的滚动展现效果何必那么麻烦，一个class搞定

<div class="scroll-container">默认是横向滚动
  <img src=""/>
  <img src=""/>
  <img src=""/>
	...
</div>

<div class="scroll-container-y">若是是纵向的滚动就加个-y
  ...
</div>
复制代码

效果

flex容器

我想你必定记不住CSS3中flex的具体用法，所以咱们对flex进行了细致的封装，造成了这个最为强大的布局容器，他的功能能够说是丧心病狂，可是用法之简单却使人发指。

<div class="flex-container">
  这里填写内部结构，横向排列
</div>
<div class="flex-container-col">
  这里填写内部结构，纵向排列
</div>
复制代码

WTF?这就完了，嗯，完了，你没看错，就是这么简单。下面来看看它都能完成那些操做

你能够额外添加下面4种类别，一共10个辅助class，他能够知足你的任何需求，若是直接添加到外层节点能够对全部子节点统一控制，若是添加到子节点上，能够额外的对子节点进行单独的控制。

间隔类型选择 顺序翻转 位置控制 子节点横纵向填满
round/between reverse top/left/right/bottom/center vfull/hfull

我想这些API的封装已经简单到让我懒得去解释其做用了。妈妈不再用担忧我记不住flex的用法了。

总结

容器类可以实现的布局很是强大，并且使用起来很是简单，全部的关键字class都是很是经常使用的，更重要的是他们还能够随意组合，来实现更加复杂的布局，从你用上Cyan开始，你已是一个创造者，限制你的不是框架功能，而是你的想象力。

列表

容器类的功能已经足够强大，可是仍有很大的改进空间。好比咱们要实现一个5列的导航，可使用下面三种方式。

方式一：网格容器或盒容器
<div class="container">
  <div class="row">
    <div class="col3 text-center" v-for="i in 5">
    	<img src="" alt=""><span>导航{{i}}</span>
    </div>
  </div>
</div>
方式二：flex容器
<div class="flex-container">
  <div class="flex1 text-center" v-for="i in 5">
  	<img src="" alt=""><span>导航{{i}}</span>
  </div>
</div>
方式三：滚动容器
<div class="scroll-container">
  <div v-for="i in 5" style="width:20%" class="text-center">
  	<img src="" alt=""><span>导航{{i}}</span>
  </div>
</div>
复制代码

可是若是有两排或者更多排呢？网格容器能够无修改继续使用，flex容器须要添加换行属性，并设置每个的宽度，滚动容器已经不能使用了（除非放置两个滚动容器）

<div class="flex-container">
  <div class="text-center wrap" v-for="i in 10" style="width:20%">
  	<img src="" alt=""><span>导航{{i}}</span>
  </div>
</div>
复制代码

若是此时须要添加分割线呢？你固然能够为使用咱们的边框类为节点添加一个border的class，可是这会致使相邻的边框加粗。虽然经过添加咱们提供的辅助类彻底能够处理这些问题，可是都显得麻烦，所以咱们须要list类

基础list

list类能够随意控制列数以及边框的显示，每一列所占的宽度均相等，而且自动在每行的第一个进行浮动的清除，以保证即便在每一项高度不一样的时候也能很好的展现。与此同时你能够在将list和前面讲过的布局类容器随意组合，在此基础上没有什么布局结构可以可贵住你了。

<div class="list list-col5 border">
  <div class="list-item padding20 text-center" v-for="i in 10">
    <img src="" alt=""><span>导航{{i}}</span>
  </div>
</div>
复制代码

组件list

如今考虑下面几种更复杂的状况：

  • list的每一项宽度不一样
  • 每一项之间有间隔
  • 边框颜色不一样意，甚至有的有，有的没有
  • list须要分组，造成相似通信录的页面效果

前三种状况经过list 和flex-container的组合能够解决，可是须要多写一层DIV，第四种状况须要单独开发虽然并不复杂。此时咱们能够开始使用咱们的组件系统了。

<cmui-list :col='[2,7,5]' :space='20' border='#ab2c4f'>三列2：7：5展现，间距20，边框颜色#ab2c4f
	<cmui-list-item>
    ...
  </cmui-list-item>
</cmui-list>
复制代码

经过组件咱们能够随意设置每一列所占的比例，边框，间距，在item上咱们一样能够对这些属性进行微调，若是边框贴合，会自动合并，并且能够无限嵌套，如此一来全部的行列结构就都能实现，一般这种结构会在广告位的展现上使用，

动态辅助

布局搞定了，但只是结构类似，想要完美匹配设计稿还须要微调，padding/margin /top/bottom/left/right这些值在不一样的设计稿中变数很是大，好在移动端屏幕尺寸较小，只须要将全部可能的值提早在CSS中定义好就能够了。padding12表示12像素响应式填充，paddingh12表示只有水平方向填充。

开玩笑的，CMUI会自动解析你的html结构，并监听符合格式的class定义，当你为一个DOM节点添加paddingXXX的class的时候，会自动在动态样式表中生成对应的样式，而且根据不一样的设备响应成不一样的值。你只须要直接用就好了。

提早尝鲜

前文说过，CMUI包括三个模块，本文也仅对Cyan中的的布局，组件库中的列表，方法库中的动态辅助作了简介，CMUI的功能远不止如此，咱们正在对文档，案例，主题库作最后的完善，若是你想提早尝鲜，能够点击下方连接破解咱们官网的二维码，加入咱们的讨论群来获取。

有本事来扫个码啊

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程