Getting started with Foundation for apps

So, there’s a new version of Foundation…

Not long ago, we told you all about how to get started with Foundation 5. Now there’s a new version out; not “Foundation 6” but Foundation for Apps, and it’s going to be huge.

That Foundation 5 is a powerful and flexible framework, there is no doubt. It can be used for content-driven websites, apps, almost anything you can think of, though it might take some work and customization. There are, however, layout and design conventions specific to apps. Also, apps are often developed for mobile browsers, which support newer technologies.

In short, the classic Foundation framework, while flexible enough to make apps with, was created as a tool for many purposes. App developers may want something that caters a bit more specifically to their needs, and Zurb has provided exactly that.

Installation & features

Foundation 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 started

One 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 app.scss and app.js files are where you put all your custom Sass and JS, respectively. _settings.scss is just that: the file where you can override a lot of the default styles. The code is properly commented, and it’s easy enough to find what you need. You can also use this file to completely disable different parts of the CSS framework, so they won’t be included when your app is built.

index.html is the file that “make it all happen” by pulling in other components, app screens, and so on. home.html is the content that you’ll see when you first go to http://localhost:8080, once the mini-server is running. It’s also where I started working.

The grid

The 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:

Yup. That’s it. If you want to put actual content inside those two columns, you’ll need to do it differently. This is what the columns in my prototype look like:

You’ll notice that you always seem to need two elements with grid-block as classes to make things align properly. You might also notice that I’ve manually specified column widths. If you don’t, all blocks will expand to fill all available space, remaining equally wide.

Components

Also 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

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.