最近需要一些前端框架,于是在網(wǎng)上整理了一些感覺不錯(cuò)的前端框架,有pc端和移動端,為了方便日后自己先記錄下來了. Bootstrap 首先說 Bootstrap，估計(jì)你也猜到會先說或者一定會有這個(gè)( 呵呵了 )，這是說明它的強(qiáng)大之處，擁有框架...
最近需要一些前端框架,于是在網(wǎng)上整理了一些感覺不錯(cuò)的前端框架,有pc端和移動端,為了方便日后自己先記錄下來了...
Bootstrap
首先說 Bootstrap，估計(jì)你也猜到會先說或者一定會有這個(gè)( 呵呵了 )，這是說明它的強(qiáng)大之處，擁有框架一壁江山的勢氣。自己剛?cè)氲赖臅r(shí)候本著代碼任何一個(gè)字母都得自己敲出來擋我者廢的決心，來讓自己成長。結(jié)果受到周圍各種基友的引誘開始了 Bootstrap 旅程。本人雖然是個(gè)設(shè)計(jì)+前端的萬里有一的人才，但是老天只讓我會用 PS 和各種設(shè)計(jì)工具卻不給我跟設(shè)計(jì)妹子一樣的審美，所以這也是我最初選擇 Bootstrap 的原因之一，它讓我做出來的東西好歹能在妹子面前裝個(gè)逼，不過時(shí)間長了難免覺得 Bootstrap 美的讓人煩躁， 但好在它的每個(gè)版本都會有很大的改變，不會讓人覺得自己做的網(wǎng)站會跟很多網(wǎng)站撞臉。Bootstrap 的用法及其簡單( 這也可能就是 Bootstrap 作者閱攻城士無數(shù)，了解他們痛的結(jié)果 )，以至于是個(gè)小前端都可以快速上手，幾乎沒什么學(xué)習(xí)成本。
官網(wǎng)：http://getbootstrap.com/
Github：https://github.com/twbs/bootstrap/
作者：Mark Otto 和Jacob Thornton Star：93,112
總結(jié)：Bootstrap 最大的優(yōu)勢就是它非常流行，流行就代表你有問題就有很多人幫你解決問題，就代表裝逼它就是利器，還有就是界面比較和諧，容易上手，關(guān)注它的童鞋應(yīng)該發(fā)現(xiàn)最新 V4 版也開始支持 FlexBox 布局，這是非常好的升級體驗(yàn)。 劣勢是 class 命名不夠語義化，并且各種縮寫，以至于我離了文檔就是個(gè)菜，最近開始整混合 APP，選框架的時(shí)候首選就是它，但之前搞 PC 一直沒注意，后來搞混合右鍵屬性看它的時(shí)候，瞬間一陣涼風(fēng)襲來，Bootstrap 好小，小到我只好選擇別的框架。
AUI
第三個(gè)是最近剛起來的AUI，雖然作者聲稱是專為APICloud開發(fā)者設(shè)計(jì)的一套UI框架，但實(shí)際它還是解決了很多移動前端開發(fā)的普遍問題，是主要面向混合開發(fā)的 CSS 框架。看起來作者比較猖狂，各種高級 CSS3 遍地使用，這讓我也不得不去查查這些個(gè) CSS3 的兼容性。不負(fù)眾望果然選的都是兼容不錯(cuò)的屬性，哈哈了一頓激動從前輩手上大膽認(rèn)識了幾個(gè)好東西，并且框架還提供了聊天界面、計(jì)數(shù)列表等組件，解決了很多復(fù)雜的讓我罵娘的布局，現(xiàn)在可以直接拿走就用。
Github：https://github.com/liulangnan/aui
官網(wǎng)：http://www.auicss.com/
作者：流浪男 Star：92
總結(jié)：這個(gè)框架對我來說有個(gè)優(yōu)點(diǎn)就是純 CSS 框架，自己以前也就用過 Pure，自己有點(diǎn) JS 能力，如果不是復(fù)雜的效果，找個(gè)純 CSS 框架自己隨便改改就可以，而現(xiàn)在 CSS3 也已經(jīng)能夠做到動畫，效率、質(zhì)量、高效全兼顧，所以還是選擇了這種 CSS 框架。有一點(diǎn)覺得不滿的是這框架的文檔真的好那什么，說好的高大上呢。
Amaze UI
第二個(gè)介紹的是妹子UI，最初使用它是因?yàn)楸咀鹩龅搅艘粋€(gè)愛糾結(jié)細(xì)節(jié)設(shè)計(jì)士，有一次她跟我的字體較上真了，結(jié)果一句頂萬句的 BOOS 夸了她，我只好根據(jù)她的想法去解決，結(jié)果最后找到了Amaze UI 框架( 我不介意你叫我懶淫 )，按照官方的話說就是 "基于社區(qū)開源項(xiàng)目構(gòu)建的一個(gè)跨屏前端框架，以移動優(yōu)先，從小屏到大屏，最終實(shí)現(xiàn)所有屏幕適配，適應(yīng)移動互聯(lián)潮流" 。但其實(shí)我就是看中它能解決國內(nèi)瀏覽器存在的跨屏適配和兼容性問題。
官網(wǎng)：http://amazeui.org/
Github：https://github.com/amazeui/amazeui
所屬公司：云適配 Star：6710
總結(jié)：Amaze UI 總的來說就是加入更多符合中國市場特性的元素，框架對跨屏、適配都做了的比較好的處理并且準(zhǔn)備一了一系列的常用的網(wǎng)頁組件，為減少搞兼容、適配各種敲鍵盤的加班狗們的工作時(shí)間做了不小的貢獻(xiàn)。，框架還對中文排版優(yōu)化，兼容中國本土主流瀏覽器、輕量化，不僅適用于桌面端，還更更適合移動端、包含一些封裝好的Widgets。不過自也就我感覺 Amaze UI 文檔是否有點(diǎn)太那什么了，比如 “人們不會在乎jQuery的那點(diǎn)流量?！?，說實(shí)的在這真沒啥，不過我從來不會說出來( 哈哈 )，代碼和設(shè)計(jì)上感覺沒太多突出的點(diǎn)。
Frozen UI
有段時(shí)間看到 QQ 瞬間高大上了，后來四處打聽，原來 QQ 客服端也用了 混合開發(fā)，其中QQ會員前端用的是 Frozen UI，并且這套框架開源，欣喜若狂耐不住心里的寂寞直接上手試了一遍，初體驗(yàn)感覺基礎(chǔ)樣式效果簡單色調(diào)清爽，有個(gè)比較活躍的社區(qū)所以組件什么的也比較豐富。
Github：https://github.com/frozenui/frozenui
官網(wǎng)：http://frozenui.github.io/
作者： QQVIP FD Team Star：1,067
總結(jié)：如果拿 Frozen UI 配合一些如 APICloud 用來做混合 APP 感覺就太酷了，或者原生的火雞們拿去嵌套在應(yīng)用中做前端開發(fā)，這個(gè)框架對 android 2.3 +、ios 4.0 + 做了兼容，或者拿來做 Web App 也是極好的選擇，劣勢的話從 UI 層面就可以看到了，誰讓它是出生在QQ會員前端的呢。
Frozen UI
第三個(gè)是Frozen UI，有段時(shí)間看到 QQ 瞬間高大上了，后來四處打聽，原來 QQ 客服端也用了 HTML 混合開發(fā)，其中QQ會員前端就是用的 Frozen UI，并且這套框架開源，欣喜若狂耐不住心里的寂寞直接上手三下五除二試了一遍就開始試用，初體驗(yàn)的就是基礎(chǔ)樣式效果簡單色調(diào)清爽，有個(gè)比較活躍的社區(qū)所以組件什么的也比較豐富。
Github：https://github.com/frozenui/frozenui
官網(wǎng)：http://frozenui.github.io/
作者： QQVIP FD Team Star：1,067
總結(jié)：如果拿 Frozen UI 配合一些如 APICloud 用來做混合 APP 感覺就太酷了，或者原生的火雞們拿去嵌套在應(yīng)用中做前端開發(fā)，并且這個(gè)框架對 android 2.3 +、ios 4.0 + 做了兼容，或者拿來做 Web app 也是極好的選擇，不過要是放在微信里比這更合適的 WeUI 框架更是首選了，劣勢的話從 UI 層面就可以看到了，誰讓它是出生在QQ會員前端的呢。
WeUIi
第四個(gè)是WeUI和同 FrozenUI都屬于 差不多的 WeUi了，也是一個(gè)比較專一的框架，WeUI應(yīng)該說比FrozenUI前者更專一，話說連個(gè)官網(wǎng)都不搞，所有答疑都在 gitHub Issues 解決了，這個(gè)框架極其簡單，體積當(dāng)然就不用說了，模塊也就 7 個(gè)左右，不過體量雖然小做的卻不錯(cuò)，口碑看 star 就夠了，框架從 16/1/23 發(fā)版至今 github star 超過 7K,不過也不排除用戶沒地方發(fā)泄所以都跑到 git 上來，哈哈。
Github：https://github.com/weui/weui
DEMO：http://weui.github.io/weui/
Star：7,129
總結(jié)：看完微信設(shè)計(jì)團(tuán)隊(duì)設(shè)計(jì)的這套 DEMO，二話不說如果要做微信公眾，這個(gè)二話不說必然是首選了?？蚣懿缓玫牡胤胶喍灾褪强蚣鼙旧響?yīng)該就沒考慮過讓用戶用到非微信的場景之下。
SUI
“SUI 是一套基于bootstrap開發(fā)的前端組件庫，同時(shí)它她也是一套設(shè)計(jì)規(guī)范。通過SUI，可以非常方便的設(shè)計(jì)和實(shí)現(xiàn)精美的頁面”。 果然還是直接引用官方給的枯燥無味廣告要節(jié)省自己的腦細(xì)胞( 囧… )，當(dāng)然了就像廣告說的，如果你之前用過 Bootstrap， 那么可以輕松轉(zhuǎn)向 SUI，這可能就是淘寶給前端屌絲們的福利了。。
Github：https://github.com/sdc-alibaba/sui
官網(wǎng)：http://sui.taobao.org/sui/docs/index.html
Star：120
AUI
第六個(gè)是最近剛起來的最近剛起來的 AUI，雖然作者聲稱是專為APICloud開發(fā)者設(shè)計(jì)的一套UI框架，但實(shí)際它還是解決了很多移動前端開發(fā)的普遍問題，是它主要面向混合開發(fā)的 CSS 框架。，所以看起來作者比較猖狂，各種高級 CSS3 遍地使用，這也使得我不得不去查查這些個(gè) CSS3 的兼容性。不負(fù)眾望果然選的都是兼容不錯(cuò)的屬性，哈哈了一頓激動從前輩手上大膽認(rèn)識了幾個(gè)好東西，并且框架還提供了聊天界面、計(jì)數(shù)列表等組件，解決了很多復(fù)雜的讓我罵娘的布局，現(xiàn)在可以直接拿走就用。
Github：https://github.com/liulangnan/aui
官網(wǎng)：http://www.auicss.com/
作者：流浪男 Star：92
總結(jié)：這個(gè)框架對我來說有個(gè)優(yōu)點(diǎn)就是純 CSS 框架，自己以前也就用過 Pure，自己有點(diǎn) js 能力，如果不是復(fù)雜的效果自己找個(gè)純 CSS 框架自己隨便改改就能達(dá)到效果，而現(xiàn)在 CSS3 也已經(jīng)能夠做到各種動畫，效率、質(zhì)量、高效各種一頓考慮所以還是選擇了這種 CSS 框架。而一直覺得不滿的是這框架的文檔真的好那什么，說好的高大上呢。
MUI
曾經(jīng)一直使用 Android 系統(tǒng)的我，后來見到 IOS，果斷移情別戀了，不知道為什么蘋果每次調(diào)整系統(tǒng)我都特別喜歡，后來一段時(shí)間因?yàn)槿痹O(shè)計(jì)我專門模仿 IOS 系統(tǒng)做 UI，但始終不能夠做到很好，無意間就發(fā)現(xiàn)了 MUI 這個(gè)框架，這個(gè)框架給我的吸引之處就是它的 UI 是以 IOS 為主體設(shè)計(jì)的，當(dāng)然它也補(bǔ)充了android特有UI樣式。并且MUI官方聲稱用來開發(fā)深入以后發(fā)現(xiàn)拿它做 APP 還能夠提高用戶使用流暢度，然后便試著更深入的了解和使用一段時(shí)間。
官網(wǎng)：http://dev.dcloud.net.cn/mui/
Github：https://github.com/dcloudio/mui
Star：2,450
總結(jié)：就像之前說的這個(gè)框架是以兩大系統(tǒng)為參照來封裝UI組件，框架自身還有一個(gè)較為活躍的社區(qū)，不太好的地方這也是我特別關(guān)注的一點(diǎn)，關(guān)于開發(fā)應(yīng)用的流暢度，我當(dāng)然知道這是 H5 目前的劣勢，但是看到官網(wǎng)給的描述，還是抱著期待的心理試試看能否提升，然而它其實(shí)還是需要是借助 Webview來提升，而不是框架本身。
Semantic UI
倒數(shù)第三個(gè)是 Semantic UI，接觸這個(gè)框架還是因?yàn)?Bootstrap，Semantic UI 剛上線 github 就受到大量開發(fā)者的關(guān)注，以至于很多人拿它倆對比各種挑刺各種夸，是好是壞不能單憑別人三句四句就抬起手指開始贊，用了以后感覺 UI 上跟 Bootstrap 沒太多的區(qū)別，不過代碼命名規(guī)范上卻相差甚大，本人認(rèn)為 Semantic UI 是不是就想做的不一樣，它的命名全是采用復(fù)合的方式，類名特別的離散，用的時(shí)候你得很小心自己擴(kuò)展或者新增的 class 命名與它的類名沖突。
官網(wǎng)：http://www.semantic-ui.cn/
Github：https://github.com/semantic-org/semantic-ui/
Foundation
Foundation 算是框架界的元老啦，都說框架去的早，而這個(gè)框架一直到現(xiàn)在依然這么的熱門，如果你比較介意 Bootstrap 開發(fā)撞臉的尷尬事情，那么你可以考慮使用 Foundation 。即使你使用預(yù)定義的 UI 元素, 也不會與其他網(wǎng)站太像，就像官方說的給開發(fā)者更靈活的框架體驗(yàn)。
官網(wǎng)：http://foundation.zurb.com/
Github：https://github.com/zurb/foundation-sites
Star：22,736
UiKit
UIkit是YOOtheme團(tuán)隊(duì)開發(fā)的，在許多WordPress主題中都有應(yīng)用(也就是如果你是個(gè) WordPress 愛好者，那么這個(gè)框架應(yīng)該比較適合深究)，并且框架能夠通過GUI編輯器和手動編輯，所以它提供了一個(gè)靈活、強(qiáng)大的自定義機(jī)制?？蚣芙柚鶯ESS、jQuery、normalize.css及FontAwesome開源項(xiàng)目的獨(dú)有特點(diǎn)，整合成了這么一款輕量級、模塊化的前端框架。
官網(wǎng)：http://www.getuikit.com/
Github：https://github.com/uikit/uikit
作者：YOOtheme Star：6,372
Pure
終于最后一個(gè)了，我和你一樣好開森 (～￣▽￣)～)，這個(gè)框架是我在做管理系統(tǒng)時(shí)接觸的，選擇使用也是因?yàn)榭蚣苄∏桑⑶沂羌?CSS，沒有太多的牽扯，好用來與其他框架快速結(jié)合使用。
官網(wǎng)：http://purecss.io/
Github：https://github.com/yahoo/pure/
介紹完畢，估計(jì)你應(yīng)該看出來了，我使用框架真的也就是遇到了需求，才選擇了某個(gè)框架，所以框架之間并沒有什么好與特好之分，只能說你的需求是什么，這個(gè)框架合適不合適你去用，各種框架用起來也都大致差不多，會用一個(gè)其他的上手也就都變得簡單容易上手，我覺得能寫框架的人都是室外高仁。
蕪湖市聰明屋智能科技有限公司（原中江網(wǎng)絡(luò)），成立于2005年，經(jīng)過10多年定制開發(fā)經(jīng)驗(yàn)，積累了大量技術(shù)儲備和定制開發(fā)經(jīng)驗(yàn)，率先創(chuàng)建安徽省內(nèi)自主研發(fā)的云計(jì)算平臺，具有大數(shù)據(jù)、高并發(fā)等高強(qiáng)度計(jì)算能力，為眾多政府、學(xué)校、公安部門、中小企業(yè)解決數(shù)據(jù)計(jì)算與管理難題。2013年公司內(nèi)部專門創(chuàng)建電商服務(wù)部，為企業(yè)提供全方位電商解決方案與配套服務(wù)。多次獲得國家、省市級領(lǐng)導(dǎo)接見，被國內(nèi)近20家電視臺、報(bào)紙媒體爭相報(bào)道。至今，聰明屋智能科技服務(wù)過上市公司、大型國企、各類私企超800家，為多家公司提供各類政務(wù)系統(tǒng)、app開發(fā)定制、微信小程序開發(fā)定制、智能家居、電商系統(tǒng)、連鎖收銀等技術(shù)解決方案服務(wù)。同時(shí)，聰明屋智能科技在智能硬件方面、區(qū)塊鏈應(yīng)用方面持續(xù)投入關(guān)注及創(chuàng)新。
