2014 年 20 款最好的 CSS 工具

說到 WEB 設計，不得不介紹介紹 CSS 工具，CSS 工具在這裏面扮演很重要的角色，能夠簡化無數開發者和設計師的工做，寫出更好的 CSS 代碼。

而網上有很是多的 CSS 工具，幫助設計師和開發者高效的工做和進行更多創新的創做，設計師和 web 開發者也把愈來愈多的 CSS 工具收入爲自身的開發和設計利器。

在這篇文章中，咱們羅列了 2014 年最好的 20 款 CSS 工具，但願能幫助你們簡化本身的開發工做，創做出更多更好的創新做品。Enjoy！

1. Enjoy CSS

EnjoyCSS 能建立活躍，超棒的實例，EnjoyCSS 生成器大大簡化了自定義類聲明。EnjoyCSS 是衆多 CSS 工具中很是有用的，也是開發者和設計師工具箱必備的利器之一。它能加快工做流，簡單易用，不須要編碼就能整合豐富的圖形樣式到簡單的 UI。

2. Keyframer

Keyframer 是很是值得信賴的，簡單易用的 CSS3 動畫建立工具。用戶只須要點擊相應的按鈕就能夠添加動畫效果，插入相應的動畫 CSS 代碼。點擊 X 按鈕就能夠刪除掉當前的效果，測試動畫效果。

3. Wow.js

Wow.js 容許用戶滾動頁面的時候展現 CSS 動畫。默認的，用戶可使用它來出發 animate.css 動畫。可是用戶也能夠很是容易修改設置喜歡的動畫庫。Wow.js 比其餘 JavaScript 視差插件小，相似 Scrollorama（這個很是華麗，可是也更繁雜）。Wow.js 很是容易安裝和使用。若是你使用 Wow.js，你能夠很是快的啓動，執行代碼。

4. Jeet

Jeet 是市場上最早進的網格系統，能夠把它看成 Semantic.gs 的精神繼承者。使用這些強大的預處理器，咱們能夠經過分數（浮點數）做爲限制來生成基於百分比的寬度和網格槽，能夠在維護無限循環槽的時候使用這個功能。 Jeet 容許用戶像人類描述頁面網格同樣表達頁面網格。使用 Jeet，不會有多餘的嵌套元素，沒有十二列的規則，不須要多少代碼就能更快的綁定 Jeet，更靈活。

5. Gridlover

Gridlover 提供字體大小，行高和頁面空白的可調節 CSS。默認 CSS 輸出是針對 body，p 和 h1-h4 標題，可是用戶能夠經過編輯 CSS 來申請調節任意元素的可調節值。只須要簡單的拖拽頂部工具欄左邊和右邊的數值來調節數值，Gridlover 的元素老是保持完美像素基準網格對齊。Gridlover 字體大小是經過調整標題水平的比例因子來計算的。行高會自動適應字體的大小。

6. Magic CSS3 Animation

Magic CSS3 Animations 是 CSS3 動畫的包，伴有特殊的效果，用戶能夠自由的在 web 項目中使用。Magic CSS3 Animations 結構很是簡單，包括 CSS 樣式：magic.css 或者是 mynified 版本：magic.min.css。

7. Refills

Refills 中，Bourbon 提供 Sass 多態和消除特定前綴，爲了更快的 CSS 編碼。Neat 提供一個輕量級的網格框架，Bitters 提供 Bourbon 或者 Neat 項目的架構和基礎變量。Refills 是預先包裝好的模式和組件，在 Bourbon，Bitters 和 Neat 的基礎上創建的。

8. CSS Perf

CSS-perf 能簡化一些超級不合理的 CSS 測試，使得這些測試更完美。由於通常狀況下，web 頁面的 CSS 測試都是圍繞肯定有效的方法和技術。

9. Progre(c)ss

Progre(c)ss 能很方便的建立純 CSS 進度條。用戶只須要包括樣式表，添加類到適當的元素中，再添加一個數據屬性就能夠輕鬆建立進度條。

10. Normalize.CSS

Normalize.css 是爲 HTML5 準備的，能夠替代以前的進行瀏覽器重置。它你呢個更精確的渲染全部元素，而且統一跨瀏覽器，只針對規範化風格，經過檢測瀏覽器默認設置來重置樣式。

11. iHOver

iHover 是令人印象很是深入的懸停效果集合，是經過純 CSS3 實現的，沒有任何依賴，並且跟 Bootstrap3 結合的很是好。它隨着 Scss CSS 來構建，使用變量，很是方便進行修改。iHover 會提供模塊化代碼，不須要包括整個文件。

12. Sublime CSS Completions

Sublime CSS Completions 是 Sublime Text CSS 自動完成庫，比 Sublime Text 標準的 CSS 完成功能更完整。目前只支持屬性自動補齊，將來將會自動補齊有效的參數值。

13. Decss

Decss 幾乎是 CSS 驅動的演示框架，使用 CSS3 做爲轉換。它提供響應式佈局，內容佈局 flexbox，甚至還支持演示者筆記。

14. Imacss

Imacss 是轉換圖像文件成爲數據 URIs 的庫和應用，能夠嵌入到單個 CSS 文件做爲背景圖片。最基礎的，它能讓你減小你設計（好比圖標）的全部 HTTP 圖片請求。

15 Fluidity

Fluidity 是極小 CSS 庫，而且彌補了一部分 HTML 不是徹底響應式的缺點。它修改了圖片，表，格式化文本和 canvas 元素的方式，因此是徹底響應式的。

16. Zen Grids

Zen Grids 是響應式網格系統，根據 Sass 構建。它能大大簡化佈局的建立，經過移除大部分複雜的標記，使用純 CSS 和 HTML 來建立響應式基於網格的設計。

17. Progress.js

ProgressJs 是 JavaScript 和 CSS3 庫，幫助開發者建立和管理頁面每一個對象的進度條。用戶能夠設計本身的進度條模板或者自定義進度條。

18. Bootflat

BootFlat 是開源平滑 UI 工具包，基於 Bootstrap 3.1.0 CSS 框架。它提供給 web 開發者快速，簡單，更少重複的方式建立優雅的 web 應用。它基於 Bootstrap 基礎來建立，使用平滑設計風格。

19. Sculpt

Sculpt 是輕量級的，移動端優先的響應式 HTML，CSS 和 SASS 框架。Sculpt 是專爲屏幕比較小的設備準備的，增長了許多複雜性，經過媒體查詢來增長不動產。不管什麼條件下提供三個大小 (732px, 960px 和 1140px) ，用戶須要肯定內容能適應這三個屏幕大小。

20. Animo.js

Animo.js  是一個開源的、強大的CSS動畫管理工具，你能夠很是方便地管理Web應用中的CSS動畫，同時你也能夠將它看成一個動畫庫來使用。

via codegeekz.com