Zurb’s Foundation is great. It’s so great that i use it on almost every project. The only thing that i tend to miss out of the box is the fact that Foundation treats tablets like kind of a third wheel. Sure you can change the breaking point for the mobile grid but it doesn’t change the fact that having only one breaking point simply isn’t enough most of the time.

I have previously turned to media queries and similar tricks to get around this neusence but until one evening i decided to crack open Foundation’s files and have a look at the inner workings of this beast. It turned out the grid system was a lot less complicated that i thought so i have used some of the build-in functions to make a second breakingpoint aimed at tablets.

The code takes advantage of Foundation’s built in “Convert-Number-to-Word” function which makes the whole thing alot easier.

Simply add this code to app.scss and you should be able to use .tablet-# just like you use .mobile-#

The Code

/* Tablet Optional breakpoint */

/* Medium display targeting */
@media only screen and (max-width: 768px) and (min-width: 480px) {
  // Creating column classes
  @for $i from 1 through $totalColumns {
    .#{convert-number-to-word($i)} {
      @for $t from 1 through $totalColumns {
        &;.tablet-#{convert-number-to-word($t)} {
          width: gridCalc($t, $totalColumns);
        }
      }
    }
  }
}

Example

<div class="row">
  <div class="three tablet-four mobile-one columns">
    .three.tablet-four.mobile-one.columns
  </div>
  <div class="nine tablet-eight mobile-three columns">
    .nine.tablet-eight.mobile-three.columns
  </div>
  </div>
  <div class="row">
    <div class="six tablet-six mobile-two columns">
      .six.tablet-six.mobile-two.columns
      </div>
    <div class="six tablet-six mobile-two columns">
      .six.tablet-six.mobile-two.columns
    </div>
  </div>
  <div class="row">
    <div class="nine tablet-two mobile-three columns">
      .nine.tablet-two.mobile-three.columns
    </div>
    <div class="three tablet-ten mobile-one columns">
      .three.tablet-ten.mobile-one.columns
    </div>
</div>