I am working on a Foundation 5 website and i would like to detect the breakpoint change when the user resize the browser window. Here is a workaround found in the Foundation Forum.
1. Add the following piece of HTML to your website. Since i am working with Drupal 7 with the Foundaiton 5 theme, i just add it to the page.tpl.php in the subtheme.
<!-- For breakpoints checking in js -->
<div class="breakpoint-small show-for-small-only" data-size="small"></div>
<div class="breakpoint-medium show-for-medium-only" data-size="medium"></div>
<div class="breakpoint-large show-for-large-only" data-size="large"></div>
We got the Foundation 5 with Sass styling working on our AngularJS project which was scaffolded by Yeoman.
Let’s continue our ng-foundation example above.
To utilize the Foundation framework in a more effective way, the Mad Mimi team creates some native AngularJS directives based on Foundation‘s markup and CSS which is available on Bower.
Continue reading AngularJS directives of Foundation
The generator-angular written by the Yeoman team comes with Bootstrap integration. But instead of using Bootstrap, i would like to use Foundation 5 with Sass. The following example is created under Node.js v0.10.29.
1. Create your project directory. In my case, i will name the project ng-foundation.
2. Move to the ng-foundation folder.
3. Scaffold the AngularJS project using the generator-angular as usual.
Continue reading Yeoman – Setup AngularJS and Foundation 5 with Sass