CSS FRAMEWORK REVISE

一、修订的部分:

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

解决方案及优化:
例如,背景固定,不随页面滚动。
.container {
position: relative;
min-height: 600px;
background: url(/img/background.jpg) no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;/* 固定背景 */
}

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

解决方案及优化:
增加pin-center、pin-x-center、pin-y-center。

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

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

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

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

3月25日增补:考虑重新写这个样式表,增加不同场景下样式多样性的需求。

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

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

icon.css
以fontAwesome4.7版本为标准,增加更多常用图标的应用。
主要增加应用雨按钮与列表的icon写法。

解决方案及优化:
例如:class=”btn btn-red icon left heart-o”
例如:class=”list list-reset icon left heart-o”

table.css
完善表格样式表,在bootstrap的表格样式的基础,增加更多自定义需求。

解决方案及优化:

radius.css
补充更完整的圆角列表。

解决方案及优化:

二、新增的部分:

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

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

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

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

3月29日增补:还是以简洁的写法为主,将英文单词数字都改为数字,即使与bs4重叠,也互不影响。

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

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

三、美化:

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

3月22日修订:

颜色深浅:

  • .bg-red-50 to .bg-red-0
  • .bg-red-100 to .bg-red-1
  • .bg-red-a100 to .bg-red-a1

单词缩写:

  • .deep-purple to .d-purple
  • .light-blue to .l-blue
  • .overflow-auto to .over-auto
  • .pin-t-out-5p to .pin-t-o-5p

3月25日修订:

删改:

  • 删除:corner.css(理由:比较鸡肋,corner用得少,写得太单一,不够灵活;inner-box,大部分属性与postion内定义的重叠。)
  • 修改: inner-box (理由:大部分属性与postion内定义的重叠,因此,修改名称为transparent,即透明背景,删除了定位相关的属性,仅保留背景透明度的属性。)

3月29日修订:

修改:

  • background.css 增加最小、最大高度的写法。
  • col.css 将列序号由英文单词改为数字写法。尽管与bootstrap4的写法重叠,但是互补影响。其实最初定义的时候也是以数字结尾,原因很简单,就是为了代码简洁,后来bs4正式版推出后才去看了一下,发现也是这么写的,开始是为了避免雷同才改的。思考了一下,既然是依赖bootstrap去写的,也就无所谓避讳雷同了。重新定义了而已。