Foundation Grid classes for Tablet portrait - grid

Question

In Foundation Zurb 5, is there any ready grid classes for Tablet Portrait? I noticed that there are only three classes (small, medium, large). What if I want to have separate layout in Medium (tablet) portrait without writing specific media queries in my css file? I want something like (it makes very easy to my programmer):
.medium-portrait-12
.medium-portrait-11
.medium-portrait-10
.medium-portrait-9
.medium-portrait-8 etc.
I would appreciate if I can generate these classes using foundation setting files (SASS).
thanks,

Answer 1

You can add show-for-medium class on the element and it will be visibled only for medium screen
Here the doc
<div class="row">
<div class="medium-2 large-4 columns">
<p class="show-for-medium show-for-portrait medium-portrait-8">
<!-- Template for medium-portrait-8 -->
</p>
<p class="show-for-medium show-for-portrait medium-portrait-11 ">
<!-- Template for medium-portrait-11 -->
</p>
...
</div>
<div class="medium-4 large-4 columns">...</div>
<div class="medium-6 large-4 columns">...</div>
</div>
You can add show-for-portrait to display your block only for portrait display
Then you add your custom class (ex medium-portrait-11) and write your style in CSS

Answer 2

There is no way to accomplish this easily. If you want to take the time to create your own custom grid, just duplicate the foundation/components/_grid.scss and mod to your liking. However, you will need to create a custom media query for that range.
Portrait Tablet (Medium) view is always tricky. Consider how many people visit your site to base if you want to make this adjustment before investing the time and complicating your layouts.
A simple way to make the same adjustments that I have used in the past is to use visibility classes. The upside is that it is fast to protoype, the down side is that it leads to duplicated content.
<div class="show-for-portrait">
</div>
<div class="show-for-landscape">
</div>

Answer 3

I'm not sure if you have sorted this out but I had a quick look at the SASS files and found a couple of useful mixins. Is this what you mean?
#media #{$screen} and (orientation: portrait) and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)}) {
#include grid-html-classes($size:medium-portrait);
#include block-grid-html-classes($size:medium-portrait,$include-spacing:false);
}
So to use it in your HTML:
<div class="row">
<div class="columns small-6 medium-portrait-4 medium-3"></div>
</div>
(and for block grid)
<ul class="small-block-grid-2 medium-portrait-block-grid-3 medium-block-grid-3">
<li></li>
<li></li>
</ul>
I've only just started experimenting with these classes so there may be some issues across different devices.