css框架

CSS框架是預先準備好的軟體框架,允許使用層疊樣式表語言更容易,更符合標準的進行網頁設計。大多數這些框架包含至少一個柵格設計(grid)。功能更強大的框架,還配備了更多的功能和附加的基於JavaScript的功能,但大多設計導向的和Unobtrusive JavaScript。本文從功能和充分的JavaScript框架區分它們。 兩個顯著和廣泛套用例子是Bootstrap和Foundation (framework)。其他awsm.css, Flexify, Materialize, Semantic UI。 一些更為大型的框架會使用CSS的解釋器。例如LESS和Sass。

產生原因

編寫css也是一樣,從最初只是定義文字顏色、內容排版,到現在定義所有的表現。css框架也漸漸被重視了,因為大家都認識到:從具象的表現中抽出抽象的模組來重複使用,是減少用戶下載、方便團隊及個人開發最重要的手段。

定義

CSS 框架是一系列 CSS 檔案的集合體,包含了基本的元素重置,頁面排版、格線布局、表單樣式、通用規則等代碼塊,用於簡化web前端開發的工作,提高工作效率

特徵

1.抽象出常用的css樣式,高再可用性,高移植性

2.有固有的定義,詳細的文檔及開發特點

3.高兼容性,可以兼容流行的瀏覽器

4.以css為主,但不一定全部是css,可能有一些js(或者其他)腳本用於兼容瀏覽器

開發順序

a)格式化reset.css

格式化css的真正好處是能夠快速啟動工作,你可以在新的HTML檔案里引入框架,不用再處理重置padding 和 margin,實現統一的排版、瀏覽器下的相同表現。

b)布局layout.css

定義頁面是二欄還是三欄,是全螢幕還是1024×768……

一個網站的設計可能有很多種布局,但是大多數都是由幾個具有復用性的布局組成,選擇性的引入所需要的布局,可以很快地套用所期望的頁面布局。

c) 基本樣式 type.css

定義body、h1-h6、a:link-a:active、p等的字型大小和顏色。

基本樣式的css引用,譬如將ul定義class為“ul-text”,用來展現相同的icon、行間距、連結色彩。

還可以像這樣套用:class=”ul-text square”,li前展現的是方型的icon。

d)表格修飾 table.css

定義table、tr、td、th、thead、tfoot、tbody、caption等標籤的表現。

和基本樣式一樣,但是表格在現有網站的展現形式幾乎都是處理數據,所以分開存放引用。譬如在table上套用table-style-1便是黑色框線的表格,table-style-2便是黃色框線的表格。

e)表單修飾 form.css

定義fieldset、label、button、input 、select、textarea這幾個標籤的表現。

大多數網站的表單、按鈕、輸入框幾乎都是一樣的。之所以引入這個css,是為了便於統一在各個瀏覽器中的展現。默認的按鈕、輸入框等在各個瀏覽器下的展現區別很大,雖然在格式化的css中已經初步的統一,但是輸入框的框線,按鈕的樣式都是需要在這個css中定義的。無奈的是select無法做到統一,如果考慮到用js實現的話,這個成本太大了點。

f) 列印修飾 print.css

修飾列印輸出的頁面。

g) 包含其他css的css

frontpage.css、list.css、detail.css、register.css等等

根據各種引用去引入相應的css。譬如list頁面中沒有需要表格的修飾,那就不引入table.css。以節約代碼量。

優缺點

優點

a) 提高開發效率。

b) 規範名稱定義,便於維護。

c) 規範項目開發流程

d)css代碼更清晰、簡單。html代碼更合理。

e) 大規模項目中可以減少用戶下載

弊端

a) 學習成本提高。你需要了解整個框架,需要閱讀框架的文檔。

b)css框架對於一個小項目等頁面來說很臃腫。框架中可能有大部分你用不到的代碼。

c)可能會無法幫助你的技術提高。太依賴框架,以至於很難排除bug。包括框架中本身就帶的bug。

d) 選擇自己需要的框架與開發框架都很痛苦。寫到後面發現越來越不靈活,越來越臃腫。

常用css框架

960gs

960 像素的頁面寬度似乎成為了一種設計標準,在當前各種解析度下,能夠很好地展現網頁內容。提供較為常用的尺寸來簡化網頁設計過程,使工作簡單高效。

YUI 2: Grids CSS

芒果曾經介紹過由雅虎開發小組推出的 YUI,而這個 YUI Grids CSS 正是其中的一部分。作為最著名的 CSS 框架之一,YUI Grids CSS 提供了四種預設頁面寬度,六種預設模板。其中的負 Margin 技術,使用度量單位 em,清除布局浮動等技術非常值得學習和借鑑。

渴切-開源中文css框架

渴切(Cutter.css)是一個開源中文 (X)HTML/CSS 框架 ,它的目的是減少你的css開發時間。它提供一個可靠的css基礎去創建你的項目,能夠用於網站的快速設計,通過重設和重建瀏覽器標準,可以讓每個網站防 止枯燥的跨瀏覽器兼容性測試。你可以將他理解成一套模板,裡面包含了大多數站點中所需要的那些css類。他很小,只有四個檔案而已。總共不到6KB。

Blueprint

Blueprint 是一款成熟的 CSS 框架,它將布局(layout)、排版(typography)、組件 (widget)、重置 (reset)、列印 (print) 等分放到不同的 CSS 檔案中。在網頁設計時就減少了引入的代碼,提高了頁面載入效率。

BlueTrip

BlueTrip 是一個集成了BluePrint & Tripoli 框架的做好的部分;Hartija 的列印樣式; 960gs的簡潔;Elements 圖示的一個css框架。為你提供一個好用的樣式集合和一個製作網站的通用的方法。這樣你就可以集中精力搞設計了。

Bootstrap

Bootstrap是Twitter推出的一個用於前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML框架。它是一款簡潔、直觀、強悍的前端開發框架,讓web開發更迅速、簡單。其自帶的js以及css可以完成絕大多數常用的網頁特效與回響功能,是一款不錯的框架。

Elastic CSS

Elastic 是一個簡單的 CSS 框架用來對網頁進行布局。Elastic 可實現各種各樣常見的網頁布局。

Easy

市面上流行的JQUERY組件功能都被納入其框架中,你只要直接使用這個框架,不用學習複雜的AJAX JQuery語法,非常方便。

EZ-CSS

EZ-CSS是一個輕量級,瀏覽器友好,易於使用的CSS框架。用於創建CSS+Div的頁面複雜布局(layouts)。

Tripoli

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

CleverCSS

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

SenCSS

它為你CSS重複的部分提供了合理的樣式,這樣你就能更加關注於自己網站的樣式。SenCSs不像其他CSS框架那樣,它不包含各種雜亂的布局樣式或是預定義的柵格系統,那SenCSs能剛什麼呢?baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms 等等都是SenCSs所能辦到的。

相關詞條

相關搜尋

熱門詞條

聯絡我們