layui:
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。非常适合界面的快速开发。layui 首个版本发布于2016年金秋.
官网下载文档查阅：http://www.layui.com
第三方支持：
Layui部分模块依赖jQuery（比如layer），但是你并不用去额外加载jQuery。Layui已经将jQuery最稳定的一个版本改为Layui的内部模块，当你去使用 layer 之类的模块时，它会首先判断你的页面是否已经引入了jQuery，如果没有，则加载内部的jQuery模块，如果有，则不会加载。
另外，我们的图标取材于阿里巴巴矢量图标库（iconfont），构建工具采用 Gulp 。除此之外，不依赖于任何第三方工具。
引用文件：
将解压包文件部署到项目中，引入两个文件
<link rel="stylesheet" href="./plugins/layui/css/layui.css" type="text/css">
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script> <!-- 可加自己的jquery -->
<script type="text/javascript" src="./plugins/layui/layui.js"></script>快速上手：
<body>
<!-- 你的HTML代码 -->
</body>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
</script> 模块化的用法（推荐使用）：
如果想快速使用Layui的组件，跟平时一样script标签引入你的js文件，然后在你的js文件中使用layui的组件。但更推荐你遵循Layui的模块规范，建立一个自己的模块作为入口
<script>
layui.config({
base: '/res/js/modules/' //你存放新模块的目录，注意，不是layui的模块目录
}).use('index'); //加载入口
</script> 上述的 index 即为你 /res/js/modules/ 目录下的 index.js，它的内容应该如下：
/**
项目JS主入口
以依赖layui的layer和form模块为例
**/
layui.define(['layer', 'form'], function(exports){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
exports('index', {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});