Menu icon Foundation
I want to use Foundation for Apps but with regular Foundation 5 components

Hi all,

We're restructuring our app and I really like the functionality found in Foundation for Apps, specifically the usage of flexbox for the grid as well as integration with Angular.

However, it seems the library of components is very limited in comparison to the regular Foundation. For example, I want to leverage some of the styles used in the Top-bar from Foundation 5, which does not exist in Foundation for apps. There are also things like tooltips that I want to utilize in Foundation for Apps but only exists in Foundation 5.

Is there a way to take bits and pieces from Foundation 5 and use them in Foundation for Apps? If so, how?

foundation for apps

Hi all,

We're restructuring our app and I really like the functionality found in Foundation for Apps, specifically the usage of flexbox for the grid as well as integration with Angular.

However, it seems the library of components is very limited in comparison to the regular Foundation. For example, I want to leverage some of the styles used in the Top-bar from Foundation 5, which does not exist in Foundation for apps. There are also things like tooltips that I want to utilize in Foundation for Apps but only exists in Foundation 5.

Is there a way to take bits and pieces from Foundation 5 and use them in Foundation for Apps? If so, how?

Hans McMurdy over 4 years ago

Like this?
http://hansuxdev.github.io/Foundation-Apps-Offcanvas/#!/

The repo for that that link is below and will show you how to do what you are asking about.
https://github.com/HansUXdev/Foundation-Apps-Offcanvas

I think you are right, unfortunately F4A seems to be very boilerplate right now and switching from jQuery in particular is a real pain.

Keep in mind that somethings like topbar may need additional work and some components from sites (F5) have conflicting class

Rafi Benkual over 4 years ago

You can use the components as plugins. You need to be careful that the variable do not collide. Also make sure nothing has the same naming convention.