Foundation - Starter Projects
The basic template is something like SASS template, which includes the flat directory structure and compiles only SASS files and it is 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 following 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.
$ 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.
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 language.
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.
- Dependencies of Foundation.
- Files will be stored under src/assets/js folder.
- The files are bundled into one file called app.js.
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.
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.