前端开发利器推荐框架工具

Webflow

通过这些服务，一个没有HTML/CSS知识的人，就能在55分钟内搭建一个跨浏览器的页面。这是为网页设计师准备的完美解决方案，已经有超过人在使用Webflow。只能免费创建两个项目，想要创建更多项目的收费也很合理。这个工具真的很酷。

如果你和我一样是个不喜欢GUI的前端，就可以在Webflow上导出几个免费的响应式布局模板。我还想推荐sponsivelayoutgenerator和ResponsivePatterns。

Parallax.js

功能强大、使用简单的视差效果库。

可以给所有的元素应用视觉差效果，通过设置data-depth控制速度。Parallax.js有一系列的参数：

ulid="scene"data-calibrate-x="false"data-calibrate-y="true"data-invert-x="false"data-invert-y="true"data-limit-x="false"data-limit-y="10"data-scalar-x=""data-scalar-y="8"data-friction-x="0."data-friction-y="0.8"liclass="layer"data-depth="0.00"imgsrc="layer6.png"/liliclass="layer"data-depth="0.0"imgsrc="layer5.png"/liliclass="layer"data-depth="0.40"imgsrc="layer4.png"/liliclass="layer"data-depth="0.60"imgsrc="layer3.png"/liliclass="layer"data-depth="0.80"imgsrc="layer.png"/liliclass="layer"data-depth="1.00"imgsrc="layer1.png"/li/ul

传递父元素：

varscene=document.getElementById(scene);varparallax=newParallax(scene);

Intention.js

很小，但很有用的库，简化了创建完全自适应布局的开发过程。用起来很简单。操作原理如图所示：

Device.js

该脚本类似Modernizr，包含了ios/android/windows/blackberryphone/tabletlandscape/portrait的HTML类。

谈到跨设备开发，我想提及Risizer-响应设计测试的工具。有很多类似的服务，但是我认为这种方法是最方便的。

GistBox

GistBox能同步你的Github的Gist。可以通过标签排序，管理方便，随时查看。它是一个Chrome扩展。

CSSModal

起初，该项目是由一个团队成员创建的HTML5样板。CSSModal-轻松让网站能自适应窗口变化。首先要添加此代码：

sectionclass="semantic-content"id="modal-text"tabindex="-1"role="dialog"aria-labelledby="modal-label"aria-hidden="true"divclass="modal-inner"headerid="modal-label"!--Header--/headerdivclass="modal-content"!--Themodalscontent--/divfooter!--Footer--/footer/divahf="#!"class="modal-close"title="Closethismodal"data-close="Close"data-dismiss="modal"×/a/section

然后在body的结束标记之前添加modal.js。这是完成了！

Dotdotdot.js、Uikit、HTMLPDF

最近，我需要用省略号来表明有更多的文字。但标准文本溢出只能在一句中。我发现一个好脚本dotdotdot.js，它完美地解决了这个问题。

UIKit——轻量级的web开发框架。

HTMLPDF——基于phantom.js。还可以在线把HTML转换成PDF。