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