Foundation For Apps

app

A solid platform on which designers and developers can build great web apps.

Foundation for Apps is our CSS framework for advanced interactive websites — in short, our solution for building web apps.

Companies with native apps have to support a myriad of screen sizes, operating systems, and devices. It’s costly and requires dozens of code bases that all need to be updated with each OS update or new device. Foundation for Apps allows designers and developers to create immersive web apps that look and feel like native apps, and work seamless across all devices, mobile and desktop.

We created Foundation for Apps when we realized that no contemporary CSS framework was really suited to how apps work. Users want a native-app-like experience in their interactive websites, and we agreed. Designers began building web pages based on print design’s principles: the fixed-width canvas, columns and rows, worrying about “the fold,” and generally thinking in terms of documents that, once published, are finished. They don’t change. But apps don’t work that way.

Apps adapt to users’ needs — including viewport size and device orientation. Their content changes based on user input. They’re tools, not docs.

New Ways of Thinking

We had to change our mental models to make a truly web-like experience. That meant a new grid, a new animation library and a new MVC framework.

Foundation for Apps departs from traditional CSS grids in that it uses Flexbox instead of floats and clears to arrange elements in more web-like ways. This makes source ordering easy: You can arrange content in logical, semantics way and display them in a wide variety of configurations. Need a fixed sidebar and a scrolling content area? Want to stack elements in small screens and have them wrap, block grid-like, on wide screens? Flexbox has that all built-in. Features include:

Vertical grid — Carve the screen into vertical sections and never rely on unreliable fixed-position headers again.
Independent scrolling sections — Create sections that scroll, no matter what other sections do. Being responsive, they hese can be inline on desktop and off canvas on mobile devices.
Easier source ordering — Order divs on desktop, tablets and smartphones in entirely different orders with simple ordering classes.
The framework also comes with Motion UI, our robust CSS animation library built with Sass and powered by the MVC framework AngularJS, for a more native-app-like experience. Swipes, panels, and more make apps based on Foundation feel like users are working with real apps — and they’re practical as well. The ability to show/hide components on demand is a must when dealing with tiny screens.

Animation classes — Create simple angular prototypes and apps, without ever writing a line of Angular code. Name your view and your URL, and we create your Angular routes automatically.
Motion modifiers — Foundation for Apps comes with many stock animations that you can modify with the appropriately-named modifier classes. Specifically you can edit their speed, ease and delay.
Sass mixins — The framework comes with easy-to-use Sass mixins so you can create custom animations without having to memorize the complexities of keyframes.
FrontRouting — You can create simple angular prototypes and apps without having to write Angular code itself.
Component-driven — You can call our JS and CSS components with simple custom HTML tags. No need to remember to what kind of HTML element something is; just add zf- to the name of your component.
Add motion to views — Show your users 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.
All of this supports designers’ efforts to build killer apps on the web. Like Foundation for Sites, Foundation for Apps is a solid platform on which to build.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>