<div class="row">
    <div id="application-messages" class="columns large-10 large-centered">
      <% flash.each do |name, msg| %>
        <div data-alert data-fade="not-set" class="alert-box #{name} sdc-alert-border radius">
          <%= msg %>
          <a href="#" class="close">&times;</a>
        </div>
      <% end %>
    </div>
  </div>
  <%= yield %>
  <%= javascript_include_tag "application" %>
  <script type="text/javascript">
    $(function () {
      $('.footable').footable({
        breakpoints: {
          phone: 640,
          tablet: 800
        }
      });
    });

    jQuery(document).ready(function($) {
      sdcUI.addMessageFade();
    });
  </script>

sdcUI.addMessageFade = function() {
  $('div[data-fade="not-set"]').delay(500).fadeOut(2000).data('fade', 'is-set');
};