5種流行的CSS框架+入門教程和工具
網站建設CSS框架最近流行起來，使開發人員能夠快速原型設計。CSS框架的理念是在每個站點上反復做重復的任務，讓你得到更快的結果，并得到設計師們喜歡的有趣的東西。
好CSS框架的主要特點是1）快速加快我們的開發時間，2）應該有一個非常小的尺寸，3）有良好的文檔和教程，4）有干凈的網格結構。您需要對CSS框架有一個基本的了解，您將使用它來理解為什么和如何解決問題。

在今天的文章中我們提出的5個最流行的CSS框架概述；展示精心挑選的教程使用它們以及其他有用的工具和資源，你肯定會找到有用的和節省時間的。

1。960 CSS框架
960網格系統致力于通過提供常用的維度（基于960像素的寬度）來簡化Web開發工作流。有兩種變體：12和16列，可以單獨使用或串聯使用。的960.css文件本身只有3.6 KB的壓縮。

“杰夫瑞”在960個CSS框架的密切關注，說明使用它的利弊。他還一步一步地帶領我們創建一個簡單的“12列”布局，有一個簡單的標題和兩列結構。最重要的一點是：你必須指定一個類，每個部門命名規范要求，類的名字開始與“grid_”與所需的列數端。

960 CSS框架–學習基礎知識
Stefan Vervoort以沉重的工作為你解釋這個基本框架讓你可以從960個漂亮的快速發展。基本原則包括：不解釋編輯960.css，加載網格、容器、網格/柱，空間和造型。斯特凡的另一篇文章，他解決了在使用這個框架時所面臨的一些問題。

流體960網格系統模板已經建立在拿芬史密夫和他的960網格系統使用來自MooTools的JavaScript庫工作中的作用。

藍圖是一個CSS框架，旨在減少CSS開發時間。它給你一個堅實的CSS基礎建設項目上，用一個簡單易用的網格，合理的排版，漂亮的形式，甚至一個樣式表打印。它的主要功能之一是對瀏覽器默認樣式進行批量重置，提供了一種用于可定制布局網格的方法，最重要的是所有元素都可以重寫。

有幾個可用的藍圖插件，可以覆蓋框架的各個方面，或者添加新樣式供您使用。
說明如何使用CSS CSS框架和工具的教程

BlueprintCSS 101

Jeff Croft解釋藍圖的核心特征，我們如何使用它，它已經影響了我們的工作流程，我們喜歡它。

仔細看看Blueprint CSS框架

在本教程中，我們將了解藍圖的內部工作，我們將看一看演示應用程序，它使用藍圖來更好地了解如何實際使用框架。

藍圖CSS備忘單

藍圖網格CSS生成器

此工具將幫助你產生更靈活的藍圖的grid.css和compressed.css版本和grid.png使用圖像文件在發展背景圖像非常方便，確保一切線正確。你是否喜歡8、10、16或24在你的設計中的列，該發電機現在使你的靈活性與藍圖。

pxtoem.com是一個網站，讓他們更容易轉換像素值的值。你選擇的價值觀的CSS文件可以得到基于CSS的藍圖typography.css部分設置一個默認的字體。

構建一個可視化的布局編輯器，基于藍圖和jQuery，構建一個有用的工具和CSS設計師證明視覺布局編輯器可以實現干凈的CSS和語義化的HTML。

jQuery包含一個健壯的CSS框架，用于構建定制的jQuery小部件。該框架包括類，涵蓋范圍廣泛的通用用戶界面的需求，并且可以使用jQuery UI themeroller操縱。通過使用jQuery CSS CSS框架構建UI組件，您將采用共享標記約定，并允許整個插件社區輕松實現代碼集成。

一個真實世界的例子，主題化的按鈕和工具欄使用jQuery UI的CSS框架，一類開發的jQuery UI插件，可以很容易地應用到任何插件系統，甚至靜態內容。下面是按鈕示例，演示如何將CSS框架類的力量集成到自定義小部件中。

4. YAML
YAML（另一個多列布局）專注于靈活的布局和提供列和網格柔性基礎的設計元素，彈性或固定的布局。你需要許可證才能使用它。

YAML是一個很不錯的Ajax生成器，基于CSS布局允許你把布局容器視覺通過拖放的YAML的可視化開發一個方便的工具。有效的HTML和CSS代碼是自動生成的。

Dirk Jesse，YAML開發者（另一個多列布局），一個（x）HTML和CSS框架，闡述了他在文章的最后一段，YAML的動機，提供什么是可能與YAML的概述和可能對你未來的布局提供一些思路。

5。雅虎YUI網格的CSS
基本的YUI網格CSS提供四種預設的頁面寬度，六個預置模板，并且能夠棧巢細分地區兩，三，或四列。4KB文件提供了超過1000的頁面布局的組合。特點包括：自動清理頁腳，定制寬度為固定寬度布局，支持流體寬度（100%）布局和更多。

YUI網格生成器網格定制一個簡單的界面。

別忘了檢查CSS重置/基/字體/網格備忘單。

看看這里的現場演示

復雜的流體布局在三個簡單的步驟

本教程介紹了如何在三個簡單的步驟創建CSS布局在所有現代瀏覽器毫不費力地使用YUI網格工作。

YUI CSS網格：太棒了，但沒用？

Jeff Croft問YUI CSS網格的網站比750px有一定的局限性，Dustin Diaz在解釋了一些有趣的功能和使用方法我們可以使用YUI CSS網格。“一個很酷的事情我已經做了它是幾乎與一類名稱除相同的HTML七不同的模板（yui-t（1-7））。這很好，因為它完全獨立于源代碼。如果我想在我的網站上你可以換出一個類名，而不是一個全新的CSS文件的方法的一個樣式切換器。因此，沒有理由為整個“入侵身體的開關”

值得檢查的CSS框架

–typogridphy

流行的CSS框架：10個有用的教程

一個排版布局CSS框架允許網頁設計師和前端開發人員快速的代碼typograhically愉悅的網格布局和網格。基于960網格系統，typogridphy允許你創建它是通用的，大電網布局看。