Foundation

Foundation for APPS

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>

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>

components

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

All implemented as Angular directives

motion UI

  • easy transitions
  • integrated in all components
  • set via HTML for components
  • set via config metadata for routing
<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

Foundation for Apps Introduction

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

  • 967
Loading comments...

More from hannes