前言

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则是图片精灵的图标(图片图标)
Demo
Code
            

            
            
粤ICP备13073167号-4
Copyright © 2017 - 2018 深圳市龙岗区三向砖网络科技工作室 版权所有