如题所述
首先我要安装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