Why use a large-n class if there is already a medium or small-n class?

Question

While going through Foundation 5 samples and the index.html packaged with the zip, I see that many times there'll be markup like this:

<div class="large-4 medium-4 columns"> ... </div>

Once you have medium-4, won't that be inherited for larger displays as well?

Along the same lines, sometimes there will be:

<div class="large-12 columns"> ... </div>

Is that really necessary? Doesn't a column by default take up 12 columns?

Answer 1

Yes, because Foundation is a mobile-first framework, any larger class will inherit the number of columns from the smaller classes.

An example of why you may want to specify small-X medium-X large-X, etc. is when using those classes in combination with visibility. Let's say we have three columns in a large display, e.g.

<div class="small-12 medium-6 large-4 columns">
    COLUMN #1 with stuff that shows in a small, medium, or large width screen.
</div>
<div class="medium-6 large-4 columns show-for-medium-up">
    COLUMN #2 with stuff that shows in a medium or large width screen.
</div>
<div class="large-4 columns show-for-large-up">
    COLUMN #3 with stuff that shows in a large width screen only.
</div>

For a medium width screen when COLUMN #3 is hidden, you'll want COLUMN #1 and COLUMN #2 to have the class medium-6. And for a small width screen when COLUMN #2 and COLUMN #3 are hidden, you'll want COLUMN #1 to have class small-12.

Hope this helps!