ZURB, a web design company and creator of Foundation (for Sites), has announced and open sourced another framework called Foundation for Apps (FA). FA provides HTML5/JavaScript tools for creating responsive web applications for desktop and mobile devices.
Foundation for Apps comes with a library of flat widgets animated by Motion UI and laid out in a Grid based on CSS3 Flexible Box, standardized by W3C. The UI library contains the following widgets:
- Controls: Button, Form
- Content: Accordion, Block List, Card, Interchange, Labels, Popup, Tabs, Typography, Icons
- Callouts: Modal, Notification
- Navigation: Action Sheet, Menu Bar, Off-canvas Menu, Title Bar
These components can be animated with Motion UI implemented with Sass mixins, CSS animations and transitions. Motion UI can perform sliding from various directions, fading in/out, hinging, zooming, spinning, shaking and wiggling at different speeds.
For laying out components FA uses Grid, a layout manager that adjusts its size and the arrangement of elements based on the screen size and device type it is deployed upon, enabling the creation of responsive web applications without requiring much contribution from the developer.
Foundation for Apps uses AngularJS to implement a MVC architecture for Single Page Apps (SPA). The framework uses UI routing so developers don’t need to know AngularJS nor use JavaScript, but transitions between different app views and their animations are specified declaratively in Gulp.
FA supports many newer browsers but it does not support earlier ones: Android 4.1-, iOS 6-, IE 9-.
InfoQ talked to Brandon Arnold, Foundation Lead, to find out more about Foundation for Apps and how it relates to their other framework, Foundation for Sites.
InfoQ: What determined you to create a new framework from scratch instead of improving an existing one, such as jQuery UI?
BA: The reason for creating something new was that no one had really attempted to solve these particular problems. For example, there are tons of Frameworks devoted to building apps for mobile devices, yet none that we've come across are attempting to build a responsive solution. Foundation was the first framework to push responsive design (believe it or not Bootstrap wasn't responsive at first release) and since then responsive websites has become the normal. We want to do the same thing for apps.
InfoQ: I see that Foundation for Apps (FA) is not a superset of Foundation for Sites (FS), but a completely different project. Why have you decided to create a new framework, and does FA use anything from FS?
BA: We will be continuing to improve Foundation for Sites and making it even better for building things like marketing sites and landing pages. We use it all the time for client work and love how easy it makes creating those types of projects, but we also do tons of web apps and have noticed that the simplicity that Foundation for Sites offers makes it more time consuming to create the types of patterns web apps need. Foundation for Apps has a grid that makes it easier to build the immersive experiences that web apps deliver and is built on Angular to really drive the fluidity of apps. In addition to Foundation for Sites and Foundation for Apps we have Ink, which later this year will be rebranded as Foundation for Email. Having a family of frameworks will make it easy for users to build entire businesses off of the Foundation Platform and use a framework that is specific to the needs of the medium.
I suppose having separate code bases lets us do some neat things with new tech. The grid was recreated from scratch in Flexbox as well as the majority of components, simply because they operated entirely differently. We did share some things from Foundation for Sites like typography, buttons and a few other smaller elements, however we didn't pull these straight in. We've discussed in pretty good detail over the last few days where we go from here and finding ways to have separate repos for the shared components and such, but nothing is final for the next versions yet.
InfoQ: Android 4.1 or older are not supported, which represents about 40% of the Android phones according to the dashboard. Any plan on supporting these older devices?
BA: Foundation has always been pretty future forward and we try not to let the tech be held back by the stragglers. We've worked hard to get everything working as well as we can as far back as possible without compromising the abilities of new devices. The Android market is a tough one; it's still insane to think Android can't upgrade which is going to eventually make some of these Android phones the IE of their day. We also are taking into account that phones tend to work differently than desktops in the way people buy them and that we're approaching the 2+ year mark on many of these phones which means they'll be due for an upgrade.
InfoQ: What is the plan for the future, will FA and FS have a separate evolution?
BA: FA, FS and FE will all continue to be developed. In fact, up next we're starting with a simultaneous development of Foundation for Email and Foundation for Sites. We're looking at ways to share as much of the codebases as possible, but we're just at the start of this. We're amped though and the chatter around the office has been really fun.
InfoQ: Is there something else that you are planning to work on that you want to share with us?
BA: More or less the stuff mentioned above. Right now we're sitting at our desks patching as many of the bugs as we can, planning the 1.01 and 1.1 release for Foundation for Apps. Later today we're having planning sessions for the future of the other frameworks. Although, being an open source project, it doesn't have direct revenue, so we still all have client work to fill our days.
More resources: FA installation instructions, FA on GitHub.
