茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1484863 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
F09_300.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

網頁設計 : [轉貼]14個最佳的HTML/CSS設計和開發框架

發表者 討論內容
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]14個最佳的HTML/CSS設計和開發框架

14個最佳的HTML/CSS設計和開發框架

2015-01-29    分類: WEB開發編程開發首頁精華

本文由 碼農網原創翻譯,轉載請看清文末的轉載要求,謝謝合作!

專業的網頁設計是既複雜又耗時的。它需要HTML和CSS框架的完美結合。這些框架不僅可以為設計方案增加特定的功能,還可以大大地節省時間和精力。

高效的框架不僅是網站設計的基礎,它提供的各種豐富多彩的功能,還提高整體的功能和性能。一個網站的外觀和設計完全可以通過一些完美和可靠的工具而徹底改頭換面。現在,越來越多的網頁設計師和編輯人員選擇使用CSS框架來創建網站。

所以,如果你正在尋找一些高效的HTML和CSS框架,那麼不妨繼續看下去——眾裡尋他千百度,驀然回首,那人卻在燈火闌珊處。

1)CSS框架——Gumby

Gumby是最好的框架之一,配備了各種有用的和有效的功能。它預置的設計和通用的界面元素,有助於我們創建完美的網站。Gumby框架還允許根據要求定制網格。

gumby

官方網站:http://gumbyframework.com/

2)CSS框架—— Semantic UI框架

Semantic UI也是一個非常有用的網頁設計框架。通過允許用戶創建界面共享語言來授權給設計師。各種功能和3D動畫也是不可小覷的功能。相比於其他框架,它更容易使用。

semantic-ui-framework

官方網站:http://semantic-ui.com/

3)CSS框架——YAML框架


下面要說的是YAML。這是一個設計靈活,方便和響應網站的理想工具。它提供了一系列有效的功能。同時,它還帶有Ajax Builder,可以保證基於YAML的CSS佈局的可視化開發。

yaml

官方網站:http://www.yaml.de/

4)CSS框架——blueprint

在網頁設計項目中,blueprint框架也是一個不錯的助手。它提供了一個堅實的基礎,可以用來為你的項目打造漂亮的表單、樣式表和易於使用的網格和排版。這是用來打造複雜的網頁設計最好的框架之一。

blueprint

官方網站:http://www.blueprintcss.org/

5)CSS框架——Toast

Toast是一種可靠的CSS框架,可以使得佈局更簡單,並允許用戶輕鬆地添加填充物和邊框。這是互聯網上最好最簡單的網頁設計框架之一。

toast

官方網站:http://daneden.github.io/Toast//

6)HTML和CSS框架——
Bootstrap

Bootstrap是現在網上最流行的HTML、CSS和JS框架。這工具非常有用,被大量的網頁設計師用於為移動和其他設備開發響應式的、功能豐富的網站。

官方網站:http://getbootstrap.com/

7)Web框架——Kube

Kube框架也是網頁設計過程中的重要組成部分。它是一個自適應和響應式的工具,可用於支持網站設計。它有效的功能和可靠的性能有助於我們快速輕鬆地創建網站。

官方網站:http://imperavi.com/kube/

8)CSS框架——Columnal

columnal框架是一個有效的CSS網格系統,並有少許的自定義代碼。這是一個彈性網格,為方便快捷的網頁設計提供了特殊功能。因此,如果你想高效的網頁設計結果,這個框架是最好最可靠的選擇。

columnal

官方網站:http://www.columnal.com/

9)CSS框架—— Pure

還有一種高效的網頁設計框架是Pure。它擁有一系列小型的,響應式的CSS模塊,幾乎所有的網頁設計項目中都能派上用場。


pure

官方網站:http://purecss.io/

10)HTML/ CSS框架——Clank

Clank是一款用於手機和平板電腦app的HTML/ CSS框架。它使用Saas作為CSS的預處理器,來達到為移動和平板設備快速開發的目的。

clank

官方網站:http://getclank.com/

11)HTML5和CSS3——52Frameworks

這也是一款非常棒的HTML5和CSS3框架。一種全新的HTML5驗證的表單框架(通過JavaScript)。

官方網站:http://www.52framework.com/

12)HTML5框架 – Montagejs

