Web 开发中 20 个很有用的 CSS 库

标签： web 开发 css | 发表时间：2014-06-14 03:23 | 作者：天梯梦
出处：http://www.iteye.com

在过去的几年中，CSS已经成为一大部分开发者和设计者的最爱，因为它提供了一系列功能和特性。每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发。像CSS 库，框架，应用这样的工具能够为开发者做很多事，而且可以使开发者创造出创新立异的WEB应用。

 

在这篇文件章中我们找到了一系列对开发者有用的CSS库，它们能帮助开发者在一定的期限内取得有创造性和创新性的成果。我们希望这个列表能有助于您的开发并为您提供方便。尽情享受吧！

 

1. Kite

Kite
Kite是一个灵活的布局助手CSS库。Kite使用`inline-block`而不是最新的CSS语法。它注重实际，易于理解且容易使用。Kite用 法与flexbox相似：justify-content,等等。你可以很轻松地创建复杂的模块。Kite是基于OOCSS 与 MindBEMding，它可以帮助您快速构建自己的组件。Kite支持几乎所有浏览器，它属于MIT许可。

 

2. DynCSS

dyncss
DynCSS 将您的CSS解析成-dyn-(attribute)规则。这些规则是模拟浏览器事件(如滚动和缩放)的javascript表达式。其结果会应用到上面 指出的CSS属性。你可以将任何CSS属性设置为动态--前提是它对于jQuery的css()方法是可写的。你可以通过附加-dyn-前缀并指定一个引 用的javascript表达式来实现。

 

  

3. Progressjs

progressjs
ProgressJs 是一个 JavaScript 和CSS3库，可以帮助开发者创建和管理页面上所有元素的进度。你可以设计自己的进度条模板并且可以轻松自定义它。你也可以用ProgressJs 来为用户显示内容加载（图片，视频等）的进度。它可以用在textbox，textarea 甚至整个body上。

 

4. Hover.CSS

hover-css
Hover.CSS 是一个有用的CSS3悬停效果集合，可用于动作调用，按钮，商标，特性图片等。 自定或直接应用到你自己的元素上都非常的简单。 hover.css可以用多种方式来使用; 可以复制粘贴你喜欢的效果到你自己的样式表里，也可以引用样式表。然后只需向你想要的元素需添加对应效果的class名称即可。如果你只打算使用一个或几 个效果，最佳实践是复制粘贴一个效果。

 

  

5. Spinkit

spinkit
Spin kit是一个酷炫的加载动画CSS集合。 Spinkit使用CSS动画来创建吸引人的易于自定义的动画。该集合目标不是提供所有浏览器的解决方案--如果你需要支持哪些还没实现CSS动画属性 （像是IE9及之前的版本）的浏览器，你需要检测下这些动画属性并实现一个变通方案。

 

6. Magic CSS3 Animation

css-animations-effect
Magic CSS3 Animations 是一个特殊效果的CSS3动画库，你可以免费用于你的web项目。简单的引用CSS样式：magic.css或精简版magic.min.css即可。

 

  

7.Bounce.js

bounce-js

Bounce.js是一个用来生成不错的CSS3驱动关键帧动画的工具。用于生成动态动画的JS库是在该工具中投入使用。简单地添加一个组件，选择预设，然后你就会得到一个短URL地址或者导出到CSS。

 

8. ImaCSS

imacss

Imacss是用来将图像文件转换为数据地址的库和应用。该地址可以用来插入到CSS文件中作为背景图片。本质上来讲，它能让你减少所有你对你设计的图片（如图标等）的HTTP请求，并使之能够单个调用。

 

  

9.Buttons

buttons

Buttons是一个可以创建高度自定义、灵活和现代感十足的web按钮的CSS库。该库由Sass+Compass构建，支持正方形、圆角矩形或 者圆形的按钮，并且可选是否扁平以及其他自定义的效果（如发光）。所使用到的尺寸、颜色、效果和字体可以通过变量的帮助进行修改，并且可以非常容易的进行 扩展。

 

10.OdoMeter

odometer

