It's been a little more than a month since we launched Foundation for Apps into the wild. And it's been great hearing all your thoughts on our latest framework! We're excited to learn how you're using Foundation for Apps so we can continue building atop what we've created.
So far, we've learned a lot creating this new framework — from new technology to just talking to the web community as a whole. Lessons that we wanted to share with all of you. Here's the 10 things we learned from building Foundation for Apps:
1. Flexbox Can Be Awesome, But It's Complicated
We decided to build Foundation for Apps using Flexbox instead of a traditional float-based grid. This let us do neat things like mix fixed- and fluid-width columns, drastically improve source ordering, and re-orienting grids. Nifty! What we mainly learned is that while Flexbox was amazing, it also has three different iterations for many different browsers. Figuring out what was supported across all browsers and how to maximize it was tough, but we ended up with a pretty sweet grid system because of it!
2. People love ASCII Art
By and large people had all sorts of warm fuzzy's for our ASCII yeti we created for the install. We tried tons of different ASCII Yetis, from full bodies to footprints, but loved the friendliness of our new Yeti's face that a few keystrokes could give us.
3. Naming Things is Hard
No, really it is. Four years ago, when we created Foundation for Sites, grid systems had been around and had pretty well-defined names for items. As we began looking at re-defining a grid system, we knew that things like rows and columns didn't always make sense once we flipped to a vertical axis. Some early ideas like 'group' and 'block' seemed really vague and even turned up as the basis for certain content management systems. We ended up defining things as grid- to start and then naming things how they were used. "Grid-block" was used as building blocks for your layout and "grid-content" was used to hold the content of your app.
4. Namespacing Can Be Even Harder
Using Angular allowed is to create components as single directives and mask the sometimes complex nature of things like modals and notifications. With that, namespacing is often utilized to keep your components separate from other libraries. When we first discussed how Foundation for Apps would use an 'fa-' to namespace its components, lots of people spoke up to tell us that they use Famo.us or Font Awesome, both of which name space with FA. We ended up settling on zf- which even had some name spacing competitions with Zend framework, but seeing as thats a PHP framework we assumed we'd never be used together.
5. Apps Don't Have Defined Responsive Patterns
ZURB has been doing responsive design for more than five years now and was even the first responsive framework. We've had time to develop patterns for how websites will respond and build off patterns that others have created. Responsive apps, however, have yet to develop their own design language. Native platforms have begun to experiment, but designers as a whole have yet to fully embrace common patterns. We took this challenge and created components that respond and transforms based on screen size. Things like scrolling divs that become slide-in panels on smaller devices and drop downs that convert to action sheets. We're still creating this language and paying close attention to the patterns becoming popular around the web.
6. Apps Doesn't Connotate Web Apps
Foundation for Apps was created with Web Apps in mind from day one. I'll repeat: Foundation for Apps was created with WEB APPS in mind! Building a fully responsive web app framework that could work anywhere despite the browser or OS was a must for us. What we quickly learned (and are still learning) is that native mobile applications have well monopolized the term 'app' and require clarification because of it. We're not against native apps or against phone-gapping the web for native, but our purpose was to create a system where you didn't need to chose a specific audience.
7. Routing is Hard
Angular is amazing, but getting designers to use it was hard since to make things like pages, or links required the knowledge of routes. We created a Gulp plugin to create those routes and make our framework much much much easier for people to use.
You'll write