HTML5(H5)常用的十大前端框架(一)

HTML5(H5)常用的十大前端框架(一)

Foundation框架

Foundation是一個響應式前端框架系列,可以輕鬆設計漂亮的響應式網站,應用程序和電子郵件,在任何設備上看起來都很棒。Foundation是語義,可讀,靈活且完全可定製的。我們不斷添加新的資源和代碼片段,包括這些方便的HTML模板,以幫助您入門!

特點:世界上最先進的響應式前端框架。快速為適用於任何類型設備的站點創建原型和生產代碼。

總結:Foundation 算是框架界的元老啦,都說框架去的早,而這個框架一直到現在依然這麼的熱門,如果你比較介意 Bootstrap 開發撞臉的尷尬事情,那麼你可以考慮使用 Foundation 。即使你使用預定義的 UI 元素, 也不會與其他網站太像,就像官方說的給開發者更靈活的框架體驗。

Bootstrap框架

Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基於HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架

,使得 Web 開發更加快捷。 Bootstrap提供了優雅的HTML和CSS規範,它即是由動態CSS語言Less寫成。Bootstrap一經推出後頗受歡迎,一直是GitHub上的熱門開源項目,包括NASA的MSNBC(微軟全國廣播公司)的Breaking News都使用了該項目。 國內一些移動開發者較為熟悉的框架,如WeX5前端開源框架等,也是基於Bootstrap源碼進行性能優化而來。

包含內容:

基本結構:Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。

CSS:Bootstrap 自帶以下特性:全局的 CSS設置、定義基本的 HTML 元素樣式、可擴展的 class,以及一個先進的網格系統。

組件:Bootstrap 包含了十幾個可重用的組件,用於創建圖像、下拉菜單、導航、警告框、彈出框等等。

JavaScript 插件:Bootstrap包含了十幾個自定義的jQuery 插件。您可以直接包含所有的插件,也可以逐個包含這些插件。

定製:您可以定製Bootstrap的組件、LESS 變量和jQuery 插件來得到您自己的版本。

總結:Bootstrap 最大的優勢就是它非常流行,流行就代表你有問題就有很多人幫你解決問題,就代表裝逼它就是利器,還有就是界面比較和諧,容易上手,關注它的小夥伴應該發現最新 V4 版也開始支持 FlexBox 佈局,這是非常好的升級體驗。 劣勢是 class 命名不夠語義化,並且各種縮寫,以至於我離了文檔就是個菜,最近開始整混合 APP,選框架的時候首選就是它,但之前搞 PC 一直沒注意,後來搞混合右鍵屬性看它的時候,瞬間一陣涼風襲來,Bootstrap 好小,小到我只好選擇別的框架。

AUI框架

AUI為一款輕量級前端UI框架,更偏重於CSS佈局及樣式的構造,通俗易懂的寫法及模塊式的拼裝方便用戶自由擴展。輕小的體積、靈活的擴展性,大大提高移動端項目的體驗度和開發效率。

在目前市場上的UI框架中,大多數的框架以JS來實現過多的功能和佈局。當然並不是否定JS在一個移動前端框架中的作用性,既然是前端框架側重點要更多的考慮框架本身在一個項目中的資源消耗問題及如何提高用戶的體驗度。鑑於APICloud多窗口結構及原生模塊的拼裝,所以在移動端項目中AUI強調更多的是快速佈局、靈活佈局的實現,結合APICloud本身特性,提高開發效率及用戶體驗。

最近剛起來的AUI,雖然作者聲稱是專為APICloud開發者設計的一套UI框架,但實際它還是解決了很多移動前端開發的普遍問題,是主要面向混合開發的 CSS 框架。看起來作者比較猖狂,各種高級 CSS3 遍地使用,這讓我也不得不去查查這些個 CSS3 的兼容性。不負眾望果然選的都是兼容不錯的屬性

,哈哈了一頓激動從前輩手上大膽認識了幾個好東西,並且框架還提供了聊天界面、計數列表等組件,解決了很多複雜的讓我罵孃的佈局,現在可以直接拿走就用。

總結:這個框架對我來說有個優點就是純 CSS 框架,自己以前也就用過 Pure,自己有點 JS 能力,如果不是複雜的效果,找個純 CSS 框架自己隨便改改就可以,而現在 CSS3 也已經能夠做到動畫,效率、質量、高效全兼顧,所以還是選擇了這種 CSS 框架。有一點覺得不滿的是這框架的文檔真的好那什麼,說好的高大上呢。

Amaze UI 框架

第二個介紹的是AmazeUI,據官方說是咱們中國首個HTML5跨屏前端框架。

最初使用它是因為本尊遇到了一個愛糾結細節設計,有一次她跟我的字體較上真了,結果一句頂萬句的 BOOS 誇了她,我只好根據她的想法去解決,結果最後找到了Amaze UI 框架,按照官方的話說就是 "基於社區開源項目構建的一個跨屏前端框架,以移動優先

從小屏到大屏,最終實現所有屏幕適配適應移動互聯潮流" 。但其實我就是看中它能解決國內瀏覽器存在的跨屏適配和兼容性問題。

總結:Amaze UI 總的來說就是加入更多符合中國市場特性的元素,框架對跨屏、適配都做了的比較好的處理並且準備一了一系列的常用的網頁組件,為減少搞兼容、適配各種敲鍵盤的加班狗們的工作時間做了不小的貢獻。框架還對中文排版優化,兼容中國本土主流瀏覽器、輕量化,不僅適用於桌面端,還更更適合移動端、包含一些封裝好的Widgets。不過自也就我感覺 Amaze UI 文檔是否有點太那什麼了,比如 “人們不會在乎jQuery的那點流量。”,說實的在這真沒啥,不過我從來不會說出來( 哈哈 ),代碼和設計上感覺沒太多突出的點。

Pure框架

一組小的,響應迅速的CSS模塊,您可以在每個Web項目中使用它們。

特點:

CSS佔用空間極小。

純淨是微不足道的。整套模塊的時鐘頻率為3.8KB *縮小和壓縮。在考慮移動設備的情況下,對我們來說保持文件大小很小很重要,並且仔細考慮了每一行CSS。如果您決定僅使用這些模塊的子集,則可以節省更多字節。

你的CSS基礎

Pure構建於Normalize.css之上,為原生HTML元素以及最常見的UI組件提供佈局和樣式。這就是你所需要的,沒有任何瑕疵。

以移動為主題

Pure是開箱即用的響應,因此所有屏幕尺寸的元素都很棒。

堅持你的方式

Pure具有最小的樣式,並鼓勵您在其上編寫應用程序樣式。它旨在讓您不受約束,並輕鬆覆蓋樣式。

創建響應式佈局

通過使用Grids,Menus等,可以輕鬆地為所有屏幕尺寸創建漂亮的響應式佈局。我們讓您輕鬆上手。看看幾個不同的佈局,並用堅如磐石的基礎開始您的下一個Web項目。

這個框架是我在做管理系統時接觸的,選擇使用也是因為框架小巧,並且是純 CSS,沒有太多的牽扯,好用來與其他框架快速結合使用。

HTML5(H5)常用的十大前端框架(一)


分享到:


相關文章: