Getting started with Foundation for apps

Default avatar.
December 17, 2014
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: screenshot 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.

Read Next

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…