適用響應式 Web UI 框架


1. Bootstrap

Bootstrap是快速開發Web應用程序的前端工具包。它是一個CSS和HTML的集合,它使用了最新的瀏覽器技術,給你的Web開發提供了時尚的版式,表單,buttons,表格,網格系統等等。
官方網站: http://twitter.github.com/bootstrap/
github: https://github.com/twitter/bootstrap

2. Foundation

Foundation 是一個易用、強大並且靈活的框架,用於構建基於任何設備上的 Web 應用。提供多種 Web 上的 UI 組件,如表單、按鈕、Tabs 等等。
官方網站: http://foundation.zurb.com/
github: https://github.com/zurb/foundation

3. Skeleton

Skeleton 是一個小的 JS 和 CSS 文件的集合,可幫你快速開發漂亮的網站,適合各類屏幕設備包括手機。Skeleton 基於 960 grid 開發。它是一個 UI 框架。
官方網站: http://www.getskeleton.com/
github: https://github.com/dhgamache/Skeleton

4. Less Framework

Less框架是一個用於設計自適應網站的CSS網格系統,它包含4個佈局和3套預設佈局,這些都以一個單一網格爲基礎。Less框架的目標是更高效地建立多佈局網站,並在佈局之間保持一致。
官方網站: http://lessframework.com/
github: https://github.com/jonikorpi/Less-Framework

5. ResponsiveAeon

ResponsiveAeon 是一個HTML5/CSS3的框架,能夠很是快速的建立響應的佈局。它有一個網格系統是基於總1104px寬度12列,提供了3個很是容易理解的基本類供 使用。該框架使使用@mediaqueries的,支持任何尺寸的設備。除了網格系統,也有排版,列表,表格,按鈕和表格的樣式。
官方網站: http://www.newaeonweb.com.br/responsiveaeon/
github: https://github.com/newaeonweb/ResponsiveAeon-Cssgrid

6. Gumby

Gumby 是一個響應式的以及 960 像素寬度的 CSS 網格框架,支持 PC、平板和手機屏幕顯示。相似 Twitter 的 Bootstrap,它包括一個Web UI工具包,有好看按鈕,表格,導航+標籤和一個很小的JavaScript文件。
官方網站: http://www.gumbyframework.com/
github: https://github.com/dsurgeons/Gumby

7. Gridpak

Gridpak 的目的是實現了響應式的 Web 頁面設計,提升工做流程,節省了時間。經過生成PNG圖像,CSS和JavaScript,讓 Gridpak 建立響應式的簡單界面。Gridpak 產生的CSS 兼容 IE 8+,但它使用不少實驗性的CSS屬性,如媒體查詢,盒大小和背景剪輯屬性,因此建議結合 Modernizer 來使用,確保向後兼容性。
官方網站: http://gridpak.com/

8. Responsive GS

Responsive GS 是一個流體網格 CSS 框架,用於快速開發響應式的 Web 網站。 Responsive GS 提供三種風格:十二、16 和 24 列,使用 media queries 支持全部標準設備。
官方網站: http://responsive.gs/
github: https://github.com/StudioSnapsize/responsive-gs

9. Amazium

Amazium 是一個基於 960 Grid System 的響應式 CSS 框架,使用 960px 寬度,以適應大多數 1024*768 分辨率的屏幕。Amazium 使用 4 個主要的 media queries 來調整所適應的分辨率大小。
官方網站: http://www.amazium.co.uk/

10. Golden Grid System

Golden grid system是爲加強網頁兼容性設計的摺疊式grid。具備四個特徵:列、跨頁、底線、script。
官方網站: http://goldengridsystem.com/
github: https://github.com/jonikorpi/Golden-Grid-System

11. Centurion

Centurion 是一個基於 SASS 和 CSS3 構建的響應式 Web 框架。
官方網站: http://jhough10.github.com/Centurion/
github: https://github.com/jhough10/Centurion

12.inuit.css

該框架用於使用較少的代碼實如今較小屏幕(平板電腦、手機)上運行的項目,支持IE6+。
官方網站: http://inuitcss.com/
github: https://github.com/csswizardry/inuit.css

13. Fluid Baseline Grid

Fluid Baseline網格系統是一個HTML5 & CSS3開發工具包,爲網站快速設計提供了堅實的基礎。
官方網站: http://fluidbaselinegrid.com/
github: https://github.com/thedayhascome/Fluid-Baseline-Grid

