2014年20款最好的CSS工具

oschina發表於2014-06-18

　　說到 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 的基礎上建立的。