3

PaceVexMessenger

Hubspot 公司有3个很好的JavaScript库。 它们的使用方法都简单、灵活和易于完成目标。

Pace 是用于快速创建进度条的库,它有很多的进度条的表现方式,一定有一款适合你。

clipboard.png

Vex 号称21世纪的对话框。它以友好的交互和界面取代浏览器自带的对话框,使网站在跨浏览器时表现一致,并且更友好。

clipboard.png

Messenger 是一个消息框库,以良好的界面和交互效果给用户提供更好的服务。有JavaScript版本和CoffeeScript版本,方便前端开发者选择。开发文档有很多实用的demo可供参考。

clipboard.png

Flat UI Free 2.2

clipboard.png

Flat UI Free是由一个很受欢迎的设计师资源网 Messenger  开发的扁平化 UI 库。 项目库已更新到2.2版本。 支持Twitter 的 Bootstrap,还有很多的新元素和字体。 这个项目在GitHub上得到了超过9000个星。

Framer

clipboard.png

由 Koen Bok 开发的虚拟交互式、动画式产品原型设计工具。 应用可与Photoshop同步,把所有的图层切割并保存为PNG格式的图片,用z-index 标记层次,用CSS 3D矩阵变形做动画。 然后每个所有人都能用JS实现交互式的原型。

同时我要提一下Framer作者的另一个项目——Cactus。 这是为设计师的准备的静态网站生成器。 它使用的模板。

clipboard.png

BlendMeIn

clipboard.png

它提供许多Photoshop和Illustrator的图标包,是个免费的插件。
(译者注:此插件已经停止更新,作者推荐这样的方法:https://helpx.adobe.com/creative-cloud/how-to/assets-get-started.ht

Editr

clipboard.png

你可以自己组装像 CodePen、JSFiddle 那样的 HTML、CSS 和 JavaScript  的 实时编辑器。 这是个基于 ACE Editor 的高质量、界面漂亮的工具。 功能包括:代码验证,支持Emmet,64编码,LESS、CofeeScript 等语言,还有很多主题皮肤供选择。

Responsive elements

clipboard.png

简单好用的创建响应式标签的jQuery插件。 你要做的是给指定元素添加data-respond属性和.gt .lt类,就像min-widthmax-width

.quote.lt500 {background: blue}

.quote.gt150.lt300 {background: red} /* min

Trunk

这个jQuery插件可以帮助创建自适应的菜单。 项目主页有很棒的Demo会让你很想尝试一下。

clipboard.png

也有类似的插件,功能更加丰富,原生JavaScript写的库——Responsive-nav

Composite

另一种创建动态模型的方式。 Composite 通过 Bonjour 远程连接 Photoshop。 这看起来很赞!

clipboard.png

Brace

Brace 是搭建网站的心方式。在你的 Dropbox 里编辑网站即可发布。不需要杂乱的 FTP 或者 命令行操作。
(译者注:很可惜,Brace于今年一月也say goodbye了)

其他

  • Polymer —— 基于 Web Component 的新型web框架。

clipboard.png

  • Fireshell —— 远远超过现有的 HTML5 Boilerplate。

clipboard.png

  • CLNDR.js —— 一个高质量、功能丰富的日历脚本。

clipboard.png

  • Simperium —— 帮助开发者自由地、及时地、自动地移动数据。

clipboard.png

  • Learnyounode —— 在你的命令行里学习Node.js的工具。

clipboard.png

英文原文:Awesomeness & Usefulness for Web Developers #4
SegmentFault整理编译


江小湖Laker
6.9k 声望371 粉丝

进击的程序媛快去创造奇迹~