服務熱線:400-816-8767

建站前端必備:讓代碼活起(qǐ)來的CSS工具

分享到:
點擊次數:3359 更新時間:2016年05月12日10:25:46 打印此頁 關閉
CSS作爲網頁設計制作的一門基礎語言,在網頁設計中,它表現出了其獨特的優勢。例如更簡潔的語言,模塊化的結構。

對(duì)于頁面(miàn)開(kāi)發(fā)而言是設計排版的改進(jìn)、對(duì)于訪客用戶而言則是有助浏覽速度的提高。而在開(kāi)發(fā)維護以及在做被搜索時的SEO,使用CSS都(dōu)是目前很好(hǎo)的選擇。爲了更好(hǎo)的對(duì)CSS進(jìn)行開(kāi)發(fā),我們可以選擇一些有幫助的工具。
下面(miàn)來看看有哪些實用CSS工具:
 
Base
  Base是一款輕量級CSS預處理工具,能(néng)夠將(jiāng)代碼編譯爲SASS(即Syntactically Awesome CSS)或者LESS(Leaner CSS)。盡管已經(jīng)有很多框架放棄了IE浏覽器的支持,Base仍然堅定扮演着IE擁護者的角色,Matthew Hartman表示——他設計Base的初衷在于幫助設計師們編寫出更爲簡潔且結構清晰的CSS代碼。

  盡管目前的版本仍專注于面(miàn)向(xiàng)桌面(miàn)系統,但Hartman已經(jīng)開(kāi)始着手創建下一個版本、旨在利用經(jīng)過(guò)修改的代碼庫將(jiāng)移動平台作爲合适的環境。他指出,Base“在起(qǐ)初進(jìn)行開(kāi)發(fā)時隻具備非常基本的功能(néng),但随着其迅速發(fā)展、我開(kāi)始將(jiāng)其應用在更多不同類型的網站當中。雖然遇到過(guò)許多從未有的情況以及令人沮喪的錯誤,但這(zhè)段學(xué)習經(jīng)曆既可怕又充滿樂趣。”

Compass
  Compass CSS驗證框架能(néng)夠爲設計師們帶來更爲簡潔的标記、可重複使用模式同時大大簡化了Sprite圖像——像這(zhè)樣的優勢還(hái)有很多。“它并不是一套難于上手且需要預先定義的類名稱集合。Compass當中所包含的工具數量超過(guò)了其它任何CSS框架,”開(kāi)發(fā)人員Lorin Tackett表示,他利用這(zhè)套框架創建出了一款網格計算器。“Compass充分考慮到了那些在未來可能(néng)出現的浏覽器支持沖突狀況,因此其中一部分功能(néng)可以有選擇地加以關閉。”

  Tackett指出,Compass是維護複雜Web應用程序中樣式表格的上佳選擇。


Foundation
  Foundation框架的專長(cháng)在于響應式設計,這(zhè)是一套專門用于創建網站與Web應用的策略方案,能(néng)夠自動與用戶設備上的浏覽器環境進(jìn)行适配。

  “Foundation是第一款專門幫助用戶創建能(néng)夠運行在任何設備上的響應式站點的CSS框架,”Web設計機構Zurb合作夥伴兼Foundation設計主管Jonathan Smiley指出。“我們自發(fā)布公共版本開(kāi)始就一直緻力于打造響應式站點,而且在經(jīng)曆了五個版本的實踐研發(fā)過(guò)程後(hòu)、我們已經(jīng)親眼見證了衆多開(kāi)發(fā)者在創建多設備應用及站點方案時所遭遇的難題,因此有能(néng)力幫助他們順利度過(guò)難關。”

  Foundation使用SCSS(即Sassy CSS),提供内置組件以簡化布局與原型設計,同時允許用戶以覆蓋方式使用自己的定制化前端。

Gumby
  上世紀七十年代出生的朋友們可能(néng)還(hái)對(duì)Gumby這(zhè)位活躍在兒童電視節目上的綠色黏土動畫人物留有印象,而如今同樣的名字則代表着一款CSS框架。

  “Bumby這(zhè)個名字來自定格動畫片中的人物,代表着能(néng)夠爲用戶帶來快速的原型設計體驗,”Gumby框架出品方Digital Surgeons公司執行創意總監Peter Sena指出。

  Gumby提供了多種(zhǒng)網格與列式變化,其UI包中還(hái)包含按鈕、字體以及表單等等。Gumby旨在幫助業餘開(kāi)發(fā)人員編寫并維護成(chéng)百上千行代碼,Sena表示。目前其版本号爲2.6,預計Gumby 3將(jiāng)新增更多目前尚不支持的屏幕尺寸與設備型号,例如某些高分辨率平闆設備與觸控式筆記本等。

Kube
  Kube标榜自身是一款“專業級”CSS框架。盡管其它框架同樣能(néng)夠提供預定義樣式以構建起(qǐ)視覺效果相似的站點外觀,但Kube的使用感受更加簡單,Kube項目開(kāi)發(fā)者之一Artem Rosnovskiy解釋稱。

  “Kube并不會強制限定任何樣式規則或者形式,”Rosnovskiy表示,而這(zhè)一特性使其在專業設計師與開(kāi)發(fā)人員群體當中獲得了廣泛歡迎。“很多初學(xué)者希望能(néng)夠在預定義創建流程之前獲取更多指導性意見——包括色彩、網格、按鈕以及樣式等等——但Kube則爲設計師與開(kāi)發(fā)人員們帶來了徹底的自由空間……它要求使用者擁有老練的技能(néng)、經(jīng)驗并透徹理解自己想要達成(chéng)的效果。”

Responsive Grid System
  Responsive Grid System既不屬于框架也不屬于樣闆,而是一種(zhǒng)能(néng)夠“快速而簡單”的響應式網站創建方式,項目開(kāi)發(fā)者Graham Miller解釋道(dào)。Responsive Grid System能(néng)夠直接與現有HTML與CSS相對(duì)接。

  “我發(fā)現一旦自己開(kāi)始着手創建響應式網站,需要的就是能(néng)夠快速切入到自己的現有代碼中并以高度靈活的方式構建任何項目,”Miller表示。“我曾經(jīng)使用過(guò)很多不同類型的框架與樣闆,但它們都(dōu)傾向(xiàng)于讓我以其爲基礎設置網格體系、然後(hòu)向(xiàng)其中填充内容。我是那種(zhǒng)‘内容至上’派的開(kāi)發(fā)人員,因此我建立了自己的響應式網格系統。”


上一條:新建網站快速提升網站PR值教程 下一條:建站前端技術:HTML5繪圖工具