1. 程式人生 > >推薦幾個精緻的web UI框架

推薦幾個精緻的web UI框架

轉自 : http://blog.csdn.net/sndamhming/article/details/61200799

1.Aliceui

Aliceui是支付寶的樣式解決方案,是一套精選的基於 spm 生態圈的樣式模組集合,是 Arale 的子集,也是一套模組化的樣式命名和組織規範,是寫 CSS 的更好方式。

2.Amazeui

Amaze UI 是一個輕量級、 Mobile first 的前端框架, 基於開源社群流行前端框架編寫的。

3.sui

SUI是一套基於bootstrap開發的前端元件庫,同時她也是一套設計規範。 
通過SUI,可以非常方便的設計和實現精美的頁面。

同時sui還有移動端版本msui,msui是阿里巴巴共享業務事業部UED團隊的作品。目的是為了手機H5頁面提供一個常用的元件庫,減少重複工作。

4.FrozeUI

Frozen UI是一個開源的簡單易用,輕量快捷的移動端UI框架。基於手Q樣式規範,選取最常用的元件,做成手Q公用離線包減少請求,升級方式友好,文件完善,目前全面應用在騰訊手Q增值業務中。

5.uiKit

uiKit是一款輕量級、模組化的前端框架,可快速構建強大的web前端介面。

6.H-ui

H-ui是輕量級前端框架,簡單免費,相容性好,適用於中國網站。

7.Weui

weUI 是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信 Web 開發量身設計,可以令使用者的使用感知更加統一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

8.layui

Layui 誕生於2016年金秋,是一款帶著濃烈情懷的國產前端UI框架,她追求極簡,又不失豐盈的內在,說她是史上最輕量的結晶,似乎並不為過。一切都源自於她對原生態的執著,對前端社群的那些噪雜聲音的過濾,以及她本身的精心雕琢。

9.YDUI Touch

YDUI Touch 專為移動端打造,在技術實現、互動設計上相容主流移動裝置,保證程式碼輕、效能高;使用 Flex 技術,靈活自如地對齊、收縮、擴充套件元素,輕鬆搞定移動頁面佈局;實現強大的螢幕適配佈局,等比例適配所有螢幕。什麼?用得不開心?輕鬆切換 px;自定義JavaScript元件、Less檔案、Less變數,定製一份屬於自己的YDUI;

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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 提供三種風格:12、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. The 1140 CSS Grid

1140網格可以完美適應1280解析度顯示器。在較小的顯示器上,它可以根據瀏覽器的寬度變成流體形式,並自適應瀏覽視窗。
官方網站: http://cssgrid.NET/
github: https://github.com/andytlr/cssgrid/





13. Frameless Grid

Frameless和Golden Grid System類似,是通過逐列(column by column)形式來自適應頁面佈局,而不是通過逐畫素(pixel by pixel)形式。Frameless不是一個框架,因為它不包含任何程式碼,它只是一個特定型別的自適應網格的想法,你可以將它作為設計工作的一個很好的出發點。
官方網站: http://framelessgrid.com/
github: https://github.com/jonikorpi/Frameless





14. inuit.css

該框架用於使用較少的程式碼實現在較小螢幕(平板電腦、手機)上執行的專案,支援IE6+。
官方網站: http://inuitcss.com/
github: https://github.com/csswizardry/inuit.css





15. Fluid Baseline Grid

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





16. HTML5 Boilerplate

Html5 Boilerplate基於HTML/CSS/JS模板,可以幫助開發者使用HTML5技術快速開發穩健、功能齊全的網站。你可以把它當作自己的新專案模板,在此基礎上建立自己的專案。
該模板包含了幫助開發HTML5站點和應用程式的元件和一些優秀的最佳實踐,只需開發者最少的前期工作,就能為專案提供一個非常穩固的基礎。另外,該模板是高度可定製,可輕鬆刪除不需要的一些特性。
官方網站: http://html5boilerplate.com/
github: https://github.com/h5bp/html5-boilerplate





17. 320 and Up

320 and Up使用一個小型螢幕樣式表,以防止移動裝置載入桌面資源。其中樣式表中包含了一些顏色、排版佈局等設定屬性。
官方網站: http://stuffandnonsense.co.uk/projects/320andup/
github: https://github.com/malarkey/320andup/

以上就是17款常用的的響應式web UI框架,排名不分先後,適合自己的才是最

推薦網址:http://www.cssmoban.com/cssthemes/6700.shtml