2014年20款精选CSS工具推荐

AS网站目录（www.adminso.com）：2014年20款精选CSS工具推荐 说到WEB设计，不得不介绍介绍CSS工具，CSS工具在这里面扮演很重要的角色，可以简化无数开发者和设计师的工作，写出更好的CSS代码。而网上有非常多的CSS工具，帮助设计师和开发者高效的工作和进行更多创新的创作，设计师和web开发者也把越来越多的CSS工具收入为自身的开发和设计利器

AS网站目录（www.adminso.com）：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

允许用户滚动页面的时候展示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动画，同时你也可以将它当作一个动画库来使用。