OdeMeter是一个用来创建一些我们比较熟悉的如“汽车里程显示，机场信息板或角子机”等效果或者面板的JavaScript-CSS库。该库 是独立式+轻量级（3kb）的，使用CSS为效果进行转换，所以效率极高（当然也有回退设置）。它简单地将一个给定的元素转换到另一个具有单行函数的预定 义的值。

 

  
 

11. Single Element CSS Spinner

Single Element CSS Spinners
Single Element CSS Spinners是一个CSS螺旋动画加载的集合。每个旋转包含一个使用‘loader’ class的div，其文本内容为‘Loading…’。文本是为屏幕阅读器使用的且可用作老浏览器的后退的状态。

 

12. Ani.js

anijs
AniJS是一个CSS动画的声明处理库，它能够使开发更便利且能提高开发速度。它文档完善且易于上手。

 

  

13. Beautons

beautons
Beautons是一个用来创建漂亮、简洁按钮的易用库。你可以应用各种样式、函数已经其他的更多内容到按键上，包括改变它们的大小，设置它们的可用与否以及更多设置。

 

14. Saffron

Saffron
Saffron是一系列Sass混合器和助手集，能够使添加CSS3的动画和过渡非常简单。只需要包括一个mixin在SASS声明中，然后使用变量和混合参数设置一些配置。使用Saffron，你能够完全控制动画和过渡的行为。

 

  

15. CSS Shakes

CSS Shake
这是一个能够震动和晃动‘DOM’的CSS类集合。

 

16. Typebase.css

typebasecss
Typebase.css是个最小化的、可定制的字体样式表。它有less和SASS版本，所以能够很容易地修改融入现代的Web项目。它提供了所有排版 所必要的基础工具且不需添加其他任何设计内容。它被创建用来完成项目发展和成长期时的修改，能和normalize.css很好的工作。

 

  

17. Sassline

Sassline
在web上使用Sass & rems设置文本到基线网格。Sassline可以用在博客、prototyping以及其他Web项目。它有建议的基础字体样式和混合比例已达到基线网格的良好配合。为每个断点选择一个modular-scale，其运行响应将会更好。

 

18. TypeSettings

Typesettings
一个Sass工具包，基于modular scale有Ems风格，纵向风格，响应比基于headlines。

 

  

19. Type Rendering Mix

Type-Rendering-Mix
Type Rendering Mix是个小型的JavaScript库，它允许只有使用核心文本时（在iOS和OS X上）才应用样式，在实现更一致的渲染同时保持高精度原态。

 

20. Hint.css

hintcss
Hint.css是一个使用SASS构建只使用CSS和HTML的提示库。该库使用数据属性、内容属性、伪元素以及CSS3转换。提示框简洁漂亮，有箭头且可放置在父元素的任何一边。

 

  

转自： http://www.oschina.net/translate/css-libraries-for-developers

英文原文： 20 Useful CSS Libraries for Web Development

 



已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [web 开发 css] 推荐：

Web 开发中 20 个很有用的 CSS 库

- - Web前端 - ITeye博客
在过去的几年中，CSS已经成为一大部分开发者和设计者的最爱，因为它提供了一系列功能和特性. 每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发. 像CSS 库，框架，应用这样的工具能够为开发者做很多事，而且可以使开发者创造出创新立异的WEB应用. 在这篇文件章中我们找到了一系列对开发者有用的CSS库，它们能帮助开发者在一定的期限内取得有创造性和创新性的成果.

为什么 Web 前端开发不抛弃 HTML 和 CSS，用纯 JavaScript 开发？

- - 知乎每日精选
首先要确定，即使抛开游戏不论，一般的Web应用或者网站，完全用JavaScript开发也是可行的. 比如ExtJS、webOS的Enyo等. 但是主流Web开发很少采用全JS的方案. 注重考虑那些无法运行JS的用户代理. 用户使用不支持JS的浏览器（比如较老的手机浏览器），或者禁用脚本. 当然你可以选择忽略这一小撮用户，尤其是现在绝大多数网站和应用也是如此选择的，但是至少我们应该对坚持考虑无JS情况的开发者予以基本的尊重.

