[推薦]精選國外15個CSS架構

什麼是css架構

實際上還是讓我們從架構說起吧。

架構就是一個你可以用于你的網站項目的基本的概念上的結構體。

css架構通常隻是一些css檔案的集合，這些檔案包括基本布局、表單樣式、網格或簡單結構、以及樣式重置。比如：

typography.css 基本排版規則

grid.css 基于網格的布局

layout.css 通常的布局

form.css for 表單樣式

general.css 更多通用規則

下面一起來了解一下各種不同的CSS架構吧:

<a href="http://blog.bingo929.com/css-frameworks-15.html"></a>

960網格系統是一個通過提供通常使用的尺寸簡化網站開發流程的努力的結果，基于960像素的頁面寬度。它有兩種類型，12和16列，他們可以獨立使用或是協同使用。

Dirk Jesse的強大的(X)HTML/CSS架構為許多的簡單或更複雜的網站項目提供完整的預設模闆包。YAML基于網頁标準并支援所有現代浏覽器。所有的 Internet Explorer的主要渲染漏洞都被解決。YAML 完全支援從5.x到7.0的所有的IE版本。

基本的YUI網格CSS提供4種預設的頁寬、6種預設模闆和再分為2、3、4卷的區塊的功能。 這個4KB的檔案可提供超過1000中頁面布局組合。

有國外作者曾指出YUI Grids CSS中最值得學習的網格布局CSS寫法:

負Margin技術

使用度量機關em

清除布局的浮動

CleverCSS是一個用于css的受Python啟發的小型的标記語言，它可用于以整潔的和結構化的方式建立一個樣式表。在很多方面它都比CSS2整潔和強大。與CSS最明顯的差別是句法：它基于縮進而且不單調。雖然這顯然違反了Python的規則，它依然是組織樣式的很好的主意。

Blueprint 是一個 CSS 架構，它的目的是減少你的css開發時間。它提供一個可靠的css基礎去建立你的項目，BP由一個易用的網格、合理的布局和一個列印樣式。

Schema 是一個為了提供在重複的設計任務中必須的CSS和HTML标簽而設計的表現層的網頁架構設計。 與為每一個新的網站項目從零開始建立HTMl/CSS不同，Schema提供必要的基礎來開始并立馬讓你的設計跑起來。

Emastic 是一個CSS架構，它有連續的任務：探索陌生的新世界，尋找新生活和新的網站空間，大膽的去CSS架構尚未到達的領域。它是輕量的、在頁面寬度上比較人性化，在網格中使用固定和不固定的列寬。 Elastic 用“em”布局。

* 隻能調用單個樣式檔案

* 主樣式需要取得CSS認證(WCAG 1.0)；

* 跨浏覽器相容性—包括Internet Explorer (IE) 5.x for Mac；

* IE Hacks使用獨立檔案；

* 快速建立模闆；

* 少量注釋/執行個體示範，可以節省時間來了解。

下一個邏輯步驟就是将這個擴充為CSS架構，允許使用寫好并通過測試的元件來快速開發網站。實際上所需的是搞定一套命名習慣和一個靈活的基本模闆…

ESWAT正在重新整理。如果你是沖着我的網站架構來的，那麼你就可以在這裡下載下傳。也許你也想看看我的其他項目gmachina、AppleSeed。

Tripoli是一個用于HTML表現的通用css規範。通過重設和重建浏覽器标準，Tripoli 為你的網站項目提供了一個标準的、跨浏覽器表現的基礎。

版權

作者：靈動生活 郝憲玮

如果你認為此文章有用，請點選底端的【推薦】讓其他人也了解此文章，

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。