Published on March 28, 2013 • Reading Time: 2 mins
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-#