LayoutSimple简易响应式CSS布局框架

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

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

LayoutSimple简易CSS布局框架

Demo

• LayoutSimple v1.0.0 Demo 1
• LayoutSimple v1.0.0 Demo 2

介绍

• 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都是速成了，想了想还是不献丑了，就先这么将就凑合用吧！