开发手册 欢迎您!
软件开发者资料库

Foundation - 入门项目

Foundation Starter Projects - 从基本到高级概念的简单简单步骤学习Foundation,其中包括概述,安装,入门项目,厨房水槽,全局样式,Sass,JavaScript,JavaScript实用程序,媒体查询,网格,Flex网格,表单,可见性类,基本排版,排版助手,按钮,按钮组,关闭按钮,滑块,开关,导航,菜单,下拉菜单和向下钻取菜单,手风琴菜单,响应导航,麦哲伦,分页,面包屑,容器,手风琴,标注,下拉菜单-panes,媒体对象,画布,显示模态,表格,标签,Flex视频,标签,轨道,进度条,工具提示,插件,遵守,均衡器,交换,Toggler,粘滞,Sass功能和Mixins,运动UI。

您可以使用一些可用的模板开始项目开发,这些模板可以通过 Yeti Launch 或基础CLI .您可以使用这些模板开始使用这些模板,使用 Gulp 构建系统来处理Sass,JavaScript,复制文件等.

基本模板

基本模板类似于SASS模板,它包含平面目录结构并且只编译SASS文件,在仅使用SASS时使用这个简单模板是很好的.您可以使用Yeti Launch或使用Foundation CLI使用基本模板,使用以下命令 :

$ foundation new --framework sites --template basic

要设置此项,首先运行 npm install bower install 并使用 npm start 命令运行它.您还可以从 Github 下载模板文件.

ZURB模板

它是CSS/SCSS,JavaScript,Handlebars模板,标记结构,图像压缩的组合,并使用SASS处理.您可以使用 Yeti Launch 或使用 Foundation CLI 使用以下命令 :

$ foundation new --framework sites --template zurb

要运行此模板,请按照基本模板中指定的相同步骤操作.您也可以从 Github 下载模板文件.

资产复制

您可以使用 Gulp 复制 src/assets 文件夹中的内容其中 assets 将成为您的项目文件夹.重要的是,SASS文件,JavaScript文件和图像不会受到此资产复制过程的影响,因为他们将拥有自己的复制内容的过程.

页面编译

您可以在三个文件夹下创建HTML页面,即页面布局部分,它们位于 src/目录.您可以使用 Panini 平面文件编译器,通过使用模板,页面为页面创建布局,HTML部分.此过程可以使用 Handlebars 模板语言完成.

SASS编译

您可以使用 Libsass .

JavaScript编译

JavaScript文件将与Foundation一起存储在 src/assets/js 文件夹下,并且所有依赖项都绑定到 app.js 文件中.文件将按照以下顺序和减号中的规定捆绑在一起;

  • 基金会的依赖性.

  • 文件将存储在 src/assets/js 文件夹下.

  • 这些文件捆绑在一个名为 app.js 的文件中.

图像压缩

默认情况下,所有图像都将存储在 assets/img dist 文件夹下的文件夹.您可以使用支持JPEG,PNG,SVG和GIF文件的 gulp-imagemin 在构建生产时压缩图像.

BrowserSync

您可以创建一个 BrowserSync 服务器,该服务器是 http提供的同步浏览器测试://localhost:8000 并且能够使用此URL查看已编译的模板.当您的服务器运行时,页面会在您保存文件时自动刷新,您可以在工作时实时看到对页面所做的更改.