1. 安装Node.js和NPM
如果你已经拥有Node.js和NPM系统上安装跳过此步骤。 否则你需要先在系统上安装Node.js。使用以下命令集你在CentOS，RHEL系统上安装Node.js和NPM。 # yum install -y gcc-c++ make # curl -sL https://rpm.nodesource.com/setup_6.x | sudo -E bash - # yum install nodejs
2. 安装使用Grunt NPM
现在，使用下面的命令来安装Grunt和GruntCLI使用NPM命令行工具。 # npm install -g grunt
安装成功后，请确保Grunt已安装成功，并检查版本。 $ grunt --version grunt-cli v1.2.0
首先我要安装Foundation for Apps并创建项目请确保您已经安装Ruby（OS X已默认安装）Node.js遵循Foundation for Apps详细文档四步骤即便前没使用命令行程十简单完该些步骤浏览器输入!/即看应用程序默认主页
Foundation for Apps默认主页
让我熟悉项目文件文件夹
应用程序根目录唯需要我注意文件gulpfile.js向Gulp构建程发送指令让其应用启服务Gulp构建系统与Grunt非相似稍我想添加些AngularJS模块或插件通JavaScript、CSS文件（引用些模块或插件）更新该Gulp文件
Cient文件夹能找其我关注文件夹：
clients/assets/js/app.js应用程序控制器、指令自定义滤器该文件；
应用程序所SCSS文件都存放clients/assets/scss；
clients/index.html应用程序主页模板；
clients/templates/找所页面模板其数未创建
构建模板主页面
让我始构建吧index.html页面满足实际应用需要所首先修改该页面我针尺寸屏幕增加Off-Canvas菜单、切换按钮及漂亮淡入淡效（利用Foundation for AppsMotion UI类式实现）直接Github repositoryindex.html文件复制些代码
_settings.scss文件添加些SCSS变量设置颜色、字体断点：
[js] view plaincopy
$primary-color: #000
$secondary-color: #ffe306
$body-background: $secondary-color
$breakpoints: (
small: rem-calc(600),
medium: rem-calc(900),
large: rem-calc(1200),
xlarge: rem-calc(1440),
xxlarge: rem-calc(1920),
)
$h1-font-size: rem-calc(80)
$body-font-family: "brandon-grotesque", Helvetica, Arial, sans-serif
$header-font-family: "flood-std", Helvetica, sans-serif
现我要加点料美化app.scss直接参考Github repository该文件
接快速重写默认home.html文件该文件clients/templates/ 目录目录列所要建页面链接菜单：
[js] view plaincopy
---
name: home
url: /
---
Star Wars Compendium
Foundation for Apps using Star Wars API
Films
Species
Planets
People
Starships
Vehicles
我模板现看起已经相别致——再千篇律Foundation
首先，我们要安装Foundation for Apps并创建项目。请确保您已经安装了Ruby（OS X已默认安装）和Node.js，然后遵循Foundation for Apps详细文档中的四个步骤。即便你以前没使用过命令行，这个过程也十分简单。当你完成该些步骤后，在浏览器中输入“http://localhost:8080/#!/”，即可看到应用程序的默认主页。Foundation for Apps的默认主页
让我们熟悉一下项目里的文件和文件夹。
应用程序根目录中唯一需要我们注意的文件是gulpfile.js，它向Gulp构建过程发送指令，让其为应用启动服务。Gulp是一个构建系统，与Grunt非常相似。稍后，如果我们想添加一些AngularJS模块或插件时，可以通过JavaScript、CSS文件（引用了这些模块或插件）来更新该Gulp文件。
Cient文件夹里能找到其它我们关注的文件夹：
clients/assets/js/app.js，应用程序的控制器、指令和自定义过滤器在该文件中；
应用程序的所有SCSS文件都存放在clients/assets/scss里；
clients/index.html是应用程序的主页模板；
在clients/templates/中可以找到所有页面的模板，其中大多数还未创建。
构建模板和主页面
让我们开始构建吧！index.html页面无法很好地满足实际应用的需要，所以首先修改该页面。我们针对小尺寸屏幕增加了Off-Canvas菜单、切换按钮及漂亮的淡入淡出效果（利用Foundation for Apps中“Motion UI”的类样式实现）。你可以直接从Github repository中index.html文件里复制这些代码。
在_settings.scss文件中添加一些SCSS变量来设置颜色、字体和断点：
[js] view plaincopy
$primary-color: #000
$secondary-color: #ffe306
$body-background: $secondary-color
$breakpoints: (
small: rem-calc(600),
medium: rem-calc(900),
large: rem-calc(1200),
xlarge: rem-calc(1440),
xxlarge: rem-calc(1920),
)
$h1-font-size: rem-calc(80)
$body-font-family: "brandon-grotesque", Helvetica, Arial, sans-serif
$header-font-family: "flood-std", Helvetica, sans-serif
现在我们要加点儿料美化一下app.scss。你可以直接参考Github repository中的该文件。
接下来，快速重写默认的home.html文件，该文件在clients/templates/ 目录下，此目录列出了所有要建页面的链接菜单：
[js] view plaincopy
---
name: home
url: /
---
<div class="grid-content">
<h1>Star Wars Compendium</h1>
<p class="lead">Foundation for Apps using Star Wars API</p>
<hr>
<ul class="home-list">
<li><a ui-sref="films">Films</a></li>
<li><a ui-sref="species">Species</a></li>
<li><a ui-sref="planets">Planets</a></li>
<li><a ui-sref="people">People</a></li>
<li><a ui-sref="starships">Starships</a></li>
<li><a ui-sref="vehicles">Vehicles</a></li>
</ul>
</div>
我们的模板现在看起来已经相当别致——不再是千篇一律的Foundation。
