
Getting started
Dependencies
This repository contains a set of native AngularJS directives based on Foundation's markup and CSS. As a result no dependency on jQuery or Foundation's JavaScript is required. The only required dependencies are:
- AngularJS (requires AngularJS 1.2.x, tested with <%= ngversion %>)
- Foundation CSS (tested with version <%= fdversion %>). This version of the library (<%= pkg.version %>) works only with Foundation CSS in version 5.x.
Downloading
Build files for all directives are distributed in several flavours: minified for production usage, un-minified for development, with or without templates. All the options are described and can be downloaded from here.
Installation
As soon as you've got all the files downloaded and included in your page you just need to declare
a dependency on the mm.foundation
module:
angular.module('myModule', ['mm.foundation']);
You can fork one of the plunkers from this page to see a working example of what is described here.
<%= module.displayName %> (mm.foundation.<%= module.name %>)
<%- module.docs.html %>
<%- module.docs.js %>
Animations
Foundation includes animations in its JavaScript files but the components above don't use Foundation's JavaScript. You can use the official Angular module ngAnimate in your project or simple CSS animations like the example below.
.fade {
opacity: 0;
-webkit-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.fade.in {
opacity: 1;
}
.reveal-modal.fade {
-webkit-transition: -webkit-transform .3s ease-out;
-moz-transition: -moz-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
}
.reveal-modal.in {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.reveal-modal-bg.fade {
filter: alpha(opacity=0);
opacity: 0;
}
.reveal-modal-bg.in {
filter: alpha(opacity=50);
opacity: .5;
}