來迎接一款讓你心動的UI框架

時間 2019-11-05

標籤迎接一款讓你心動框架简体版

原文原文鏈接

推薦一款優秀的UI框架
原文連接：juejin.im/post/5dbbfe…css

來迎接一款讓你心動的UI框架

今天要爲你們安利的是冰山工做室出即將推出的前端框架CMUI，本文會抽取框架的一部分進行介紹（佈局，列表，動態輔助），讓你瞭解一下這款框架的強大與便捷，但這只是框架的冰山一角。若是你想了解更加詳細的信息，能夠破解本文底部的二維碼，加入咱們的羣聊來獲取。html

起源

2011左右的時候我開始着手研究響應式網頁設計，並基於less語言設計了一套CSS佈局框架，起初的設計包括12列，15列，16列三種結構，最終肯定了12+15差值雙列的結構，並考慮申請相應的專利，意外的是幾個月以後推特發佈了前端界家喻戶曉的bootstrap框架。後來我進入一家建站公司並基於這套樣式框架開發了一個高速建站系統feebless（一款Windows下的應用程序），爲了防止之後有新的想法作出來以後沒有推廣而落後於人的狀況發生，還在系統上線後對響應式結構申請了對應專利保護（點擊瞭解一下），這是如今要爲你們介紹的CMUI最先的雛形，值得慶幸的是我在準備這篇文章的時候居然翻到了9年前的手稿，當你瞭解CMUI以後再後頭看這些手稿的時候你會發現不少當年殘留的影子或者一些思想雛形，包括組件化，異步組件，高速佈局，組合，繼承等。前端

14年左右的時候我基於模板引擎封裝了一套UI系統，取名爲CMUI，後用VUE從新封裝爲組件庫用於咱們的項目，在咱們的實際使用中發現這套結構的開發效率很是之高，而且可以精準匹配設計稿，如今咱們決定將其從新封裝並開源，但願更多的開發者可以參與其中。bootstrap

九年前的手稿

重要說明

真假美猴王

CMUI是框架的簡稱，GitHub上的CMUI並非本次介紹的框架。sass

專利保護

CMUI以MIT協議進行開源，你能夠隨意使用到你的項目中，可是其內部的部分結構（如佈局系統，組合樣式）依舊受專利保護，若是你須要應用到你的框架並再次發佈，請提早聯繫咱們，以避免引發對應法律糾紛。bash

PC端仍是移動端

CMUI主要用於移動端，可是樣式部分徹底適用於PC端，組件方面PC端使用的組件目前提供的還不全面。前端框架

爲何要本身寫一套組件庫？

雖然目前市面上有很是多的組件庫，其中也有一不少很是優秀的表明，可是存在一些非技術性的問題框架

糟糕的C端應對方案

你所知的大部分框架大量保留了bootstrap的思想，這一點從柵格系統和按鈕及表單的描述就能看出來，我始終不認爲用success表示綠色，用primary表明主色是一個優秀的方案，這種結構的優點在於開發沒有設計師參與的項目時（如中臺系統）能夠達到風格的高度統一而且實現主題變色，可是若是針對C端開發，設計稿變幻無窮，尤爲是你的設計團隊並不十分嚴格的狀況下就會變得很是尷尬。less

完善不表明適用

提供了完善的組件系統，小到一個按鈕，大到完善的表單，首先要認可這是很是優秀的設計，但並非最實用的。由於你可能只須要用到一種樣式上的展現，卻要引入一個完整的組件，固然你能夠只引入它的樣式文件，可是若是你這麼作，你就須要記憶大量的class命名，而且在不少狀況下根據你的須要去重寫默認的樣式。好比下面這樣異步

<button type="button" class="xx-button xx-button--text" style="float: right;padding: 3px 0px;"><span>操做按鈕</span></button>
複製代碼

我一眼就知道你是誰

若是你使用了一套UI框架，在你不進行海量修改的的狀況下幾乎一眼就能看出是哪一個框架搭建的，就像全部使用bootstrap搭建的網站幾乎都長得差很少。

API是個頭痛的問題

記憶API和使用方式是一件很是麻煩的事情，當你使用一套UI框架進行頁面開發的時候，脫離了官網的DEMO和API文檔，你可能步履維艱，當你想實現一個相似的效果的時候，你也許會常常把代碼來回複製，以防止寫錯。

