網頁設計中11 款最好CSS框架

網頁設計和發展領域已經成爲競爭激烈的虛擬世界。想要在網絡的虛擬世界中生存，僅有一堆靜止的在線網絡應用是遠遠不夠的，網頁必需要有不少功能，配以讓人沒法抗拒的設計。網頁編碼必定要合適、精確，才能保證不發生錯誤，使網頁能在瀏覽器上輕鬆加載出來。此外，還要在網頁設計中留出足夠的空間以充許往後的功能增長和改善，這樣作才能讓更多與時俱進的特徵能加入到網頁設計中。

網頁設計員和研發者可用的最好工具之一即是 CSS 框架，它提供高端解決方案來適應高端網頁研發需求。CSS 框架減化了編碼結構、減小了編碼時間，爲研發者帶來網頁設計的便捷性。

CSS 框架倒底表明什麼呢？

在網站繁榮的背後，一個很是基本的緣由是活躍的 PSD 和 CSS 轉換服務的存在。CSS 是層疊樣式表語言 （Cascading Style Sheet Language） 的英文首字母拼寫，它能使你的網站漂亮地展示出來。CSS 應用人類心理學和表示語義學，詳細地組織數據，從而使得用戶在瀏覽你的網站時不會失去興趣。

CSS 給予研發人員在編碼上極大的靈活性，它分離了標記內容，例如從 PSD 到 HTML 或 XHTML 的轉換，以及表示內容，這些標記內容描述了頁面佈局、內容展示、字體和風格等等。CSS 另外一個便捷特徵則是 CSS 框架。CSS 框架是先前備制的元素，存在於網絡數據庫中。其擴展名爲 .css，可使研發者們回憶起某一特定編碼。所以，研發者們沒必要一遍又遍地重寫所有的編碼，這樣也就省下了大把的時間。因爲去除了編碼中的重複步驟，使得研發者們有足夠空間把精力集中在重要的地方，製做出視覺上更另人震撼的網絡應用。此外，減縮的編碼直接隱藏於網頁加載中，使得網頁在瀏覽器上能快速地加載出來。

使用 CSS 框架是明智的選擇，你不用每次作網頁研發時再從零開始了。你能夠作一份默認風格表和標記模版，在每次作網頁研發時均可以用到。這些基本內容在框架中都有了，你能夠把全部的力氣和技術用設計的細節和獨特性上了。

11 種最流行的 CSS 框架

一、藍圖（Blueprint）

一個叫作 Olav Frihagen Bjørkøy 的挪威理工學生是藍圖（最強大的 CSS 框架之一）研發背後的緣由。藍圖提供穩固的平臺以使用層疊樣式表語言和開發排版網格。CSS 框架的設計目的是爲你節省大量 CSS 研發的時間。藍圖提供了很是好用的網格發生器，藉此用你可基於寬度尺寸的選擇打造框架。此外，藍圖還提供定製風格表，使你能夠把按鍵和排版、完整專業設計表格、和用於打印目的簡便易用的風格表組合到一塊兒。最後，藍圖最重要的優點之一是它能夠執行你的瀏覽器默認風格的批量重設。

二、雅虎UI 數據庫 CSS 基礎

雅虎 UI 數據庫由 JavaScript 和 CSS 大力支持，經過提供如 DOM 腳本語言、AJAX 和 DHTML 的高端技術，編匯了可以使你研發出高度響應和互動的網絡應用的工具和控制器。雅虎 UI 數據庫能夠無償使用，也能夠在 BSD 協議下使用。

雅虎 UI 由雅虎公司的前端工程師和全球的參與者們細心打造。它能夠爲提高你的網絡應用的可擴展性併爲其增速，同時提供夯實的基礎，這一點已久經考驗。若是你以爲用 JavaScript 比較舒服的話，那麼它就是你最好最有效的解決方案了。

三、另外一個多欄佈局 – YAML

另外一個多欄佈局是 Dirk Jesse 先生勤奮努力換來的結果，他是 YAML 的研發者。Dirk Jesse 先生對網頁標準有準確的理解，他使得 YAML 與當下使用的多個相關網頁瀏覽器兼容。還有，YAML 爲你提供了除錯樣式表和打印樣式表。YAML 的另外一個優點特徵爲，它提供詳細的文件編制，並用兩種語言提供活範例 – 英語和德語。此外，YAML 還能使你在你的網頁瀏覽器內研發 CSS 佈局，其方法是經過一個叫作 YAML Builder 的有效編輯器，這款編輯器以「所見即所得」（WSYIWYG）的方式工做，且接着就會把不一樣有創意的設計元素融入到你的框架中去。

