Css-LayoutSimple简易响应式CSS布局框架

       开发这个css布局的目的是为了少做一些重复的工作,一是前端或多或少会开发一些很小的响应式项目, 二是UI设计的出来的界面总是各种布局各种样式,这个时候如果前端去使用Bootstrap或者Foundation之类框架无疑是雪上加霜。根本没有起到一点便捷的作用,反而增加了一堆冗余的代码。因此我就想能不能提取其中比较适用的部分,在添加平时经常会用到的样式进去,做一个比较简单自由度相对高一些的小框架。也就相当于一个初始化css布局,所以有了属于我的LayoutSimple简易响应式CSS布局框架。

      废话不多说,先介绍这个小项目吧。

LayoutSimple简易CSS布局框架

Demo

介绍

  • LayoutSimple 是一款简易的自由度极高的前端响应式布局 CSS 框架,项目使用 LESS 开发,含有一些实用的 LESS Mixin,如果对 LESS 有些功底的朋友可以自由发挥和组合。
  • 项目地址:LayoutSimple v1.0.0
  • 适用人群:前端开发布局随意性较大,自由度需要很高的前端开发项目

使用方法

[方法一:自由度较高,需要掌握有less功底]

  • 1.下载项目中的 src 文件,在您的项目中给他建一个窝(文件夹),将它复制拷贝过去
  • 2.建议使用 vscode 开发,并安装插件 easy less,这样项目中每个 less 头部的注释可以很好的利用起来,具体的请参考 easy less 文档介绍
  • 3.看下下面的文档,几分钟就够了,你会很快熟悉起来,如果不想熟悉我的命名方式,没关系,你可以自己到组件 component 中尽情的 diy 一个你喜欢的,保存下来,之后就可以一直用这套极简快速布局框架了

[方法二:自由度中等,需要掌握一些less基础,这个可以速成,详见我的博客 cnblogs leona-d ]

  • 1.下载项目中的 src 文件
  • 2.打开 config 中的 _default.less 根据 config/_default.less 进行配置
  • 3.编译 LayoutSimple.less 文件(这里推荐使用 vscode 打开项目并安装 easy less 进行编译)
  • 4.编译成功,将生成的 LayoutSimple.css 或 LayoutSimple.min.css 放入自己的项目中直接使用即可

[方法三:自由度一般,仅需掌握css即可]

  • 直接下载 dist 中的 LayoutSimple.css 或 LayoutSimple.min.css 放入自己的项目中直接使用

使用文档

LayoutSimple v1.0.0 文档

 

PS:尚有不足之处,还望读者海涵。欢迎各位读者给予一些建设意见,以期我的小框架可以做的更好。

     本来是想学习下用wepack打包下项目,让他可以支持npm安装就可以使用,但是由于我的npm和wepack都是速成了,想了想还是不献丑了,就先这么将就凑合用吧!

posted @ 2019-03-01 22:46  YanEr、  阅读(833)  评论(0编辑  收藏  举报