: : :

Foundation for Apps

The first front-end framework created for developing fully responsive web apps.

Install 1.1.0

Create Dynamic Responsive Web Apps.

The most advanced framework for web apps ever created is packed with features to help you code single-page web apps faster than ever before.

Foundation for Apps is a framework that allows people and companies to build well designed future-friendly web apps. Foundation for Apps is designed to help you quickly prototype and build responsive web applications by using leading technologies like Flexbox and Angular.

Find out why Foundation is the right choice →


Build any type of web app

An entirely new grid designed for making flexible, fully-immersive web apps.

  • Sexy email apps

    Build a three-column email app on desktop computers with navigation and messages that slide in on mobile devices. It’s a perfect example of a responsive app that adjusts to many screen sizes.

    View This Template →
  • Complex Music Apps

    Become the next big music streaming service — but unlike the big guys, make sure your app can work on every device with no need to download special software per platform.

    View This Template →
  • Look, a chat app too!

    Build the perfect chat experience on a grid that lets you carve up screens into tons of useful pieces.

    View This Template →
  • So productive, girl

    Productivity apps are hot. This template mimics some of the most popular side scrolling apps available.

    View This Template →
  • An immersive travel app

    Split the screen in half and take full advantage of a large screen when you have it, then show the must have stuff on a smaller screen.

    View This Template →
  • Or something else entirely

    Create a responsive app that's never been done before. And have it be seen by everyone on every device.

    Get Started →

Built for making web apps

An entirely new grid, designed for making fully immersive and flexible web apps.

Vertical Grid

Use the power of Flexbox to carve screens into vertical sections — you’ll never rely on unreliable fixed-position headers again.

Independent Scrolling Sections

Create independently-scrolling sections that are inline on desktop computers and off-canvas on mobile devices.


A New Grid

Do more with a grid designed to work on any device.

Vertical Grid

Use the power of Flexbox to carve screens into vertical sections. You’ll never rely on unreliable fixed-position headers again.

Independent Scrolling Sections

Create independently-scrolling sections that can be inline on desktop computers and off-canvas on mobile devices.

Easier Source Ordering

Order the same divs on desktop computers, tablets and mobile devices in entirely different order with simple ordering classes.


Built on Angular

Make the power of AngularJS accessible to non-developers.

Templatizing Angular

Templatizing Angular Create simple Angular prototypes and apps without ever writing a line of Angular code. We create your Angular routes so you don’t have to — just name your views and URLs.

Component Driven

There’s no need to remember to call a div, ul or dl elements. Call our JS and CSS components with simple, custom HTML tags by prefixing your components’ names with “zf-”.

Add Motion to Views

Let users see when content changes by adding “enter” and “exit” motion classes to views. Simply define one of our predefined Motion UI classes at the top of your view and you’re done.


Motion UI

Create both eye-catching and subtle movements with a simple class or mixin.

Animation Classes

Create simple Angular prototypes and apps without ever writing a line of Angular code. We create your Angular routes so you don’t have to — just name your views and URLs.

Motion Modifiers

Change the default animations with modifier classes that affect the speed, ease and delay of animated elements.

Sass Mixins

Sass mixins are easy to use, so you can create custom animations without having to remember the complexities of keyframes.


Flexible Components

Mobile and desktop components, rethought to be more flexible than ever.

Notifications

Create native-app-like notifications on mobile devices and desktop browsers.

Menu Bar

Swap between vertical and horizontal menus on different screen sizes.

Action Sheets

Use ever-popular action sheets on mobile devices, and more appropriate drop-down menus on desktop browsers.


Wield the power of AngularJS with ease

Take the power of AngularJS and make it accesssible

Templatize Angular

Create simple Angular prototypes and apps without ever writing a line of Angular code. We create your Angular routes so you don’t have to — just name your views and URLs.

Component Driven

There’s no need to remember to call a div, ul or dl elements. Call our JS and CSS components with simple, custom HTML tags by prefixing your components’ names with “zf-”.

Add Motion to Views

Let users see when content changes by adding “enter” and “exit” motion classes to views. Simply define one of our predefined Motion UI classes at the top of your view and you’re done.