Extend Zurb Foundation Visibility Classes with a "tiny" media query

Question

For a Zurb Foundation fan who wants a challenge. I'm having trouble getting my brain around the visibility classes of Zurb Foundation 5. I understand conceptually what's going on, but I'm trying to add an extra size to the visibility classes, namely "tiny". I've worked in the "tiny" media query throughout the rest of the components that I need, but this visibility stuff is kicking my butt. I just can't keep track of what's overriding what!

Here is the original _visibility.scss file.

Does anyone want to take a shot at working in .show-for-tiny, .show-for-tiny-only, .hide-for-small-down, and all the other additions needed in all the media queries?

(Adding more specifics due to feedback) When viewing the referenced _visibility.scss file you can see that there are dozens of show and hide classes. What would the code need to look like to account for a "tiny" size for all media queries (tiny, small, large, xlarge, xxlarge)?

The actual size ranges are not all that important to me, as they will probably be updated on my end later. But if you want an estimation, it is as follows:

$tiny-range: (0px, 480px); // (0em, 30em)
$small-range: (481px, 640px); // (30.063em, 40em);
$medium-range: (641px, 1024px); // (40.063em, 64em);
$large-range: (1025px, 1440px); // (64.063em, 90em);
$xlarge-range: (1441px, 1920px); // (90.063em, 120em);
$xxlarge-range: (1921px); //(120.063em);

Answer 1

I forked the repo on Github and added a new media query of tiny, corresponding to 0-30em.

For demo purposes I compiled the scss into css and created a jsFiddle. By resizing your browser you'll see the various visibility classes take effect.

The grid remains the same as far as when the columns collapse.

For a detailed list of changes, view the diff stats.

Download the source here.