开发这个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 放入自己的项目中直接使用
使用文档
PS:尚有不足之处,还望读者海涵。欢迎各位读者给予一些建设意见,以期我的小框架可以做的更好。
本来是想学习下用wepack打包下项目,让他可以支持npm安装就可以使用,但是由于我的npm和wepack都是速成了,想了想还是不献丑了,就先这么将就凑合用吧!