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 set up a basic project through the Foundation CLI with this command:
foundation new --framework sites --template basic
You can manually install the template with:
# Download the template with Git git clone https://github.com/zurb/foundation-sites-template projectname # Move to the project folder, and install dependencies cd projectname npm install # Build the Sass files npm start
Your project will be recompiled every time you save a Sass file in `dist/.
You can set up an advanced project through the Foundation CLI with this command:
foundation new --framework sites --template zurb
You can manually install the template with:
# Download the ZURB template with Git git clone https://github.com/zurb/foundation-zurb-template projectname # Move to the project folder, and install dependencies cd projectname npm install # Build the project npm 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
npm run build.
To override or add to the default styles of the ZURB Template, in your project's
- Change Sass variables in
- Add custom SCSS and css to new files in the
componentsfolder then import those files at the bottom of
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:
Gulp will copy anything out of the
src/assetsfolder as-is to the
src/directory includes three folders used to create HTML pages:
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 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
nestedstyle, 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.
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.jsis 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:
By default, all images are copied as-is from
distfolder. When building for production, images are run through gulp-imagemin for compression. The plugin supports JPEG, PNG, SVG, and GIF files.
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
src/styleguideare 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.
- What the ZURB Stack Does via ZURB
- Overview of Foundation's ZURB Stack and File Structure via ZURB
- All about the ZURB Template via Kevin Ball