你只是個使用者而非創造者

若是你使用了一款UI框架，而在這套框架裏沒有提供你所需的UI功能，這就變的很是尷尬，若是你再次封裝，可能你的結構可能和原有的結構徹底不搭，甚至徹底沒有關係，換句話講，你只是一款工具的使用者，而非基於一款工具的創造者。

拋磚引玉的開始

簡介

如今要爲你們介紹的框架名爲CMUI，這只是一個簡稱，一共包括三個部分：樣式庫，組件庫，方法庫，每一個部分均可以獨立使用，你甚至能夠直接把它直接插入你的項目，和你如今所使用的UI庫一塊兒使用。

**樣式庫：**全稱cyan，就是赤橙黃綠青藍紫中你惟一不會的那個英文單詞（這一點很是重要）使用sass對css進行了從新的抽取和封裝，基於這套樣式庫你幾乎能夠在不書寫額外的CSS的狀況下，僅憑藉樣式組合完成頁面的拆分。更重要的是全部的命名都簡單到使人髮指，以致於在你用過一次以後不再須要去看API文檔。

**組件庫：**得益於樣式庫提供了強大的VIEW層展現，所以咱們提供的組件也相對較少，僅在單憑樣式沒法解決的問題上提供對應的組件，其目的也是爲了下降開發者的門檻

**方法庫：**這裏對經常使用的WEB功能提供了對應的方法，用於減小你的代碼量

無圖無真相，秀個logo

Cyan不讓你思考，不讓你寫錯

咱們在開發的過程當中爲模塊起名字是一個很是痛苦而費腦的過程。主要包括如下幾個方面：

命名中存在不經常使用的英文單詞，不易理解和閱讀（你必定用過百度翻譯😁）
模塊在通過屢次需求修改後名稱已經和實際用途不相符
兩個樣式徹底相同的模塊使用不一樣的命名，屢次編寫樣式，好比一個品牌列表和一個用戶列表在樣式上徹底相同，鬼知道你的產品和設計何時會修改，那麼你該如何複用？
同一個頁面存在兩個相似的模塊時命名混亂，如porductTop productBottom productRecommend productNew
爲準確描述而使用過長的名稱
...

爲了解決這一問題，Cyan在命名上作了大量的調研和優化，咱們但願咱們用到的單詞全部人都能一次理解，全部人都能一次寫對，先來看一下樣式庫默認的的全部關鍵字。

顏色類：red orange yellow green cyan blue purple coffee
調整類：margin padding top left bottom center full
邊框類：border item radius round light shadow pill
尺寸類：big small block
元素類：img form swich btn reverse badge
佈局類：flex ratio list item img scroll container
輔助類：disabled square float pos clearfix overflow delete justify limit fixed
複製代碼

你看到的這些詞就是CMUI樣式庫整合後的的所有class名稱，其中顏色類和尺寸類是用戶自定義的，你可能很難想象緊靠這些簡單的單詞就能完成一個頁面的拆分，但事實確實如此。

隨手寫個京東

咱們先用Cyan的結構來還原一個京東首頁商品列表做爲一個小小的DEMO。

<div class="list list-col2 border">
    <div class="list-item">
        <div class="ratio-container img-container">
            <img src="圖片地址" alt="">
        </div>
        <span class=" reverse red badge square pos-a top10 left10">搶</span>
        <div class="padding10">
            <span class="text-limit2 fs-13">日本進口FaSoLa 瓷磚貼紙對角貼 美縫地板貼防水耐磨地貼客廳裝飾牆貼自粘 波西風情(12個/張) 大</span>
            <div class="flex-container margint10">
                <span class="text-delete text-light marginr10">999</span>
                <span class="text-red fs-13 right">222</span>
              	<span class="badge reverse">找類似</span>
            </div>
        </div>
    </div>
    <div class="list-item">
        <!--此處代碼和上面的相同-->
    </div>
</div>
複製代碼

輸出效果

描述型樣式庫

在這案例中你能夠看到咱們沒有使用任何額外的CSS就完成了樣式佈局。使用Cyan樣式庫的一個特色就是你不須要關心你作的是什麼，你只須要將你看到的設計稿用class組合描述出來就能夠。從另外一個角度來講，當你看到HTML結構的時候，你不須要看頁面就知道最終的效果是什麼樣子，所以咱們將Cyan稱爲描述型樣式庫。