四、960GS

960 網格系統的誕生只有一個目的，就是經過提供一個廣泛的 960 像素佈局寬度平臺，使得與研發網站相關的工做程流程更加順暢。960 網格系統提供了 12 和 16 的兩個不一樣包供選擇，能夠一塊兒使用，也可分開使用。此係統把幾個實用的模版和圖表整合到了一塊兒，爲你提供了穩健的背景支持，也提供了一個透視圖工具。

五、流體 960GS

有着極大優點的流體 960 網格系統是 Nathan Smith 和他的原創 960 網格系統的結合體。

六、彈性 CSS

這種 CSS 框架其實是在 CSS 框架方案中的「鬆緊帶」。它就像一條鬆緊帶同樣，可以伸縮自如，提供穩健的支持，容許要很是普遍的範圍內操做，包括固定的、流動的和彈性的佈局。不用折衷你想要的網絡應用佈局，僅僅經過在彈性 CSS 框架上運行數組排列和結合，直到獲得了你想要的佈局。彈性 CSS 框架惟一的美中不足即是它須要使用 JavaScript。JavaScript 能提供高質量和美學設計，但對不懂 JavaScript 的人來講，這但是個負擔。

七、jQuery UI CSS 框架

這款 CSS 框架是爲了研發以 jQuery 爲基礎的定製小工具而設計。這個 CSS 框架包含的類別涵蓋了全部必要的用戶介面的大多數。若是你使用 jQuiery UI CSS 框架，那麼你將可以輕鬆地把相關插件融入到網站編碼中，且可以使用共享的傳統標記編碼。若是你選擇 jQuery，那麼你就能夠建立按鈕，並在單個給定時間內選擇多個按鈕。

八、SenCSs

SenCSs 的全名將揭示其含義 – 合理標準 CSS （ensible Standards CSS），這是這款 CSS 的任務。它能讓你合理地爲全部 CSS 中的間歇（也就是重複）部分設計式樣，所以可省出大把時間用手攻克其餘網站研發的重要問題。

九、Typogridphy

這款 CSS 框架乃是基於 960 網格系統而成，它可讓你創造出極爲動感和多變的網格佈局。Typogridphy 是一個印刷和網格佈局 CSS 框架，給網站設計員和研發員提供極限的範圍，使他們快速地給有極強功能和美觀的網格佈局編碼。

十、Tripoli

Tripoli 不能算做是一款 CSS 框架，而更應說是描述 HTML 元素的 CSS 標準。Tripoli 爲研發動畫布局提供穩健的繪製引擎，而不會改變編碼的排印。它是很是成熟的 CSS 標準，能夠重置默認瀏覽器，並靜靜地工做。

十一、BlueTrip CSS 框架

這款 CSS 框架名副其實，提供了三種多是最好的框架的綜合體，即 960GS, Blueprint 和 Tripoli。

爲何要挑選 CSS 框架

在這個年代，僅僅是努力工做已不夠了，要成功的必要條件是要聰明地工做，不僅是努力。CSS 框架就可讓你實現聰明地工做。這是研發網站聰明的方式。它經過提供強健的研發網站基礎，使研發人員免於全部的焦慮和沮喪，不用再從頭開始。

此外，網站研發過程可謂至關無枯燥和費時，研發員可能在重複的編碼中出錯。CSS 框架能夠避免這種狀況發生。若是你全部項目都有默認的 CSS 編碼，那麼你不便不用檢查網站每一頁的源碼了。一個詳細的 CSS 框架保證了研發過程的工做流的果實，並節省了大量時間，避免了研發團隊內部的誤解和交流不順暢。

正如你已在上文看到的內容，大多數 CSS 框架已經作到了跨瀏覽器兼容，因此你沒必要擔憂你的網站的兼容性。

最後，真的沒有什麼理由不推建使用 CSS 框架了。它節省你寶貴的時間，以極有利的特徵和功能補充網站，並給予研發人員足夠的空間和靈活度來做出最好的設計。

來源：http://article.yeeyan.org/view/371930/367072

http://www.coolseo.org/ui/web-design-css-framework