Trends

Getting Started with Foundation for Apps

In this introduction tutorial we’ll show you how to use Foundation for Apps to build a simple Gmail-esque RSS view.

The Foundation family is the basis upon which we build great digital products. Platform-agnostic, flexible and minimal, our CSS framework has one goal: Help people design better products faster.

A few years ago we decided to stop repeating ourselves. All of our clients needed the same base code upon which we could apply branding, style, and other design aspects that made their sites distinct. We called it Foundation, and released it as open source software for everyone to use.

Many marketing sites are not responsive — in fact, many sites have no consideration for mobile devices at all. So it’s no surprise that designing responsive marketing sites is a cumbersome process that’s challenging to test. Meanwhile it’s considered best-practice by big names in the industry.

Responsive apps are even worse off. HTML and CSS were never meant to handle complex interactions or to consider bandwidth overhead, not to mention everything from smartphone-sized screens to 40″ displays. Deploying a web app that works across all platforms is no small undertaking.

To combat these problems, we released subsequent versions of Foundation as open source software to help people design for real-world situations — without getting in the way of their creative efforts.

This two-part series covers the two Foundation frameworks. In part one we’ll use Foundation for Apps to build a simple Gmail-esque RSS view. In part two we’ll use Foundation for Sites to build a marketing website that promotes the app.

Did you know that there is a huge selection of Foundation Themes & Templates available on ThemeForest?

Part 1: Build a Gmail-like RSS View in a Snap

Foundation for Apps offers three tools to help us produce web apps with little fuss: A Flexbox-based grid, Motion UI and stateful views with Angular. Here we’ll start with the basics, building the skeleton of a web app using the grid.

Install Foundation for Apps

We’ll need a few items to get started.

  1. Install the CLI. “foundation-apps new view-app“. This downloads the repo and its dependencies for you.
  2. foundation-apps watch” starts a Gulp task that compiles and watches Sass, converts front matter to Routes and starts a local server for you. All that from three little words.
  3. All this downloads the code with a simple beginning HTML file for you to use. We’ll build our view in this file.

Building the App Layout

Here’s what we’re building: A simple Gmail-esque view. Content in the middle, feeds on the side. Menu up top.

foundation_apps2

Foundation for Apps works mobile-first, which means its default styles aim for smartphone-sized screens, which larger styles override. We’ll start by creating the grid.

  1. .grid-frame is the outer element. It gets used once. It uses vheight to fill the entire browser window.
  2. Grid-content and grid-block change behavior of their immediate children.
  3. .grid-block — align immediate child elements next to each other, no matter what they are. Paragraphs, divs, they all line up.
  4. .grid-content — content is just content. Flows as normal.

This example has .grid-frame around two vertical .grid-blocks. The grid is horizontal by default. You can change that with “.vertical" to the parent (in this case, the .grid-frame).

.shrink” class prevents divs from taking up even amounts of space in the parent. They only take the space their content needs.

<div class="grid-frame vertical">
  <div class="grid-content shrink" style="padding: 0;">
    …
  </div>
</div>

The first is a menu. We’ll come back to that in a minute. The second block has two nested elements: a sidebar for feeds and a main content area for the current feed’s articles.

<div class="grid-block">
  <div zf-panel class="medium-grid-block medium-2 
    panel panel-left" id="sidebar">
    …
  </div>
</div>
<div class="grid-block small-12 medium-10 medium-12">
  <div ui-view class="grid-content">
    …
  </div>
</div>

A panel can be a grid-block that is part of your layout. The medium-grid-block class means that on medium-up this will be a grid block. On small this will hide away. You can then use our toggle api on any button to open/close it on small (This will be explained later).

Finally, we add a basic nav list to the menu. It’s just a <ul>, like this:

<ul>
  <li><a href="/#!/link1">Link A</a></li>
  <li><a href="/#!/link2">Link B</a></li>
  <li><a href="/#!/link3">Link C</a></li>
</ul>

This layout too complex for smaller screens — smartphones and some tablets. So we turn the side bar into a panel. This is where the menu comes into play.

  1. Give the sidebar id="feed-list".
  2. Add .zf-toggle="feed-list" to the menu.
  3. Refresh your browser. That’s it.

zf-toggle="x" will open/close a grid block with id="x"

And that’s it: The layout for a simple, mobile-optimized RSS view built with Foundation for Apps.

Now that we have the product, we need a marketing site to promote it. Foundation for Sites is the tool we’ll use for that, coming in part two.

Download the Source Files


Ben Gremillion

About the Author Ben Gremillion

Ben is a writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He writes tutorials and facilitates the ZURB University training courses.