“PrimusUI”是自己在借鑒了如今網(wǎng)上很多開源的UI庫，再經(jīng)過自己整理加工的一個(gè)簡(jiǎn)單代碼集合。
每個(gè)功能塊的CSS代碼都很少，力求簡(jiǎn)單易懂，低門檻，代碼可根據(jù)自己實(shí)際情況輕易修改，改到符合自己場(chǎng)景為止。
一、制作的理由
之所以重復(fù)造輪子，有以下幾點(diǎn)原因：
1）現(xiàn)今開發(fā)很多時(shí)候講究效率，給你很短的時(shí)間，完成很多的內(nèi)容。
如果不備點(diǎn)存貨，那只能加班加點(diǎn)的趕進(jìn)度。
2）由于是加班加點(diǎn)趕出來的項(xiàng)目，百分百會(huì)有各種問題，兼容性啊、功能性啊、與設(shè)計(jì)圖偏差。
如果碰到挑細(xì)節(jié)的測(cè)試或領(lǐng)導(dǎo)，搞不好就要讓你1像素1像素的調(diào)界面了。
3）如果有套經(jīng)歷過沉淀的UI庫，那么能夠通過樣式組件，快速搭建頁面，并且兼容性等各方面都有保證。
開發(fā)的時(shí)候只要關(guān)注各個(gè)頁面中的細(xì)節(jié)即可，從容的寫代碼。
4）網(wǎng)上的很多開源庫都比較大，當(dāng)需要在實(shí)際項(xiàng)目中使用的時(shí)候，可能就需要修改部分代碼。
正因?yàn)楸容^大，改動(dòng)的時(shí)候就比較費(fèi)勁。
5）很多開源庫都做些精細(xì)的雕琢，但自己公司的UI設(shè)計(jì)可能并不喜歡這種風(fēng)格。
這樣他們?cè)O(shè)計(jì)出來的頁面會(huì)與那些庫不一致，就會(huì)出現(xiàn)第4種的情況。
6）寫一套自己的UI庫，可以提升自己的想象空間，激發(fā)創(chuàng)造力。
CSS3提供了很多新特性，但平時(shí)可能都沒用到，不是不想用，而是想不到該如何用，例如偽元素、彈性布局等。
7）開發(fā)的過程也是學(xué)習(xí)和實(shí)踐的過程，將平時(shí)看到的，用到的，組合到一起，做了以后才會(huì)看到問題，再解決實(shí)際問題。
古人說的絕知此事要躬行還是很有道理的。
8）整套UI庫，其實(shí)更可以把其看成是套骨架，一套你可以隨意修改的骨架，要血肉豐滿可以自己動(dòng)手，這樣更有成就感。
這里只是分享一下思路，拋鉆引玉。
二、開發(fā)環(huán)境
現(xiàn)在前端開發(fā)與以前不同了，以前只要個(gè)帶顏色的文本編輯器，一個(gè)瀏覽器即可。
現(xiàn)在前端項(xiàng)目也越來越大，也需要管理配置。
1）工程搭建
本次開發(fā)使用了構(gòu)建工具“Gulp”，基于流的構(gòu)建工具。利用“Node.js”豐富的包管理，可以將各種插件收入囊中。
如果不熟悉這個(gè)玩意兒，可以參考一下我以前寫的一篇小教程《前端自動(dòng)化構(gòu)建工具gulp記錄》。
也可以參考PrimusUI庫的文檔中《安裝》與《插件》
2）CSS開發(fā)
CSS現(xiàn)在也可以預(yù)編譯了，SASS就是一種，有了預(yù)編譯，寫CSS也可以模塊化開發(fā)，并且能夠自動(dòng)打包。
預(yù)編譯可以使用Gulp中的插件“gulp-sass”，在那篇兩教程中有提到過。
還裝了瀏覽器屬性兼容插件，rem自動(dòng)計(jì)算插件等。
3）頁面自適應(yīng)
借助flexible.js， 通過計(jì)算html中的font-size（用于計(jì)算rem），設(shè)置viewport的放大倍數(shù)，來實(shí)現(xiàn)移動(dòng)自適應(yīng)。
4）文檔庫編輯
說明的文檔庫是很有必要的，讓人更有感性的認(rèn)識(shí)。
文檔庫是用jekyll編寫的，這是一個(gè)靜態(tài)網(wǎng)站生成器，前面一段時(shí)間也整理過兩篇小教程，《安裝與配置》和《實(shí)際應(yīng)用》
三、應(yīng)用技巧
所有的文件就如上圖所示，下面就介紹下CSS的開發(fā)過程，demo展示頁面與文檔編輯就直接略過了。
1）rem
rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位。
庫中大部分都用了這個(gè)單位，這樣能做更好的適配。但字體、邊框等使用了px單位。
由于要計(jì)算，如果手工算的話，那要累成狗了，所以可以使用“Gulp”中的插件“postcss-px2rem”自動(dòng)計(jì)算。
2）網(wǎng)格（grid.scss）
在做網(wǎng)格之前，曾經(jīng)看過Bootstrap中的網(wǎng)格代碼，就是用float加百分比寬度，或px定寬實(shí)現(xiàn)的。
但移動(dòng)端的話，這么寫還不夠，移動(dòng)端的瀏覽器比PC端的先進(jìn)，所以可以用更新的CSS3屬性來實(shí)現(xiàn)。
CSS3中有個(gè)彈性布局（Flexible），這是個(gè)好東西，可以自動(dòng)計(jì)算寬度的，非常適合手機(jī)屏幕。
由于手機(jī)屏幕尺寸很多，很多情況下不能寫死，即使用百分比，某種角度來說，還是寫死的。
彈性布局還有個(gè)好處，那就是對(duì)齊，我以前碰到過兩個(gè)字體大小不一樣，但是要在同一行底部對(duì)齊，當(dāng)時(shí)做起來很費(fèi)勁。
而使用彈性布局只要一個(gè)屬性即可，我在這個(gè)CSS模塊中，封裝了多種對(duì)齊樣式。
如果對(duì)這個(gè)還比較陌生，可以參考下前面寫的一篇小教程《CSS3伸縮盒Flexible Box》
用網(wǎng)格可以輕易實(shí)現(xiàn)元素位置的擺放，而不像以前要用float、position來做布局，列表、布局、表單的實(shí)現(xiàn)就需要與網(wǎng)格的協(xié)作。
3）預(yù)編譯
CSS代碼用了預(yù)編譯，就和開發(fā)服務(wù)器代碼差不多了，下面幾個(gè)文件里面放的就是全局會(huì)用到的mixin、變量或函數(shù)。
預(yù)編譯有很多優(yōu)點(diǎn)：
- 減少代碼，預(yù)編譯中有條件判斷和循環(huán)，這樣能組織更多的邏輯，還能復(fù)用。
@for $col from 1 through 12 {
.ui-col-#{$col} { @include flex($col); }
}
- 變量的定義，能夠使得值更有語義。
- 嵌套語法，可以讓CSS更有層次，一眼就能看出父級(jí)是誰，不像以前還得寫一長(zhǎng)串。
.ui-flex{
display:flex;width:100%;box-sizing:border-box;
& > [class^="ui-width-"],
& > [class^="ui-rem-"]{
flex-basis:auto;
}
}
- 混合（mixin）與函數(shù)（function）可以將通用的邏輯或代碼提煉出來，能更好的復(fù)用。
-
CSS也可以做模塊化，通過“@import”引用不同的功能塊，適應(yīng)不同的場(chǎng)景。
“PrimusUI”雖然代碼量不多，但制作過程還是挺有勁的，雖然在使用SASS、Jekyll與Gulp的時(shí)候有點(diǎn)學(xué)習(xí)成本，但都是非常輕量的。
會(huì)用了以后能夠做很多事情，方便開發(fā)，提升效率。希望這個(gè)庫對(duì)大家平時(shí)的開發(fā)會(huì)有幫助。
GitHub的項(xiàng)目頁面用英文寫了些介紹，更接地氣點(diǎn)。
