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:
assets
- js
- - app.js
- scss
- - _settings.scss
- - app.css
- templates
- - home.html
index.html
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:
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,…
By Louise North
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…
By Ben Moss
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…
By Simon Sterne
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…
By Robert Reeve
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…
By Louise North
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…
By Max Walton
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…