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.

James Simpson over 5 years ago

Hi Julian,

This is awesome! I was planning out exactly what I needed to build a zf5 demo and your generator ticked every box. Great work - you've saved me a ton of time :)

Thanks,
James

David Fox-Powell over 5 years ago

Hi Julian,

I really like your generator/workflow and am a big grunt enthusiast. I especially like how you got BowerInstall and Usemin to work together. I didn't know that BowerBuild comment blocks inside the Usemin comment blocks wouldn't actually break Usemen upon compilation. I thought I tried this once and got errors but looks like you got it to work.

One question is that I'm looking to implement SASS + Foundation into a project at work but want to eliminate Ruby dependencies. I know that the grunt-sass plugin you implement does this using Libsass, but I'm wondering does Foundation itself have Ruby dependencies as I know it is installed via a Gem?

Julian Ćwirko over 5 years ago

Hi,
my generator uses libsass and standard bower Foundation build: https://github.com/zurb/bower-foundation so it should work without ruby.

Christian Matthias over 5 years ago

Julian awesome work as always...

I had a quick question and need of help. Say I build some of my own own css classes that I want to incorporate into the site. And another example would be if I were using another css / js package of lets say a menu. Is there a way to incorporate this in without having to know how to write bower packages? Is writing files easy to bower packages? or should I just add the css to the override file for app.css override?

what is your suggestion on this? much appreciate.

Alexander Assimidis over 5 years ago

Awesome work i use it all the time thanks man. Maybe you could add some more Questions like would u like to Import Font-Awesome.

Christian Matthias over 5 years ago

noticed that when you install a new project and fire up yo zf5 it asks if you should overwrite bower stuff. I say yes but don't know why it is doing that.

Christian Matthias over 5 years ago

Also, I have a question about $ grunt bower-install <<< does this need to be done? If we already started grunt doesn't that do that function?

perhaps if we do an install of a bower package then we need to go back and do that?

Alexander Assimidis over 5 years ago

No it is not needed to do that u only have to use bower install if u want to install an optional libary to ur Project

Maciej Czerniak over 5 years ago

Hi Julian,
very usefull, thanks.
One question/comment - is there a way to point installation to specific directory as in default foundation installation process ("foundation new project_name --libsass" etc.)?

Julian Ćwirko over 5 years ago

This is how Yeoman is doing it. I don't think there is any option like that (or maybe?) but for me it is even better :) I like this more control when you have to mkdir, cd into it and then run yo zf5 in this particular folder.

Patrick Jones over 5 years ago

Sorry to ask a dumb question, but I'm new to Yeoman and I don't quite understand how the skeleton app that "yo zf5" creates is organized.

Here are some specific questions I had:

Is the folder "bower components" simply a repository of all the goodies, and I choose what I want and bring it into the corresponding folder in the "app" directory? For example, should I draw jquery.js or foundation.css from their folders in "bower components" and put them in the "js" and "css" folders, respectively, under "app"?

This is very ambiguous to me. I'm just wondering how all of this stuff points to each other. Without knowing how it's organized, I don't really understand this as a blank Foundation 5 shell. The first time I used Yeoman to scaffold with Foundation I used "yo foundation-five"—after doing so, I opened "index.html" which included an overview of Foundation assets, but none of them showed up styled, since there was no foundation.css in the "css" folder under app. So I tried "yo zf5" and have the same questions.

Many thanks for your time! And thank you for creating this generator!

Julian Ćwirko over 5 years ago

Definitely tutorial is needed. There are many questions about starting with yo-grunt-bower workflow ...english speakers - contribution is welcome :)

in regard to your questions:

1. app folder is only your workspace
2. bower_components is a place where all third party stuff lives (you can add more by 'bower install <package_name> --save' read about it here: http://bower.io you can also inject paths into index.html with 'grunt bower-install')
3. in app/index.html there are paths to bower_component files or any which you place in app/css or app/js (etc.) folders
4. after 'grunt publish' all files (from bower_components too) are copied into dist folder
5. dist (and anything else) folder is your ready to go app

So all changes you will be doing in app folder. After just run 'grunt publish' and take the dist folder and place it on the server (or whatever you want). So you don't have to worry about bower_components just keep your comments blocks (like <!-- build:css css/libraries.min.css --> ) in app/index.html it is needed for publication process.

I hope someone (english speaker) who is using zf5 will write/record some basic tutorials. This could be awesome.
Or maybe I will try to write it soon and ask someone to correct my spelling

James Stone over 5 years ago

The zf5 yeoman workflow is quite good. What it does is basically give you a more advanced grunt setup and you can use it as a drop in replacement for the foundation CLI. Running grunt publish basically uses grunt as a build file / script and is a great example about how you might go about creating your own.

Thanks Julian for posting this here and for putting together the package on GH.

I am planning to put together a tutorial for it at some point and put it up on my youtube channel.

Julian Ćwirko over 5 years ago

many thanks James :)

Nont Nawa about 5 years ago

Hi Julian , first I think I'll post to ask you cause my 1st setup is failed.
After the 2nd to try carefully , now it's working with livereload.
I run by Windows 8.1 environment. .. Thank you so much.

Maciej Czerniak about 5 years ago

Hi Julian,
I have already used this workflow in couple of projects and I must say it works like a charm. One thing that would be really usefull is making it work with PHP files. Any hints?
Cheers!

Julian Ćwirko about 5 years ago

Hi, hard to say :/ I don't work with PHP.

You can search for grunt-usemin, grunt-wiredep + Sass + PHP workflow then you will be able to adapt generator-zf5 because these are the main grunt tasks. Or maybe you will be able to use some kind of templates like Jade or Handlebars with PHP or maybe even Twig.

This is for sure topic to explore and it is beyond the scope of this generator :)

Maciej Czerniak about 5 years ago

Ok, in case someone was interested in how to use it with PHP
- install this plugin after yo zf5 - www.npmjs.org/package/connect-php
- and modify your gruntfile:

 connect: {
      app: {
        options: {
          port: 9000,
          base: '<%= app %>/',
          open: true,
          livereload: true,
          hostname: '127.0.0.1',
          middleware: function(connect, options) {
              var middlewares = [];
              var directory = options.directory || options.base[options.base.length - 1];
              if (!Array.isArray(options.base)) {
                  options.base = [options.base];
              }

              // Magic happens here
              middlewares.push(phpMiddleware(directory));

              options.base.forEach(function(base) {
                  // Serve static files.
                  middlewares.push(connect.static(base));
              });

              // Make directory browse-able.
              middlewares.push(connect.directory(directory));
              return middlewares;
          }
        }
      },

Thomas K. about 5 years ago

Hm, I've installed connect-php and I've modified the Gruntfile.js in my project-dir.
"grunt publish" runs without error, but I don't have any php-file.

Where is the error?

If it works, it's a nice function.

Thank you

Edit: I have also added this line
var phpMiddleware = require('connect-php');
before grunt.initConfig

Thomas K. about 5 years ago

Because I don't have any solution, I have made a workaround.
I name my php-files "filename.php.html"

Make a Batchfile e.g. "publish.bat" and copy it in a cmd-path

call grunt publish
ren dist\*.php.html *.

Then I call "publish" in my project-dir.

Important: You must have a "index.html", because otherwise you get an error with grunt.