14. HTML5 Boilerplate

HTML5 Boilerplate基於HTML/CSS/JS模板,能夠幫助開發者使用HTML5技術快速開發穩健、功能齊全的網站。你能夠把它看成本身的新項目模板,在此基礎上創建本身的項目。
該模板包含了幫助開發HTML5站點和應用程序的組件和一些優秀的最佳實踐,只需開發者最少的前期工做,就能爲項目提供一個很是穩固的基礎。另外,該模板是高度可定製,可輕鬆刪除不須要的一些特性。
官方網站: http://html5boilerplate.com/
github: https://github.com/h5bp/html5-boilerplate

15.Semantic

Semantic UI是徹底語義化的前端界面開發框架,支持 Sass 和 LESS 動態樣式語言,文檔和演示很是完善,易於學習和使用,配備網格佈局,有一些很是實用的附加配置,例如inverted類。
有一個很是好的按鈕實現,情態動詞,和進度條。在許多功能上使用圖標字體。
官方網站: http://semantic-ui.com/
github: https://github.com/semantic-org/semantic-ui/

16.Zui

ZUI繼承了Bootstrap 3中的大部分基礎內容做了相應的改進,簡單美觀,易於使用,快速構建簡潔大方的現代web應用。
採用HTML5且支持全部流行的移動及桌面瀏覽器平臺,一些舊的瀏覽器也可以降級支持,輕快獨立穩定,最佳的可用性能,最大限度的不依賴於外部組件,全平臺響應,一次編寫,響應任何尺寸的設備。
官方網站: http://www.zui.sexy/

17.Amaze

Amaze UI 是一個輕量級、採用mobile first理念的前端框架,中國首個開源 HTML5 跨屏前端框架,適配全部屏幕,可快速構建界面出色、體驗優秀的跨屏頁面,可提高開發效率,對於經常使用瀏覽器及App內置瀏覽器提供更好的兼容性支持,使用 CSS3 來作動畫交互,平滑、高效,更適合移動設備。
官方網站: http://amazeui.org/
github: http://git.oschina.net/amazeui/amazeuicss

 

18.MUI

MUI(Mobile User Interface)是一套基於Html5的,遵循Html5+規範的,用於手機端界面開發的一套框架,是目前最高性能和最接近原生體驗的手機端框架,體積小不到100k,可直接使用class編寫,性能遠高於data-方式,又經過代碼塊的編寫方式下降了編碼的複雜度。
例如在HBuilder裏敲m,會拉出一排控件mList、mButton等,選一個回車,就會自動產生div和class。

19.OniUI

OniUI是基於avalon的UI庫,是一個MVVM架構的前端框架,兼容主流瀏覽器。
官方網站: http://ued.qunar.com/oniui/home.htm
github: https://github.com/RubyLouvre/avalon.oniui

20.Vanilla JS

Vanilla JS 是一個快速、輕量級、跨平臺的JavaScript框架,也是瀏覽器內置框架。
官方網站: http://vanilla-js.com/

21.Zepto

Zepto是專門爲移動 WebKit 瀏覽器,如 Chrome 和 Safari 打造的。憑藉其獨特的簡約發展的特色,它能夠幫助開發人員輕鬆地完成他們的工做。Zepto 最大的特色是保持事情的簡單性。這個框架的目標是精確的,便於下載和快速執行。  
官方網站: http://zeptojs.com/

22.Framework7

Framework7 是免費開源的 HTML 移動端框架,用來開發混合移動端應用或者 iOS 7 的 Web 應用,而且帶有 iOS 7 的原生外觀和感受。Framework7 也是獨立的原型應用工具。
官方網站: http://www.idangero.us/framework7/
github: https://github.com/nolimits4web/framework7/


25.Ionic

Ionic是一個前端的框架,幫助開發者使用HTML5, CSS3和JavaScript作出原生應用。js部分是基於AngularJS框架,大量使用了Css3,css生成基於Sass,構建工具基於最新的gulp,版本升級基於bower,原生層無縫封裝了cordova。使用Ionic框架,能夠有效利用AngularJs的特性,極大的提供HTML5應用開發效率,質量,模塊化程度。
官方網站:http://ionicframework.com/
github:https://github.com/driftyco/ionichtml

相關文章
相關標籤/搜索