Installation & featuresFoundation for Apps is not the old Foundation with some added features. It's a completely different product. It’s designed from the ground up do be web developer-friendly. Indeed, while you don’t need to be a developer to use it, it helps to know a little bit about setting up development environments. This is because you don’t just unzip this framework and drop it in your apps folder. It's based on tools like Angular.js](https://angularjs.org/) and Sass; it comes with its own mini-server which will compile and serve your projects for you on the fly. This means that you have to have Node.js, Ruby, and a few other things installed. You also have to install the whole thing from the command line. Developers working on Linux and OSX won’t have any problems getting set up. It’s a bit more troublesome for aspiring nerds like me who use Windows. Once you get past these initial hurdl… ahem I mean, embrace this new way of doing things, you’ll see some awesome stuff under the cover, including:
- A grid based on Flexbox and designed for apps. It includes support for laying out your “screens” vertically and horizontally, scrolling inside each section, and more;
- tons of UI components;
- Angular.js; it’s all the rage right now;
- a template and component-based file structure;
- Motion UI: Zurb's new animation library designed specifically for app user interfaces.
Getting startedOne of the advantages of frameworks in general is that they’re perfect for making quick prototypes. Once you’ve installed this thing, and have started the mini server, it’s time to put your ideas together into a live, interactive interface that doesn't do anything. Yet. For this article, I created a dead-simple “contact management page” that would have any client begging for more details, and maybe a change of layout: In your app’s directory, you’ll find several folders and files. For the purposes of pure front-end development, you only need to worry about the “client” folder. That’s where all of your source files go. In there, the following folders and files are set up by default:
assets - js - - app.js - scss - - _settings.scss - - app.css - templates - - home.html index.html
The gridThe first thing you’ll have to get used to is the grid itself. It uses Flexbox, so things work quite a bit differently, but the classes will be familiar. To create two blocks/columns of equal width, this is all you need to do:
ComponentsAlso included are a large number of components from classic Foundation. You have your classic callouts and modal windows, alert boxes, form styles, button styles, tabs, and more. The typography is solid, and there's also a limited icon set (all SVG) included for use in buttons, menus, and so on. I'm particularly fond of the panels, which are basically blocks of content hidden off-canvas, which can be called onto the screen from any side. I also like the "cards". Cards are just simple rectangular objects meant to separate content. I used them for the list of contacts in the screenshot above. For the full list, see the documentation.
Go for it.What are you waiting for? Get your command-line on and start playing with this. Even if you're not an app developer, it’s good to know how to work in this environment, especially if you work with actual programmers.
Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.