Skip to content
Pre-release

@sanseistone sanseistone released this Sep 7, 2018 · 279 commits to master since this release

Freedom CSS Framework 1.0

思考:

有些东西,感觉写出来没有什么意义,不写,又觉得不完整。例如,有关container(容器),行、列等,bootstrap的思路已经完美无缺了,为何要重定义?

如果,剥离了bootstrap框架,那这套css框架还远远不够。当然,基本元素的自由搭配是没有问题的。对于页面非常重要的结构布局来说,缺少的就太多了。

近期看了太多的框架,相较而言,bootstrap应该是历史最悠久的了,其他框架,例如semantic-ui、tailwind-css、uikit等等,几乎都想跟bootstrap区分开来,都强调灵活性,强调自然语法,强调简短组合。

诚然,在css的写法上,特别是对css3的应用上,这几个后来者确实表现得酣畅淋漓,令人眼前一亮。

对习惯了bootstrap的人来说,学习新框架或许没有那么困难,重要的还是要实践,但是,灵活的框架,共性就是语法太多,独立的语法,呈现独立的效果,相对而言,就要记忆更多的词汇。

简介:

如题,没别的,就是个css框架, 在之前的自制框架基础上,不断的覆写,修改,还原再修改覆写。 总之,在避免命名冲突和重复的基础上,尽量更接近自然语法的语言和规则去命名。

一点点说明:

在重新修订框架的时候,因为要考虑把不同元素和属性区分开来,以及元素和属性的排序方式重新排列,所以大量的阅读了不同框架的文档。 命名规则上,我原本的思路就与 Tailwind CSS的风格不谋而合,后面我就大量的借鉴和复制了Tailwind CSS框架的命名方式。

框架构成:

  • text(文本段落)
  • img(图像)
  • table(表格)
  • form(表单)
  • list(列表)
  • button(按钮)
  • button-color(按钮颜色)
  • position(定位)
  • float(浮动)
  • overflow(溢出)
  • display(显示)
  • width(宽)
  • height(高)
  • font(字体)
  • font-color(字体颜色)
  • padding(内补)
  • margin(边界)
  • border(边框)
  • border-color(边框颜色)
  • background(背景)
  • background-color(背景颜色)
  • container(容器)
  • column(分列)
  • flex(弹性布局)
  • space(间隔)

注意:

所有预设都需要考虑响应到不同设备。
继承bootstrap对媒体查询的预设,不同于bootstrap的移动端优先,以PC端优先作为默认设备,媒体查询从PC端向下兼容。

关于命名:

在不占用html标签和css属性名称的基础上,优先使用各元素属性结合预设值作为命名的方式。优先使用连字符方式连缀字符(个人认为,连字符命名方式比驼峰命名及下划线命名方式都更具辨识度。)

Assets 2
You can’t perform that action at this time.