MontageJS是一款前端的HTML5框架,支持快速創建單頁應用程式。MontageJS使用的是經過時間考驗的 設計模式和軟件規則,允許用戶為自己的項目輕鬆創建模塊化的架構,從而提供高品質的用戶體驗。


best CSS & HTML frameworks for designers and developers - montage

官方網站:http://montagestudio.com/montagejs/

13)HTML5 Boilerplate

HTML5有助於快速創建穩定和適宜的Web應用程式和網站。

官方網站:http://html5boilerplate.com/

14)HTML Kickstart

HTML Kickstart提供了HTML5、CSS和JS模塊,用於快速出品網站。

官方網站:http://www.99lime.com/elements/

譯文鏈接: http://www.codeceo.com/article/14-best-html-css-framework.html
英文原文: 14 Best HTML & CSS Frameworks for Designers & Developers
翻譯作者: 碼農網 – 小峰
轉載必須在正文中標注並保留原文鏈接、譯文鏈接和譯者等訊息。
]

冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15758
[轉貼]9 個超好用的 CSS 框架

網頁工程師必知:9 個超好用的 CSS 框架

by:  Codeceo 2015-05-13

前端開發是一項非常繁瑣的工作,你不僅需要擁有和別人不一樣的審美觀和設計觀,而且需要了解諸如 HTML、CSS、JavaScript 等錯綜複雜的技術,因此選擇一些優秀的 CSS 框架或許可以幫助你大大
提高工作效率

本文向你推薦了 9 個還不錯的 CSS 框架,希望對你有所幫助。

Bootstrap 是一款由 Twitter 推出的開源 CSS 框架,它的核心是由一系列用於 Web 前端開發的工具包組成。Bootstrap 基於 HTML、CSS 和 JavaScript,是一款非常適合敏捷 Web 開發的 CSS 框架,Bootstrap 同時也是 Github 上最熱門的開源項目之一。

Bootstrap 的特點

·強大的開發團隊。Bootstrap 由 Twitter 的設計師 Mark Otto 和 Jacob Thornton 合作開發,Bootstrap 開發團隊也是國際上公認最優秀的前端開發團隊之一。

·極簡的框架。Bootstrap 的設計非常簡單,這就意味著,無論你是高級的前端設計師,還是普通的 程序員,都能夠很快地掌握 Bootstrap 的開發流程和開發方式。


·跨設備、跨瀏覽器最初設想的 Bootstrap 只支持現代瀏覽器,不過新版本已經能支持所有主流瀏覽器,甚至包括 IE7。從 Bootstrap 2 開始,提供對平板和智能手機的支持。

·完美的響應式設計。Bootstrap 支持響應式佈局,可以智能識別客戶端瀏覽器的類型,從而構造適應當前設備前端佈局,這一切都是全自動的。

·支持 HTML5 和 CSS3。Bootstrap 支持所有的 HTML5 標籤和 CSS3 屬性。

·使用 LESS 構建動態樣式。當傳統的枯燥 CSS 寫法止步不前時,LESS 技術橫空出世。LESS 使用變量、嵌套、操作、混合編碼,幫助用戶花費很小的時間成本,編寫更快、更靈活的 CSS。

  • 2、扁平化 UI 開發包 – Flat UI

Flat UI 是一款基於 Bootstrap 的扁平化前端 UI 工具包,Flat UI 的組件外觀設計非常清新和漂亮,Flat UI 的組件包含按鈕,輸入框,組合按鈕,複選框,單選按鈕,標籤,菜單,進度條和滑塊等精美的元素。

Flat UI 的特點

·包含很多基本的用戶界面,同時也可以靈活創建更多自定義的 UI 界面組件

·包含豐富的矢量圖標和符號

·自定義調色板

·基於 HTML / CSS、JavaScript 的佈局

Semantic UI 是一款語義化的前端開發框架,Semantic 是圍繞自然交流語言而架構的,這使得開發更加直觀(易於理解)。跟 Bootstrap不同,Semantic 在功能特性上、佈局設計上、用戶體驗上更貼近自然語言。

Semantic UI 的特點

·文檔和演示非常完善

·易於學習和使用

·配備網格佈局

·支持 Sass 和 LESS 動態樣式語言

·有一些非常實用的附加配置,例如 inverted 類。

