Menu icon Foundation
My Yeoman Workflow

Update (01.11.2015): http://julian.io/foundation-5-and-yeoman/

This is a short description on how you can work with Yeoman generator for Zurb Foundation 5.

1. sudo npm install yo
2. sudo npm install generator-zf5
3. yo zf5
4. sudo npm install (if needed because of permissions errors)
5. grunt

Now you have open browser with livereload and sass compiler which is watching for your changes
If you want to install some of third party libraries just:

6. bower search [name it]
7. bower install [library name] --save
8. grunt bower-install

Now you have your library's js and css paths injected into html files
You can now publish your work..

9. grunt publish

Now you have all files copied and all assets minied and concatenated in dist folder
You can now preview your work from dist folder

10. grunt server-dist

Now you have open browser with project from dist folder (view page source)

Github: https://github.com/juliancwirko/generator-zf5

You can test it and send me your opinions. Thanks.

yeomangeneratorgenerator-zf5zf5

Update (01.11.2015): http://julian.io/foundation-5-and-yeoman/

This is a short description on how you can work with Yeoman generator for Zurb Foundation 5.

1. sudo npm install yo
2. sudo npm install generator-zf5
3. yo zf5
4. sudo npm install (if needed because of permissions errors)
5. grunt

Now you have open browser with livereload and sass compiler which is watching for your changes
If you want to install some of third party libraries just:

6. bower search [name it]
7. bower install [library name] --save
8. grunt bower-install

Now you have your library's js and css paths injected into html files
You can now publish your work..

9. grunt publish

Now you have all files copied and all assets minied and concatenated in dist folder
You can now preview your work from dist folder

10. grunt server-dist

Now you have open browser with project from dist folder (view page source)

Github: https://github.com/juliancwirko/generator-zf5

You can test it and send me your opinions. Thanks.

Christian Matthias almost 5 years ago

I have this same stupid question every time I start working and look for your project to get me going. When I am working with an new project in a folder i.e. myNewWebsite do I cd into this and then do all of the installations above like for yo and zf5? I think this is an obvious duh but for some reason I always forget. perhaps a why would help.

Karl Johan Kleist almost 5 years ago

Worked like a charm for me on the first attempt, using 64 bit Windows 7.

The only glitch was this (but that is out of your control, and I can live without jpegtran):

 > [email protected] postinstall C:\projects\ZURB-Foundation-for-Apps\generator-zf5\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-jpegtran\node_modules\jpegtran-bin
> node lib/install.js

  ‼ ENOENT, stat 'C:\projects\ZURB-Foundation-for-Apps\generator-zf5\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-jpegtran\node_modules\jpegtran-bin\vendor\jpegtran.exe'
  ‼ jpegtran pre-build test failed
  i compiling from source
  × Error: Command failed: Der Befehl "." ist entweder falsch geschrieben oder
konnte nicht gefunden werden.

    at ChildProcess.exithandler (child_process.js:658:15)
    at ChildProcess.emit (events.js:98:17)
    at maybeClose (child_process.js:766:16)
    at Process.ChildProcess._handle.onexit (child_process.js:833:5)

https://github.com/imagemin/jpegtran-bin/issues/54

Julian Ćwirko almost 5 years ago

Hi, here is some basic knowledge about generator-zf5:
http://julian.io/foundation-5-and-yeoman/

Robert almost 5 years ago

How can i update to the latest version of Foundation with zf5?

Julian Ćwirko almost 5 years ago

If you want to update started project you can run 'bower update' in root folder to update Foundation.
Also remember to compare app/scss/_settings.scss file with the one from new Foundation.

(Generator-zf5 is up to date with Foundation 5.5.1)