一、Grid Guide

十个免费的web前端开发工具

        特点:快速生成栅格

网络技术发展迅速,部分技术难以保持

二、Foundation

每年都有新的工具出现,这同时也意味着许多旧的工具倒在了新技术的发展之路上。

       
特点:一款类似Bootstrap的框架,有为栅格、排版、按钮和其它动态元素的预定义CSS类。但是它的设计更加简单,更加容易去自定义布局。

前端开发占据了web很大一部分,而且也成为了一种职业路径。如果你将前端开发当做自己的又一新技术或者作为一个可发展事业,你需要为这个工作准备合适的工具。

三、CodePen

我将要分享我的十大现代必备的前端开发工具。它们都完全免费而且大多数工具能帮助你建立令人惊叹的网站。

       
特点:实现新创意代码,它启动迅速,十分可靠,易于启动且当你改动代码时会自动更新。还能支持几乎所有的库,可以添加外部资源。

1. Grid Guide

四、Unheap

特性: 快速生成栅格

        特点:最新的jQuery插件库

首先我要介绍的是Grid.Guide,一款免费的网页应用,能让你在线生成栅格。这个小巧的应用能让你通过自定义间距和列数建立你自己的栅格方案。

五、LivePage

首先输入你的网站的首选宽度和列数总数,然后Grid
Guide就会生成一些选项供你选择。

        特点:自动刷新浏览器

你甚至可以将每种栅格方案的下载为PNG图片,用于导入Photoshop或Illustrator。这使你能更加轻松的创建栅格,而不必手动计算或者依赖栅格库。

六、Fullpage Screen Capture

2. Foundation

        特点:捕获全屏

特性: 一款类似Bootstrap的框架

七、WhatFont

我不得不承认大多数前端开发者更喜欢使用Bootstrap框架。但是在But Zurb的
Foundation最近全面更新之后,我认为它值得受到大家的关注。

        特点:在网络上找到的最棒的字体

Foundation框架跟Bootstrap一样,有为栅格、排版、按钮和其它动态元素的预定义CSS类。但是它的设计更加简单,所以它不像一般的框架一样,更加容易去自定义布局。

八、Node/npm

而且新的Foundation还有一个姐妹框架叫做Foundation for
Email。这是一个专门为电子邮件界面开发而使用的框架。

        特点:命令行

这两种Foundation框架都十分棒而且它们由Zurb的团队进行维护更新。

九、Mobile Speed Tester

澳门新葡亰游戏网址,3. CodePen

        特点:手机监测

特性: 实现新创意代码

十、Responsive Test

大多数开发者都知道使用 cloud
IDEs做前端开发十分轻便。通过它你可以在任何电脑上写代码,保存你的项目到云端上且分享。

        特点:测试站点响应速度

但即使有这么多种选择,我不得不说CodePen是最棒的。它启动迅速,十分可靠,易于启动且当你改动代码时会自动更新。

更不用说它还能支持几乎所有你能想到的库。你可以通过预置HTML模板语言例如Haml或Slim,使用LESS或SASS编译代码。而且CodePen允许你添加外部资源,因此你可以使用像cdnjs的网站去载入其他相关的库。

无疑地这是最棒的专为写代码和实现新想法的开发工具。虽说也有一些类似的工具,但在我看来没有比CodePen更好的了。

4. Unheap

特性: 最新的jQuery插件库

去寻找一个在策划列表中的最新JS插件是很困难的。大多数情况下你只能浏览Github上比较热门的插件或在Twitter上查看一些热门项目。

但是,有了例如 Unheap
等这类网站,你可以轻松快速的找到最新的jQuery插件。它们有导航、表单、网页媒体和其他分类等各种类型的插件。

它基本上是一个拥有着网络上所有最佳的jQuery插件的存储库,而且它经常更新,所以你总能找到各种新的插件。

5. LivePage

特性: 自动刷新浏览器

一些浏览器插件是你用于开发的最佳工具。LivePage
就是一种免费的谷歌扩展插件,能在你对本地文件做出修改后自动刷新你的页面。

网站地图xml地图