Foundation 6 - bower component

[SamC]

Ok, so I bit the bullet and got foundation 6 up and running, well I think so. Not sure about the bower part. I used three methods to try and get my head around this:

npm install foundation-sites

I could then integrate the sass into my current workflow (with my own gulpfile) quite easily, made a quick demo page and the sass seemed to work ok. So I thought I'd try a starter project because it's all bundled together, which may be even easier (because of the pre-made gulpfile which handles the js as well):

foundation new --framework sites --template basic

...which downloads a bunch of stuff. You can run 'foundation watch' in powershell (using scoop for win10 on the pc) and edit the scss, outputs css etc.. What I don't get is that I haven't installed bower anywhere along the way. @Sérgio mentioned using foundation yesterday so may have a good idea what's going on here. Foundation seemed to have multiple different instructions on different pages, one says use npm (which I did initially), then another is for starter templates, yet another one suggested installing node, then npm, gulp, bower and even RUBY as well (!!). What I've ended up with is a basic template, like this:

This lot could easily go into /site/templates/site-assets/ in a PW install so the workflow is relatively similar to what I do anyway. However, how does the 'bower_components' folder come into play here? I never installed bower anywhere along the way and I'm not sure the automated cli tool did either. Did I miss a step or something? The page I followed was here http://foundation.zurb.com/sites/docs/installation.html#command-line-tool.html 

I also downloaded the zurb template but not looked too deeply into that one yet, seems to include handlebars and all sorts off stuff I'll never use. Thanks in advance for any advice.

[FrancisChung]

If you look at the manual setup steps of Foundation, you'll see they ask you to install bower. So I assume it must be part of the Auto setup somewhere not visible to the user.

For reference, I have my bower_components folder under the templates folder. Perhaps, you should just leave alone the folders as eventually you'll have to update components over time and unless you want to tinker with extra steps during the update process best just to leave it as it is.

[Sergio]

Very strange indeed, but I don't think they install bower for you. Are you sure you haven't installed it before for other projects?

Anyways, don't lose your head over it.  

The differences between what can be installed are these:

npm install foundation-sites

This command will install only the CSS framework, you'll need to compile the Sass yourself. As their documentation says, you can use Bower OR npm.
 

But, to install all the requirements to compile the Sass files (using node-sass), you should use their cli like below. This is useful if you do not have gulp setup yet for your project assets. 

npm install --global foundation-cli

 

And, the final option, using Zurb template, which I recommend only if you are starting a new project and want to use their Panini library to build the pages statically and have an HTML prototype very quickly to show to a client and after their approval integrate with PHP. 

foundation new --framework sites --template zurb

Be aware that it will install a lot of stuff! 

[SamC]

I'll try uikit instead  see if their docs make more sense than the foundation ones.