Foundation

Foundation for APPS

foundation.zurb.com

introduction

webapp prototyping framework

+

=

features

  • Dynamic routing (ui-router)
  • Responsive grid (foundation)
  • Components (foundation)
  • Motion UI (AngularJS)

dynamic routing

  • based on ui-router
  • easy config through metadata
---
name: home
url: /
animationIn: slideInRight
animationOut: slideOutLeft
---

<div class="grid-content">
...
</div>

http://foundation.zurb.com/apps/docs/#!/angular

responsive grid

  • mediaqueries
  • optimized for webapps
  • flexbox
<div class="grid-block">

    <div class="grid-content small-12 medium-4">
      yellow
    </div>
    
    <div class="grid-content small-12 medium-4">
      blue
    </div>
    
    <div class="grid-content small-12 medium-4">
      green
    </div>

</div>

http://foundation.zurb.com/apps/docs/#!/grid

components

  • off-canvas
  • modal
  • forms & buttons
  • UI elements
    - accordion
    - tabs
    - etc.
  • more, more, more

http://foundation.zurb.com/apps/docs/#!/accordion​

All implemented as Angular directives

motion UI

  • easy transitions
  • integrated in all components
  • set via HTML for components
  • set via config metadata for routing

http://foundation.zurb.com/apps/docs/#!/motion-ui​

<div zf-panel="" animation-in="slideInRight" animation-out="slideOutUp">
  <!-- ... -->
</div>
---
name: home
url: /
animationIn: slideInRight
animationOut: slideOutLeft
---

<div class="grid-content">
...
</div>

more...

Foundation for Apps Introduction

By hannes

Made with Slides.com

Foundation for Apps Introduction

Short deck for an internal tech talk to introduce the basics of Foundation for Apps to the team.

  • 1,977

More from hannes