Angular Foundation

With love, from Pinecone


Download v<%= pkg.version %> Contribute

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.

<% demoModules.forEach(function(module) { %>
<%= module.docs.html %>
<%= module.docs.md %>

<%- module.docs.html %>
<%- module.docs.js %>
<% }); %>

.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;
}