Menu icon Foundation
Yeoman + AngularJS + Foundation (for Apps?)

We are wanting to use Angular with Foundation, using the Yeoman scaffolding.

So far we've combined the following:

- Yeoman's generator-angular
- Foundation for Apps via Bower
- Swapped out compass dependancies for libsass within the gruntfile

But is this the right approach? All guides seem to point to using Foundation for Websites with yeoman, but we assumed this was because Foundation for Apps is quite new, and the articles may not have known about Foundation for Apps. Now, we know that Foundation for Apps already has scaffolding ability, but we wanted to use Yeoman, as it brought it a lot of other interesting tools as well, specifically very good around testing.

We also modified the yo angular setup to remove compass and bring in libsass. We've done that modification to the grunt file successfully, but the foundation side is still an issue.

We could simply import the CSS and JS for foundation manually (although we are brining it in via bower right now).

But then how do we override the variables, as the _settings.scss file has not been exposed/generated into the app, its still in bower_components/foundation-apps/scss/_settings.scss.

I assume its not a good idea to edit the files in bower_components, as this is likely to be regenerated on bower install?

Should we be using Foundation for Websites instead or are we on the right track?

structureyeomanfoundation for appsfountain for websites

We are wanting to use Angular with Foundation, using the Yeoman scaffolding.

So far we've combined the following:

- Yeoman's generator-angular
- Foundation for Apps via Bower
- Swapped out compass dependancies for libsass within the gruntfile

But is this the right approach? All guides seem to point to using Foundation for Websites with yeoman, but we assumed this was because Foundation for Apps is quite new, and the articles may not have known about Foundation for Apps. Now, we know that Foundation for Apps already has scaffolding ability, but we wanted to use Yeoman, as it brought it a lot of other interesting tools as well, specifically very good around testing.

We also modified the yo angular setup to remove compass and bring in libsass. We've done that modification to the grunt file successfully, but the foundation side is still an issue.

We could simply import the CSS and JS for foundation manually (although we are brining it in via bower right now).

But then how do we override the variables, as the _settings.scss file has not been exposed/generated into the app, its still in bower_components/foundation-apps/scss/_settings.scss.

I assume its not a good idea to edit the files in bower_components, as this is likely to be regenerated on bower install?

Should we be using Foundation for Websites instead or are we on the right track?

This post has been closed. No new replies can be added.

Russell almost 4 years ago

The grid system and other design functionality in Foundation for Apps seems much better for what we need over Foundation for Sites. So preferably we want to continue with that.

My question now is, how can we use angularJS in its raw form, and still make use of Foundation for Apps. I dont want it to conflict, as the Zurb team has done a great job in integrating Angular into Foundation and making it easier for non-angular devs to use it quickly without needing to learn angular (as read from their posts).

However, we want to use the full power of angular and have full control over that side.

Can this be done?

Russell over 3 years ago

Have received no reply, but the answer is yes, it is possible. You just bring in Foundation for Apps via bower, then copy and paste the _settings.scss file from bower_components/foundation/scss/ into your application, and then include it into your existing SCSS files. We included it before including the main foundation SCSS (which you leave in bower_components, and just reference to in there).