前言
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-ico
iconfont(字体图标)
.I-
通用类名,图片(Image),.I-ico
则是图片精灵的图标(图片图标)