【Web 开发必备】 史上最全的浏览器 CSS & JS Hack 手册

- - 博客园_首页
　　浏览器渲染页面的方式各不相同，甚至同一浏览器的不同版本（“杰出代表”是 IE）也有差异. 因此，浏览器兼容成为前端开发人员的必备技能. 如果有一份浏览器 Hack 手册，那查询起来就方便多了. 这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack，记得推荐和分享啊.

提高 web 应用性能之 CSS 性能调优

- Vingel - IBM developerWorks 中国 : 文档库
随着 Web 2.0 应用越来越流行，Web 的 CSS 样式在 Web 2.0 应用也变得越来越重要，好的 CSS 样式不仅能美化 Web 2.0 应用，也能优化用户的体验. 但是，大多数 Web 开发工程师很少关注 CSS 样式，这也导致项目中经常出现杂乱，不规范的 CSS 代码，使得维护起来越来越麻烦.

(转)豆瓣css开发规范

- Hu DongHai - 小豪~麦穗的部落格
今天无意间看到了豆瓣的一些前端开发规范，攻城师作战指南. 里面的Javascript代码风格规范 差不多就是基本的javascript规范，主要还是分享一下 css部分的规范. 因为规范是在google docs上，需要穿过篱笆，所以我就直接帖过来了，一起学习一下哈. ——————————————–华丽的分割线————————————————.

10 个加速 CSS 开发的框架

- Tairan Wang - ITeye资讯频道
CSS 可以做很多事情，但开发者更习惯的是变量、常量和一般的更快速的语法，而 CSS 本身是不支持的. 本文介绍了 10 个 CSS 预处理器，让 CSS 支持一些简单的编程语法，使Web开发更高效. Compass 是一个开源的 CSS 制作框架. 针对个人框架开发时，其非常简单、易用. 这是一个很棒的 CSS 预处理器，可以让开发者制作插件，要求 PHP 以及 Apache (mod_deflate 和 mod_rewrite).

网易邮箱的CSS开发（一）

- - 博客 - 伯乐在线
网易邮箱是个庞大而且细节繁多的系统，注定了前端开发中样式管理的复杂程度非常高. 如果没有一个合理的体系来管理样式，开发和维护的难度是不可想象的. 从极速3.5版本开始，我们就一直遵循并不断改善这套规则，现在就来分享一下~. 在错综复杂的样式面前，CSS显得过于简陋. 于是我们不得不人为的加上一些思维方式和规则来帮助我们管理样式.

高效CSS开发核心要点

- - blog.moocss.com
本文参考了业界规范及主流趋势，详尽整理了CSS开发中需要注意的要点以及关乎性能的一些问题，希望对您有所帮助，也可收藏作为参考. 本文来源：http://www.ituring.com.cn/article/1745. 1.1 把CSS放在HTML页面头部. 由于浏览器需要在所有的样式表加载完成后才能开始渲染页面，样式表加载完成之前页面会一直显示空白，因此需要将样式表放在头部.

Web开发入门（转载）

- linchanx - Starming星光社最新更新
Web应用的竞争异常激烈，开发难度也是入门容易做好很难，所以第一次开发的应用不成功是很正常的事情. 不过这正是一个积累的过程，反正你需要的只是电脑和少量服务器经费，所以多磨练几次，水平自然会提高. 2, 习惯阅读及查阅英文资料. 前沿信息基本源自美国，翻译的东西不及时，不全，很多水平不高，再加之中文原创资料毕竟很有限，因此是否能熟练地查阅英文资料决定了你获取信息的 及时性和质量.

Spring MVC 与 web开发

- - 码蜂笔记
项目组用了 Spring MVC 进行开发，觉得对里面的使用方式不是很满意，就想，如果是我来搭建开发环境，我会怎么做. 下面就是我的想法，只关注于 MVC 的 View 层. 现在基本上都是用 ajax 来调用后台接口，拿到 json格式的数据再展示，有的人直接返回数据，却没有考虑异常的情况，我觉得返回的报文里必须包含表示可能的异常信息的数据和业务响应数据.