Foundation - Starter Projects

You can startup with your project development with some available templates which can be installed through Yeti Launch or Foundation CLI. You can start with the new project by using these templates by using Gulp build system for the processing of the Sass, JavaScript, copying files etc.

Basic Template

The basic template is something like SASS template which includes flat directory structure and compiles only SASS files and it's good to have this simple template while using only SASS. You can use the basic template by using Yeti Launch or using Foundation CLI using the below command:

$ foundation new --framework sites --template basic

To set up this, first run the npm install, bower install and use the npm start command to run it. You can also download the template files from the Github.

ZURB Template

It is a combination of CSS/SCSS, JavaScript, Handlebars template, markup structure, image compression and also uses SASS processing. You can use the ZURB template by using Yeti Launch or using Foundation CLI using the below command:

$ foundation new --framework sites --template zurb

To run this template, follow the same steps specified in the basic template. You can also download the template files from the Github.

Asset Copying

You can copy the content in the src/assets folder using Gulp in which assets will be your project folder. Important thing here is, the SASS files, JavaScript files and images will not come under this asset copying process as they will be having their own process to copy the content.

Page Compilation

You can create HTML pages under three folders namely pages, layouts and partials which resides inside the src/ directory. You can use the Panini flat file compiler that creates layouts for pages by using templates, pages, HTML partials. This process can be done by using Handlebars templating langauge.

Sass Compilation

You can compile the SASS to CSS using Libsass and the main SASS file will be stored under src/assets/scss/app.scss and also newly created SASS partials will be stored under this folder itself. The output of CSS will be like normal CSS which is in the nested style. You can compress the CSS with clean-css and removes the unused CSS from the stylesheet using UnCSS.

JavaScript Compilation

The JavaScript files will be stored under src/assets/js folder along with Foundation and all dependencies are tied together into app.js file. The files will be tied together as specified in the below order:

• Dependencies of Foundation.
• Files will be stored under src/assets/js folder.
• The files are bundled into one file called app.js.

Image Compression

By default, all images will be stored under assets/img folder under dist folder. You can compress the images while building for production using gulp-imagemin which supports JPEG, PNG, SVG and GIF files.

BrowserSync

You can create a BrowserSync server which is synchronized browser testing available at http://localhost:8000 and able to see the compiled templates using this URL. While your server is running, the page refreshes automatically when you save the file and you could see the changes made to the page in real time as you work.