The Next Foundation

wrote this on in . 1425 reactions

It's been almost three years that we've been working on Foundation with you guys, and we've come a long ways. Foundation has been used by over a million designers and developers on at least 330,000 public sites, gone through five major iterations (and many, many smaller ones), and has contributions from almost 500 people. For responsive sites, we're pretty pleased with what Foundation has been able to help people do.

But the Web is changing again. The 'page' is dead. Static sites, simple layouts, basic content streams aren't going to cut it any more, and designers can't rely on creating statically linked pages. These days the most exciting work being done on the Web is in Web apps, and Foundation needs to evolve to support this new standard. Native apps have really raised the bar when it comes to polish, interactivity, flexibility of layout and control, the works, and now Web apps need to catch up and surpass that.

We've always been bullish on responsive design and Web apps (well, at least since we first started working on it not long after Responsive Web Design became a thing) because building things responsively is the only way to build something that scales, and works everywhere. The time is ripe for Web apps to really come into their own and we'd like to tell you about our plans for Foundation to make this happen.

Foundation's Edge

Building a complex Web app with Foundation right now is challenging; you have to push Foundation right up to the edge (and over it) to get the job done. While Foundation has always been about changing the framework and overriding it to make it your own, we feel like the work you have to do to prototype or build a good Web app with Foundation is just too much.

We're building a new version of Foundation from the ground up, not as a replacement to Foundation 5 but as a companion — built just for Web apps. We won't be dropping a lot of what makes Foundation great. Instead, we are approaching some core problems from a brand-new perspective, centered around three core ideas.

A New Grid

Foundation for Apps will include an all-new grid system that lets you create complex, full-screen layouts in horizontal and vertical orientations. We're eliminating the need for things like block grids by taking advantage of Flexbox, who's time to shine we think has finally come.

In the new Foundation grid you'll be able to section out your layout based on the entire screen real estate as well as nest the grid (just like in Foundation 5, now Foundation for Sites) to create content areas, panels, scrollable sections and more. Through code challenges and practical testing at ZURB we've gone through numerous iterations on this new grid, and we're confident this will be a grid unlike any you've seen before.

Stateful Prototyping and Building

Web apps don't work like static sites; you don't jump from discrete page to discrete page, you simply modify the state of the app. Why prototype an app like a common site?

We're beginning to build out Foundation for Apps using Angular.js, a rapidly growing JS library that will allow us to not only better abstract the code but also allow for easy prototyping to apps that really do change and adjust based on their use, all with no back-end component required.

If your stack isn't Angular don't worry — we won't be making any decisions or assumptions about your model or your controller, and we expect the directives and affordances we build into Foundation for Apps will port nicely to other technology like Ember or Polymer.

Motion UI for Fun and Profit

The last piece of the Foundation for Apps puzzle will be a robust, easy to use motion and transition library to help you create an experience that really feels like an app. Modern apps (for the Web and native platforms) make heavier and heavier use of subtle (and sometimes not so subtle) animations and transitions to help create a smooth, engaging experience.

We started down this road when we built a motion UI for off-canvas into Foundation 5 and we'll be abstracting that out further to help you do the same kind of movement. It's not a tool for creating modals which explode out of the page with fireworks, but it should help your users better understand the way you move through the Web apps you'll be building and prototyping.

Forward the Foundation

We've developed Foundation primarily in the open since version 2 back in 2011 and this will be no different, as soon as we pin down a few core principles. Expect to see us talking more about the pieces we're building (and that we'd love your input and assistance on) in the coming months as we progress toward the release of Foundation for Apps later this year.

We've noted that the Web has been changing faster and faster for the last few years and we expect this pace to keep accelerating. We'll need a whole suite of tools to work on the Web and Foundation for Apps, Foundation for Sites (Foundation 5) and Foundation for Email (Ink) will help fill in some of those gaps for us and hopefully for you too. We can't wait to share all this with you, and in the meantime we'd love to hear your thoughts, questions, feedback or just a funny joke about Yetis in the comments.

Want to be part of the early code releases? Shoot us your credentials to get on the list.

Building blocks graphic
Foundation Building Blocks: Over 100 Components to Jump Start Your Projects
Screen shot 2017 05 16 at 2.54.30 pm
The New Foundation Docs: Learn Your Way
How Design Insights Transformed Foundation Building Blocks