業務邏輯拓展庫

雖然我認爲起名字是個很是麻煩的事情，可是若是你以爲使用class進行描述不是你的風格，必定要使用標識業務的命名，你還能夠直接引用咱們的拓展庫。

<div class="productList">
    <div class="productItem">
        <div class="productImg">
            <img src="" alt="">
        </div>
        <span class="productName"></span>
        <div class="productInfo">
            <span class="info_oldPrice"></span>      
            <span class="info_newPrice"></span>
            <span class="p_find"></span>
        </div>
    </div>
</div>
複製代碼

@import cyan/extend;
.productList{
    @extend list;
    .productItem{@extend list-item;}
    .productImg{ @extend ratio-container img-container;}
    .productName{@extend text-limit2 fs-13;}
    .productInfo{
        @extend flex-container margint10;
        .info_oldPrice{@extend text-delete text-light marginl10}
        .info_newPrice{@extend text-red fs-13 right}
        .p_find{@extend badge reverse}
    }
}
複製代碼

真正的開篇

六大布局容器

Cyan提供了6個佈局容器，幾乎能夠知足你全部的佈局需求，一塊兒來看一下

網格容器

相似於bootstrap的柵格系統，同時提供12或15兩種陣列方式。

盒容器

與網格容器惟一的區別是沒有間距。

網格容器和盒容器是因爲歷史緣由以及從此要在PC端實現實現響應式而保留下來的，在實際的移動端開發中並不經常使用，固然若是你習慣了使用柵格系統也徹底可使用。

比例容器

在任何寬度內建立任何比例的區域，一般用於製做頭像或商品列表，好比上面的案例，視窗寬度不固定，兩列之間的的間距甚至列數設計隨時有可能調整，使用的圖片不必定是正方形，還要保證圖片以某種比例（一般是一比一）進行展示，此時你會用到比例容器。

爲了方便你理解，咱們先用網格系統來建立列，後面會有更好的方式

<div class="container">
  <div class="row">
    <div class="span6 margint20"> 先不用關心這個margint20是幹什麼用的，雖然你能猜出來
      <div class="ratio-container">此處添加比例容器，內部節點默認會以1：1進行展現
        <img src=""/>
      </div>
    </div>
  </div>
</div>
複製代碼

輸出效果

你能夠看到在不管可視區寬度是多少，圖片均已固定比例展現，若是你須要其餘的比例尺寸，直接在後面標識出來就能夠了

<div class="ratio-container" ratio="2:3">
  這裏的節點會以2：3的比例展現
</div>
複製代碼

比例容器的做用不光如此，他還能夠實現很是多的效果，好比下面這樣，你能想到怎麼作嗎?咱們後面再說

圖片容器

直接將圖片放入比例容器會產生一個問題，就是若是使用的圖片不是對應比例的，會被拉伸變形，這必定不是你想要的，所以咱們須要圖片容器。只須要添加幾個額外的class他就能支持很是多的效果，能夠知足你的各類須要，

<div class="img-container">
  <img src=""/> 圖片默認顯示在容器居中的位置
</div>
<div class="img-container round">
  <img src=""/> 圖片將以圓形顯示
</div>
複製代碼

爲了方便你理解案例中使用了不一樣數字來標識位置，選項中藍色的字就是你能夠額外添加的class，並且能夠隨意組合，你能用到的全部圖片展現效果均可以組裝出來。

滾動容器

想建立一個如絲般順滑的滾動展現效果何必那麼麻煩，一個class搞定

<div class="scroll-container">默認是橫向滾動
  <img src=""/>
  <img src=""/>
  <img src=""/>
	...
</div>

<div class="scroll-container-y">若是是縱向的滾動就加個-y
  ...
</div>
複製代碼

效果

flex容器

我想你必定記不住CSS3中flex的具體用法，所以咱們對flex進行了細緻的封裝，造成了這個最爲強大的佈局容器，他的功能能夠說是喪心病狂，可是用法之簡單卻使人髮指。

<div class="flex-container">
  這裏填寫內部結構，橫向排列
</div>
<div class="flex-container-col">
  這裏填寫內部結構，縱向排列
</div>
複製代碼

