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