Our project templates give you a solid… Foundation on which to start a new project. Both templates use the Gulp build system to automate the process of compiling Sass, processing JavaScript, copying files, and more.
Our basic project template is a lot like the Sass template from Foundation 5. The project has a flat directory structure and only compiles Sass. It’s great if you want to quickly put together a simple project and only need to use Sass.
You can manually install the template with:
# Download the template with Git
git clone https://github.com/foundation/foundation-sites-template projectname
# Move to the project folder, and install dependencies
cd projectname
yarn
# Build the Sass files
yarn start
Your project will be recompiled every time you save a Sass file in `dist/.
The official ZURB Template includes not only Sass processing, but also JavaScript processing, Handlebars templating, and image compression. We use this exact template at ZURB for our client work!
You can manually install the template with:
# Download the ZURB template with Git
git clone https://github.com/foundation/foundation-zurb-template projectname
# Move to the project folder, and install dependencies
cd projectname
yarn
# Build the project
yarn start
Once compiled, you project is viewable at: http://localhost:8000
The biggest difference between this and the basic template is the folder structure. In the ZURB Template, your project has a src/ folder which contains your source files, and a separate dist/ folder with your finished website. As you work on your project, Gulp continuously updates your dist/ folder with new versions of files. To compile a production build, run yarn build.
To override or add to the default styles of the ZURB Template, in your project’s src/assets/scss/ folder
_settings.scsscomponents folder then import those files at the bottom of app.scssThe _settings.scss and app.scss files are not changed when upgrading an existing project. As a result, you must manually edit your _settings.scss file to incorporate any Sass changes found in the release notes.
Here’s an overview of what the ZURB Template can do:
Asset Copying
Gulp will copy anything out of the src/assets folder as-is to the assets folder of your final project. Note that Sass files, JavaScript files, and images are not part of this copying process, as they have their own steps.
Page Compilation
The src/ directory includes three folders used to create HTML pages: pages/, layouts/, and partials/. A flat file compiler called Panini is used to process your project’s various pages, inserting them into a common template, and injecting any HTML partials. This is done with a templating language called Handlebars.
Panini has a dedicated page here in the docs that explains its various features. Learn more about Panini.
Sass Compilation
Sass is compiled to CSS using Libsass (via node-sass). The main Sass file is under src/assets/scss/app.scss, and imports Foundation and Motion UI. Any new Sass partials you create should be in this folder as well.
The CSS is output in the nested style, which is readable like normal CSS. A source map is also created, which can be read by developer tools such as the Chrome Web Inspector. When building for production, the CSS is also compressed with clean-css, and pruned with UnCSS. UnCSS scans the HTML of your pages and removes any CSS classes you didn’t use.
JavaScript Compilation
JavaScript is transpiled using Babel (with the es2015 plugin) so you can use ES2015 features.
The main Js file is under src/assets/js/app.js, and imports Foundation, jQuery and whatInput. You can import there installed packages and custom files, they will be included in the build.
A source map is created that maps back to the original files. By default, the bundled app.js is uncompressed. When building for production, the file is run through UglifyJS for compression.
The whole bundling process is handled by webpack: it manages all assets and dependencies for you and compiles them into one single file. If you’re unfamiliar with imports or module bundling, check out:
Image Compression
By default, all images are copied as-is from assets/img to your dist folder. When building for production, images are run through gulp-imagemin for compression. The plugin supports JPEG, PNG, SVG, and GIF files.
BrowserSync
The template creates a BrowserSync server, which is at http://localhost:8000. Load this URL to see your compiled templates. While the server is running, any time you save a file, any pages you have open will automatically refresh, allowing you to see changes in real-time as you work.
Style Guide Creation
Under src/styleguide are two files to create a style guide for your project. The style guide is generated using Style Sherpa, a small plugin created by ZURB.
Style Sherpa has a dedicated page here in the docs that explains its various features. Learn more about Style Sherpa.