- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Starter Projects
You can start 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 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.
ZURB Template
It is a combination of CSS/SCSS, JavaScript, Handlebars template, markup structure, image compression and 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 language.
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.