·對於社區貢獻來說是比較開放的。

·有一個非常好的按鈕實現,情態動詞,和進度條。

·在許多功能上使用圖標字體。

  • 4、Metro 風格的 CSS 框架 –
    BootMetro

Flat UI一樣,BootMetro 同樣也是一款基於 Bootstrap 的 CSS 框架,BootMetro 的最大特點在於它是一款 Win 8 Metro 風格的 CSS 框架。Metro 風格的優勢在於界面簡潔平滑,UI 元素簡單,加載速度快,並且有不錯的視覺效果。

BootMetro 的特點

·基於強大的 Twitter Bootstrap,框架的靈感源於 Metro UI CSS

·讓用戶更專注於網站的內容,因為 Metro 風格可以更加突出網頁的主要內容

·完全免費,和 Bootstrap 一樣,BootMetro 的使用也是非常簡單

  • 5、雅虎開源傑作– Pure

Pure 也是一款很出色的 CSS 框架,之前分享的 Bootstrap 是由 Twitter 出品的,而 Pure 是來自雅虎的。儘管從 UI 界面效果上來說,Pure 沒有 Bootstrap 那樣精美,但 Pure 是純 CSS 實現的,因此非常小巧,整個框架壓縮後只有 5.7k 左右。

Pure 的特點

·最大的特點就是框架基於純 CSS,無任何 JavaScript 代碼,渲染速度比較快。

·由 Yahoo 出品,技術上應該不存在太大問題。

·框架十分小巧,壓縮後僅 5.7k。

·組件也很豐富,包括表格、表單、按鈕、表、導航等。

·CSS 類的標識十分簡單,因此在使用 Pure 的過程中代碼會比較友好。

Metro UI CSS 是一款 Win 8 Metro 風格的 CSS 框架,同時,之前介紹過的那款 BootMetro也是基於 Metro UI CSS 的,我們可以利用 Metro UI CSS 構建很棒的 Metro 風格應用。


Metro UI CSS 的特點

·Win 8 Metro 風格,界面清爽平滑

·學習非常簡單

·源代碼很小巧

·基於 MIT 開源協議

Bootswatch 是一款基於 Bootstrap 的免費主題包,其中包含了豐富的 Bootstrap 主題,你可以下載安裝這些主題的 CSS 文件,實現各種各樣漂亮的 Bootstrap 主題風格。

Bootswatch 的特點

·安裝非常方便。只需要下載對應主題的 CSS 文件,替換原來的文件即可,無需安裝二進製文件。

·完全開源。基於 MIT 開源協議,你也可以前往 Bootswatch 的開源社區進行問題討論。

·模塊化。可以更加靈活地控制和改變樣式。

·插件化。已經為各個平台提供了 API,如果你在使用 NodeBB ,
BootSnap,那麼就更加方便了。

·持續更新中。更新和維護是一款優秀開源軟件的標誌。

jQuery UI Bootstrap 是一個將 jQuery UI 集成到 Bootstrap 上的 CSS 框架,jQuery UI Bootstrap 不僅可以利用 jQuery UI 強大的控件庫,同時還可以享受 Bootstrap 那種清新自然的主題風格,所以越來越多的前端開發者都在使用 jQuery UI Bootstrap。

jQuery UI Bootstrap 的特點

·基於 jQuery UI,因此控件功能非常強大,可以使用全部的 jQuery UI 控件。

·基於 Bootstrap,不同控件有了統一的外觀。

·免費開源,你可以很方便地下載和使用。

  • 9、輕量級 CSS 佈局排版框架– EZ-CSS

EZ-CSS 是一款輕量級的 CSS 佈局排版框架,EZ-CSS 和其他的 CSS 框架有很大的不同,因為它很小,才 1kb。而且 EZ-CSS 的擴展性很強,對瀏覽器兼容性較為友好,利用 EZ-CSS,你可以快速的實現較為複雜的網頁佈局排版。

本文鏈接: http://www.codeceo.com/article/9-css-framework.html
本文作者: 碼農網 –小峰

(本文轉載自合作夥伴《 碼農網》;未經授權,不得轉載)


原文出處:網頁工程師必知:9 個超好用的 CSS 框架 | TechOrange
前一個主題 | 下一個主題 | 頁首 | | |



Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|