Menu icon Foundation
How to start with Foundation 6 - little guide

The new starter kit is awesome. Here is a quick guide for those who don't know what to do and want to run starter kit with:

- Asset Copying
- Page Compilation
- Sass Compilation
- JavaScript Compilation
- Image Compression
- BrowserSync (live reload etc.)

What you need to do is (command line without foundation cli tool):

1. You need to have 'npm' and 'bower' installed

2. Download the Zurb template from the separate github repo:
https://github.com/zurb/foundation-zurb-template/archive/master.zip
this is advanced starter kit - ZURB template

3. Extract the package and go to the extracted folder

4. Run:

npm install
bower install

5. To run your project type

npm start

You will get live reload and you can go to localhost:8000 You can edit your files in the src folder using templates, layouts and partials which is realy cool. Read more about Panini. Then if you are ready you can build your project for production.

6. If you need to build it for production run:

npm run build

You will get your ready to use files in the dist folder with commpresed assets etc.
You can also use the Foundation tool for that but I think this is a realy fast and simple way of doing it.
I hope the ZURB template repo will be up to date with new Foundation because there is still bersion 6.0.0

More in the docs: http://foundation.zurb.com/sites/docs/starter-projects.html#zurb-template

foundation6Handlebarstemplatepanini

The new starter kit is awesome. Here is a quick guide for those who don't know what to do and want to run starter kit with:

- Asset Copying
- Page Compilation
- Sass Compilation
- JavaScript Compilation
- Image Compression
- BrowserSync (live reload etc.)

What you need to do is (command line without foundation cli tool):

1. You need to have 'npm' and 'bower' installed

2. Download the Zurb template from the separate github repo:
https://github.com/zurb/foundation-zurb-template/archive/master.zip
this is advanced starter kit - ZURB template

3. Extract the package and go to the extracted folder

4. Run:

npm install
bower install

5. To run your project type

npm start

You will get live reload and you can go to localhost:8000 You can edit your files in the src folder using templates, layouts and partials which is realy cool. Read more about Panini. Then if you are ready you can build your project for production.

6. If you need to build it for production run:

npm run build

You will get your ready to use files in the dist folder with commpresed assets etc.
You can also use the Foundation tool for that but I think this is a realy fast and simple way of doing it.
I hope the ZURB template repo will be up to date with new Foundation because there is still bersion 6.0.0

More in the docs: http://foundation.zurb.com/sites/docs/starter-projects.html#zurb-template

Chris Oyler over 3 years ago

Thanks for this! I'll point people here until we get our tutorials put together.

Julian Ćwirko over 3 years ago

Yeah, I think there is a need for some well promoted, good article(s) (or videos, not only the docs), about working in such environment. Because many people goes from the ground where there is only css and js folders + html static files. This whole 'starter kits' and templates workflow is the area where Foundation shines and it is a real 'foundation' for any project. At least for me. This is the complete frond-end workflow and it needs to be promoted. I am glad that you have released Yeti Launch too. This is a win :) But still, I think that this kind of workflows need to be strongly promoted. I mean command line workflow and your Apps at the same time... I am sure that for some this kind of knowledge is very obvious but I think for majority it isn't :)

powellian over 3 years ago

Thanks for this Julian, very helpful and worked first time for me.

I def feel this should be promoted or even added as part of the official documentation as currently the cli guide is a bit wooly.

I use cli all the time but i battled with this: 'foundation.zurb.com/sites/docs/installation.html' - your guide is much clearer!

Julian Ćwirko over 3 years ago

I have published a blog post titled: "What I like the most about the new Foundation 6" there is also a little tutorial how to use starter kit.

http://julian.io/what-i-like-the-most-about-the-new-foundation-6/

Knight Yoshi over 3 years ago
Julian Ćwirko over 3 years ago

yes, ZURB Template uses BrowserSync

Oliver Maaker over 3 years ago

Thank you so much Julian, it finally works! (edit: I mean, I finally got it to work :)

BTW, don't know if it is worth mentioning, but I had to run CMD as administrator, otherwise the "npm istall" didn't complete. (Windows 10)

Jay Dcoder over 3 years ago

do you also have guide using foundation 6 sass?

atelier over 3 years ago

@ julian
I am one of this *mayority', and feel 'outside' because of lack of knowledge.
A 'manual' would certainly help, so yes, please.....

Like, I lost you already here on http://julian.io/what-i-like-the-most-about-the-new-foundation-6/

 'After that you should go to the folder and run

$ npm install
$ bower install

Have absolutely on idea what you are talking about.
BTW I am on a Mac, MacOsX 10.10.5

Julian Ćwirko over 3 years ago

@atelier you need to run 'npm install' and 'bower install' in the app folder. These are command line commands. You will also need npm command line tool installed and the same with bower command line tool

atelier over 3 years ago

OK. I never got this *Yeti launch' installed because of a error that I did not understand. I might try again.
(But I actually prefer to install on a server ordinary plain HTML JS CSS files because I understand and see then what is going on. ;-)

Albin Metthey over 3 years ago

Thx for the tips ! i'm doing it right now !

Klevis Miho over 3 years ago

There should be more documentation on Panini. There are a lot of things I grasped by trial and error.

Julie Lewis over 3 years ago

What I would really like is information on how to remove handlebars/panini from the equation.

I love SASS and I'd love a turnkey way to do a production deployment that automatically adds UNCSS and Uglify.js to the mix.

But I really don't see how forcing our devs to learn markdown and handlebars, then do a gulp compile, helps us do static html pages. They already know how to insert HTML into PHP templates.

I just don't get the benefit of a "static site compiler", and I'd rather not have all the extra cruft in my file structure.

Rafi Benkual over 3 years ago

@Julie Lewis This might be a better discussion for a different thread. Not sure.

I can see that if you are already set in your workflow with PHP, then perhaps you wouldn't need the SSG stuff in Panini.

You could change the Gulpfile to just copy your pages over rather than process them into flattened files here: https://github.com/zurb/foundation-zurb-template/blob/master/gulpfile.js#L81

Then remove all the copy tasks from line 83-87
https://github.com/zurb/foundation-zurb-template/blob/master/gulpfile.js#L83

Since the ZURB stack already runs it's own server, you'll remove that too: https://github.com/zurb/foundation-zurb-template/blob/master/gulpfile.js#L167

Hope this helps!