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
- Install the CLI. “
foundation-apps new view-app“. This downloads the repo and its dependencies for you.
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.
- 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 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.
.grid-frameis the outer element. It gets used once. It uses
vheightto fill the entire browser window.
- Grid-content and grid-block change behavior of their immediate children.
.grid-block— align immediate child elements next to each other, no matter what they are. Paragraphs, divs, they all line up.
.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
.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.
- Give the sidebar
.zf-toggle="feed-list"to the menu.
- Refresh your browser. That’s it.
zf-toggle="x" will open/close a grid block with
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.