前言
FreeUi框架的理念是“面向对象式CSS”的前端框架。
简单的单页，复杂的整站，快速开发的后台，都可适用。
目前UI和功能模块还比较简单，但我更是希望能够推广这样的CSS命名规范。
目前是兼容IE8及以上浏览器。
作者：
X-DA
展望
1、发布自己的模块，代码块。
2、评论，点赞，收藏别人的代码块。
3、官方自己出一个功能性全面的辅助配件，集成更多常用的模块和功能，供后台管理项目开发使用。
处理HTML代码
下载代码包
基本结构
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="/css/freeui.css?v=1.0.0" type="text/css" rel="stylesheet" />
</head>
<body>
<script type="text/javascript" src="/js/jquery-1.12.1.min.js?v=1.0.0" ></script>
<script type="text/javascript" src="/js/freeui.js?v=1.0.0" ></script>
</body>
</html>
命名空间
<script type="text/javascript" src="/js/freeui.js?v=1.0.0" fu-var="F,U"></script>
<script type="text/javascript">
console.log(U['version']); //V1.0.0
console.log(F['version']); //V1.0.0
$('.m-pop').U('Modal'); //框架弹窗方法
$('.m-pop').F('Modal'); //框架弹窗方法
</script>
引入freeui.js的时，默认全局变量为
F
，以及Jquery的
$.fn.F
，框架支持自定义命名空间，引用框架js时，增加
fu-var="U"
的属性后，全局变量就不再是默认的
F
而是
U
，同理Jquery内的变量则变成$.fn.U
当有多个命名空间时，可用英文逗号“,”隔开，如上述代码所示。
meta标签
1.移动端（响应式）处理
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!--禁止移动设备缩放，以真实比例若要使用响应式和兼容移动设备必须添加-->
2.优先选择高版本内核
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<!--让网站优先使用webkit内核渲染或优先使用高版本IE内核渲染-->
<meta name="renderer" content="webkit">
<!--针对多核浏览器优先使用webkit内核-->
3.SEO搜索引擎优化
<meta name="keywords" content="SEO关键词" />
<meta name="description" content="网站描述" />
<!--SEO-->
4.移动端仿原生APP优化
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-title" content="Freeui框架">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
CSS命名规范
类名组成
类名或者ID，一般组成为[类型]-[命名空间]_[实例名]，例如一个框架内的按钮的类名为u-FU_btn
其中u-为UI组件类型，FU_是框架的CSS命名空间，btn则是button的缩写btn,即按钮的意思。
命名空间会导致类名变长，但为了避免冲突也是不得已而为之。私有代码可不使用命名空间，但建议使用带类型前缀的命名哦。
类名分主导类名、辅助类名、通用类名
1、主导类名：一个DOM结构只存在一个主导类名
2、辅助类名：必须以绑定形式存在与主导类名绑定或与标签名绑定，书写样式时与主导类名绑定.m-cat.s-yellow{}
3、通用类名：可主可辅，两者通用
例如，一个红色的导航条，下边距有20，有淡入的CSS动画写法为
<div class="m-nav s-red g-mb20 a-fadeIn"></div>
类名类型
.m- 模块(module)、主导类名，一般结构比较复杂，可假设是一个对象，假设这个模块是一只猫，模块内也是可以存在模块的，假设一只猫.m-cat吃了一只鱼.m-fish
.M- 大模块(module)、主导类名，大写的M，一般表示该模块唯一，#M-，接上脑洞，比如地球.M-earth，常用在网页公共部分，比如公共底部，公共头部，公共侧栏，主界面等。
.p- 属性(property)、主导类名，相当于组成对象的元素（必须被模块内），常用用到CSS子选择符.m-cat > .p-foot（非强制用子选择符）所以这部分类名是可以大量重用的。
.u- UI组件、结构单一，主导类名，比如按钮，单选框，结构简单的元素，接上假设则比如说猫项圈.u-collar，项圈不属于猫天生有的，所以跟模块和属性有些区别
.g- 布局(grid)、通用类名，会影响元素空间位置时所用到，接上即猫的位置在哪啊，或者猫多大只啊（当然也可以定义在模块上）
.a- 动画(animation)、辅助类名，CSS动画。接上则是这只猫的动作，是跑啊，还是跳啊.a-jump
.s- 风格(style)、辅助类名，猫的种类有很多，通过该类名来区别不同的猫，灰猫还是黄猫啊，但猫都有脚是吧，该类名就是把不同的地方覆盖掉，默认猫是灰色的，但我这只猫是黄色的，即.s-yellow
.S- 风格(Style)、通用类名，重用性高的风格，带有强制覆盖性，比如.S-block，接上脑洞，这只猫整容了，染发了，可以这么理解。
.d- 设备(device)、通用类名，在各类设备上的表现。
.z- 状态、辅助类名，常用的状态比如.z-cur当前、.z-lock锁定、.z-loading加载、
.j- 辅助类名，JS操作节点、辅助类名，该类名不写样式，供JS选择节点或者添加事件，但需要在与某个主导类名绑定选择或主导类名之内，例如碰了下猫铃铛会响，选择器为$('.m-cat .j-bell')
.J- 通用类名，大写的J表示可直接选择器选择，例如$('.J-goTop')的功能是页面回到顶部，任何DOM只要加了.J-goTop 的类名之后就会获得回到顶部的能力。
.f- 通用类名，方法，CSS的方法，比如去除浮动f-clear，另为未来CSS做打算，例如CSS3的calc()
.i- 通用类名，图标(icon)，.i-icoiconfont（字体图标）
.I- 通用类名，图片(Image)，.I-ico则是图片精灵的图标（图片图标）