One of the hidden features included with Foundation 4.3 is the Tablet or Medium grid. This isn't enabled by default but it is super easy to implement. I just recently added it on this site. Lets take a look at how I went about it.
If you are using the sass version of foundation it is super easy to implement. Just uncomment the line:
// Use this grid if you want to start using the new Foundation 5 grid early. // It will change breakpoints to min-width: 640px and 1024px. // @import "foundation/components/grid-5";
Thats pretty much it. After running compass compile or watch or automatically if you are using something that supports the Sprocket Asset Pipeline such as Rails or Middleman. Well not exactly, what seems like a simple change has some pretty drastic changes on an already existing site.
All of your medium grid elements will act as mobile, unless you add them specifically. Sometimes this is what you want, but often it is not. A tablet has quite a bit of screen real estate so you don't want to start stacking everything necessarily.
So what do you do? Just mimic your large classes. So if you have a .large-6 add a .medium-6 to match it. If you have a .large-10.large-uncentered add a .medium-10.medium-uncentered to match it. The same goes for .large-centered and just about everything else.
In my case I wanted to mimic the large grid for nearly everything. The navigation, the blog listings and so on. There was one area where I made a minor tweak where I believe it is improving the user experience.
<% wrap_layout :layout do %> ... <div class="row"> <div class="large-8 large-centered columns"><div class="entry-content"> <% test_featured_image = current_page.data.featured_image %> <% if ( defined?(test_featured_image)) %> <div class="row"> <div class="small-12 medium-8 medium-centered large-12 columns"> <p><img src="<%= current_page.data.featured_image %>"></p> </div> </div> <% end %> <%= yield %> </div></div>
</div>
...
<% end %>
I spend a ton of time reading blogs both on my computer and on my iPad. Often most blogs do one of two things. They either stretch the content out from edge to edge or they add white space to the sides to add to the readability. Well, on desktop browsers that is. I can't tell you how frustrating it is when a blog does this on my iPad and disables the zoom. This means I get this really compressed column of text that just makes it irritating to read. Sure you can use a tool such as readability to improve this, but I think that blogs should provide a great experience by default on the browser.
So, this was a case where I left the medium grid off. This means on a desktop browser with the large grid you you get a reasonable amount of white space which improves readability, but I get edge to edge on my iPad, which also improves readability. The problem is that I calculated images sizes for retina iPhones, 320px wide doubled to 640px. On the iPad now, 640px isn't enough to fill the screen. In addition, I think it would take up too much screen real estate even if I took this approach.
So what I came up with was to wrap my image with a .small-12.medium-8.medium-centered.large-12.columns which acts to compress the image width on the medium grid.
Have you used the Zurb Foundation 4.3/5 Medium Grid yet? What else have you discovered? Do you have any questions about it? Let me know in the comments.
