CSS FRAMEWORK REVISE

一、修订的部分:

background.css
需要增加背景图片定位相关的样式
background / background-size / background-position / background-attachment.
备注:盒子需预设高度。

postion.css(已修订)
需要增加垂直居中、水平居中、盒子居中的样式。

解决方案及优化
例如:
line-5 / line-10 / line-15

font.css
增加text-shadow、letter-space。

line-height.css(已修订)
增加固定行高,具体数值(像素单位)。

解决方案及优化
例如:
.multiple-lines.two.font-12 {…}

list.css
增加水平排列<li>之间的space值。

text.css(已修订)
关于多行溢出隐藏,增加单行选项,即one写法,适应响应式需求。
另外,默认行高是20px,字号14px,行高1.4倍。
考虑增加不同字号的使用场景。

解决方案及优化
多行写法必定会附加字号名称,因此,样式追加,附带字号条件即可。
例如:
.multiple-lines.two.font-12 {…}
即12像素字号下,两行的高度。

二、新增的部分:

备忘:Bootstrap 4最大的变化应该是部分计量单位由px改为rem,另外新增了flex布局。

flex.css
暂时考虑在4.0版本中新增flex样式集合

transform.css
新增变形样式,即旋转、缩放、位移等。

col.css
考虑到主流的栅格系统(布局),新增一项。
命名方式由col-one到col-twelve。
col-1命名方式与Bootstrap 4冲突。

animation.css
考虑根据自己常用需求,定制部分css动画。

grid.css
这个grid是css的一种布局,与我在container.css中的class命名不一样,所以,class中grid的命名要改,避免冲突。

三、美化:

对现有的组件进行美化,补全缺少的组件。
例如:
单选、多选、开关、加载等