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都是速成了，想了想仍是不獻醜了，就先這麼將就湊合用吧！