When it comes to designing and developing our web products, it's probably safe to say that we're all concerned about future-proofing them. We have to be. After all, the web is changing so rapidly. We have to keep pace and try to stay ahead. If not, we could find ourselves obsolete, like last year's car model.
Keeping that in mind drives a lot of us. We're no different. We know that the concept of Mobile First has gained more and more momentum in the past year. Our mobile devices are becoming our internet tool of choice. Even if folks don't want to go responsive, sooner or later they're going to need to. Or else be left in the dust.
Foundation 4, the next iteration of our responsive framework, will be architected with a mobile-first approach. Not to fear, however, Foundation 3 has been a great tool and will continue to be so for a desktop-first approach. And we'll continue to support it.
So What is Mobile First?
Our friend and advisor Luke Wroblewski has been talking about it for years. He even coined the term back in 2009. To put it simply, it's about thinking about content first and design second. Content is kinda a thing on the web now after all.
Consider this — we can't control what size screen people will view our content anymore. It's out of our hands. With mobile first, you can meet this challenge.
Designing in this manner, you're writing all your code with small screens in mind for default styles. Using progressive enhancement, we can layer on style changes for larger screens by putting the CSS inside of media queries.
This means that any browser that doesn't support media queries will inherit the mobile layout, giving them access to the content but not the enhanced viewing experience. But it's the content that matters most.
With mobile first, you'll be thinking through functionality and organization to be optimized for small screens and long-scrolling pages.
What Does This Mean for Foundation?
The biggest change is going to be how you use the grid. We removed the "column(s)" class to provide more flexibility for those folks using straight CSS.
This means our HTML classes aren't quite as semantic, but we want people using the Scss mixins instead because those are truly semantic. For instance, you can use "small-#" and "large-#" classes to control the layout across devices easily.
We're pushing hard for people to us the Scss gem because of the mixins we're writing. With the grid mixin, for example, you can declare as many breakpoints as you want in your stylesheets and call the mixin within them to have an endless amount of layout options. Nifty.
UI elements will also have the ability to be built from mixins or by using a placeholder class that won't show up in your markup.
This means that people will be able to write truly clean HTML. They'll also be able to attach the styles to those elements using Scss mixins that will be compiled into CSS. This ultimately leads to more CSS duplication, but gives you such clean markup that it's worth the sacrifice.
Our Javascript is also being refactored with a new style guide to help with easier contribution from the public. To do so, we're using Zeptos as the default JS library, but jQuery can work as well. The boon is that this creates a much lighter weight default download.
A List of Planned Updates
Here's a list of the planned updates:
- Mobile First
- Semantic grid mixins
- Semantic UI elements mixins and/or placeholder classes
- Updating typography to include vertical rhythm on top of modular scale
- Form validation styles built into the core
- JS Styleguide updates
- JS plugin refactor for easier usability and getting started steps
- Updated download customizer with better caching and faster speed
- Documentation updates to match 4.0 updates
When Do We Get In?
We're continuing working hard on these updates. If you want to be a cool hipster and be ahead of the game, you can see progress on the 4.0-wip branch on Github. We must warn you though, that branch isn't quite yet in working order. So you are diving into unknown territory if you decide to use any of that code. We plan to release 4.0 mid-February, so be on the lookout and offer us any feedback you have before then!