Foundation for Apps is Here!

Posted on Dec 8 2014 - 11:50am by Eric Tompkins

foundation for apps

Foundation for Apps is Here!


The wait is over. Foundation for Apps is finally here. Here is how to quickly install and get started:

  1. Install Foundation for Apps CLI

    Do this the first time creating a new project and then never worry about it again. You’ll first need to have Node.js, Git and Ruby installed on your machine. Then it’s as simple as running this command.

    If you don’t have Bundler installed, you’ll want to install that as well:


We’ve teased and teased you all over the past five months. But today is the day. We’re stoked to finally release the newest member of the Foundation family and the first front-end framework created solely for building fully-responsive web apps. Now you’ll be able build any kind of web app with one set of code.

We’ve chronicled the journey from our new take on a grid, to the introduction to Motion UI, to our integration of MVC frameworks — and many of you followed along. We had tons of people reach out and help us make some huge, tough decisions. While it’s been a long road with lot of planning, tons of code and a few restarts, we’re really proud of what we’ve created with the help of our amazing contributors. And now we can’t wait for you all to get your hands on it.

We’d like to thank everyone who has helped us over the past few months with their feedback and assistance. With your help, we’ve created the first framework devoted to develop better, more polished responsive web apps. And we’re looking forward to your help in continuing to grow Foundation for Apps. For now, we’re pleased to show off the fruit of everyone’s labors.

Explore the New Foundation for Apps

A New Grid
We love rows and columns. However, once a grid does truly flexible things — like swap between horizontal and vertical or move entire sections off-screen at different screen sizes — rows and columns don’t work so well.

Creating a new grid that handles complex, responsive, mobile-optimized and desktop-smart apps was one of our main goals. The new grid is based on Flexbox which, in addition to being cool, can be confusing. Foundation for Apps takes care of most of that complexity and gives some really great power to create complicated grids.

Check out the Grid

Motion UI
Motion was a huge trend in 2014 — and it’ll only get more popular in the coming year. So we created Motion UI to add movement to your web app with ease. This new set of classes and mixins helps you quickly add animations to your app. It also has easy motion-modifying classes that control the speed, delay and easing.

But that’s just the beginning. From there we added motion classes to view-swapping so you can add transitions between sections of your app. Then we added motion classes to certain components like modals, panels and notifications, so users can change the default animations to any of our pre-made ones — or even a custom one.

Check out Motion UI

Single-Page Web Apps
Apps need to be fluid — and page reloads can spell the death of a web app. For that reason, MVC frameworks have been wildly successful, and we decided it was the way to go. We got some good advice from our users and ZURB Studios clients on what to use. After getting their feedback, we went with AngularJS.

Angular allowed us to templatize routing, making it super easy for anyone to create a single-page app without knowing JavaScript. We also converted our plugins to Angular directives, which makes creating components super fast: just prefix the component’s name with zf- , and you’re done.

Check out our Angular integration

And One More Thing …
We’ve done tons more with Foundation for Apps, and there are tons more we want to do in the near future. We’re champing at the bit for all you wonderful people to start using our new framework and to get your feedback (or pull requests) on what we can do to make it even better.

Tags: foundation for apps

About the Author

Eric Tompkins is an Experienced Web Developer and Digital Media Professional. As well as a Professional Photographer and Technical Instructor. You can follow on Twitter @_codemics.