Flat-UI 正确打开方式

内容简介：Flat-UI 正确打开方式

Flat-UI 是一款基于Bootstrap扁平风格的UI工具包，个人觉得风格比较美观，简洁，控件齐全，加之扁平化趋势，故用在了花图影铺项目中。有免费版和Pro版（$39）可供选择，Pro版多了PSD原件，也用不到，选择免费就可以。

众所周知，前端的项目一直以来都是拷贝HTML，CSS，JS到工程下直接引用就完事了，花图影铺之前就是这么做的，但这种做法已经非常过时了，自己做了修改后将无法再与官方的新版合并，而且有些细微的调整涉及到很多个地方要修改。对于Bootstrap这种巨复杂的设计，要定制化就几乎是不可能的事了。为了解决这些问题，前端开始有了新的玩法，从开发到测试再到构建都需要配套跟上。而Flat-UI 就是采用Grunt来进行自动化构建，用Bower来管理JS依赖，用Less来与编译CSS，等等等等。简单说下是如何构建Flat-UI的。

Git clone下来的Flat-UI 包含了以下一些重要东西：

这个是bower要用到的依赖声明文件，可以看到里面依赖了jQuery，bower会自动下载指定版本的jQuery到bower_components目录之下，以备后用。全局安装bower：npm install -g bower，新项目也可以用bower init来生成。

工程说明文件，包括工程名，作者，版本，Grunt依赖包等一些信息。如果一个新的项目，可以用grunt init打开一个向导一步一步填写。

这个是Grunt执行脚本，会从上面的文件中读取值，里面定义了一些处理事件，比如清理之前构建，测试，压缩CSS，JS，生成文档，复制等等，甚至可以起一个静态服务器来调试。无比强大，类似于Maven pom文件。

以上文件在Flat-UI工程目录中基本上不用修改，只需要在当前目录下执行bower install 下载依赖js包，grunt install 下载grunt工具，再执行grunt dist 就能在dist/目录下获得最新的可发布版本了，将该目录文件复制到web工程中引用就好了。

关于less目录就包含了Flat-UI 所有CSS配置地方，主要修改的就是这里了，比如改变导航背景颜色等等。其中按模块归类的非常好，一眼就能看出该修改哪里，variables.less 定义了所用到的颜色，全局样式，排版，小图标，表格等等。修改起来非常容易，尤其还有一些联动的取色，通过一个基准色，计算出偏亮或者偏暗值，而不需要一个一个去查色板。修改完后只需要grunt dist 就能生成好CSS。

Flat-UI 不仅是一个优秀的UI工具包，同时也是一个学习前后端分离构建的好例子，当然这只是针对我这以后端为主的开发者而言。

参考： https://github.com/designmodo/Flat-UI

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• golang hijack打开方式
• 自包含系统：打开微服务的正确方式
• Node.js流，这样的打开方式对不对！
• 除了制造“逼真假脸”，GANs还有哪些打开方式？
• 网站安全升级，HTTPS才是网页的“正确打开方式”
• 盘点远程桌面服务远程代码执行漏洞POC打开方式

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。