WTF?這就完了，嗯，完了，你沒看錯，就是這麼簡單。下面來看看它都能完成那些操做

你能夠額外添加下面4種類別，一共10個輔助class，他能夠知足你的任何需求，若是直接添加到外層節點能夠對全部子節點統一控制，若是添加到子節點上，能夠額外的對子節點進行單獨的控制。

間隔類型選擇	順序翻轉	位置控制	子節點橫縱向填滿
round/between	reverse	top/left/right/bottom/center	vfull/hfull

我想這些API的封裝已經簡單到讓我懶得去解釋其做用了。媽媽不再用擔憂我記不住flex的用法了。

總結

容器類可以實現的佈局很是強大，並且使用起來很是簡單，全部的關鍵字class都是很是經常使用的，更重要的是他們還能夠隨意組合，來實現更加複雜的佈局，從你用上Cyan開始，你已是一個創造者，限制你的不是框架功能，而是你的想象力。

列表

容器類的功能已經足夠強大，可是仍有很大的改進空間。好比咱們要實現一個5列的導航，可使用下面三種方式。

方式一：網格容器或盒容器
<div class="container">
  <div class="row">
    <div class="col3 text-center" v-for="i in 5">
    	<img src="" alt=""><span>導航{{i}}</span>
    </div>
  </div>
</div>
方式二：flex容器
<div class="flex-container">
  <div class="flex1 text-center" v-for="i in 5">
  	<img src="" alt=""><span>導航{{i}}</span>
  </div>
</div>
方式三：滾動容器
<div class="scroll-container">
  <div v-for="i in 5" style="width:20%" class="text-center">
  	<img src="" alt=""><span>導航{{i}}</span>
  </div>
</div>
複製代碼

可是若是有兩排或者更多排呢？網格容器能夠無修改繼續使用，flex容器須要添加換行屬性，並設置每個的寬度，滾動容器已經不能使用了（除非放置兩個滾動容器）

<div class="flex-container">
  <div class="text-center wrap" v-for="i in 10" style="width:20%">
  	<img src="" alt=""><span>導航{{i}}</span>
  </div>
</div>
複製代碼

若是此時須要添加分割線呢？你固然能夠爲使用咱們的邊框類爲節點添加一個border的class，可是這會致使相鄰的邊框加粗。雖然經過添加咱們提供的輔助類徹底能夠處理這些問題，可是都顯得麻煩，所以咱們須要list類

基礎list

list類能夠隨意控制列數以及邊框的顯示，每一列所佔的寬度均相等，而且自動在每行的第一個進行浮動的清除，以保證即便在每一項高度不一樣的時候也能很好的展現。與此同時你能夠在將list和前面講過的佈局類容器隨意組合，在此基礎上沒有什麼佈局結構可以可貴住你了。

<div class="list list-col5 border">
  <div class="list-item padding20 text-center" v-for="i in 10">
    <img src="" alt=""><span>導航{{i}}</span>
  </div>
</div>
複製代碼

組件list

如今考慮下面幾種更復雜的狀況：

list的每一項寬度不一樣
每一項之間有間隔
邊框顏色不一樣意，甚至有的有，有的沒有
list須要分組，造成相似通信錄的頁面效果

前三種狀況經過list 和flex-container的組合能夠解決，可是須要多寫一層DIV，第四種狀況須要單獨開發雖然並不複雜。此時咱們能夠開始使用咱們的組件系統了。

<cmui-list :col='[2,7,5]' :space='20' border='#ab2c4f'>三列2：7：5展現，間距20，邊框顏色#ab2c4f
	<cmui-list-item>
    ...
  </cmui-list-item>
</cmui-list>
複製代碼

經過組件咱們能夠隨意設置每一列所佔的比例，邊框，間距，在item上咱們一樣能夠對這些屬性進行微調，若是邊框貼合，會自動合併，並且能夠無限嵌套，如此一來全部的行列結構就都能實現，一般這種結構會在廣告位的展現上使用，

動態輔助

佈局搞定了，但只是結構類似，想要完美匹配設計稿還須要微調，padding/margin /top/bottom/left/right這些值在不一樣的設計稿中變數很是大，好在移動端屏幕尺寸較小，只須要將全部可能的值提早在CSS中定義好就能夠了。padding12表示12像素響應式填充，paddingh12表示只有水平方向填充。