Zurb Foundation: How do you make buttons smaller on resize to a smaller screen?

Question

In Zurb Foundation 4, is there a way to automatically switch to the smaller button style when the browser is resized smaller or on a smaller screen?

For example when the screen is a standard desktop screen do this:

<a href="#" class="primary button">Button 1</a>

When the screen is resized smaller, do this:

<a href="#" class="small primary button">Button 1</a>

I have a button group of 6 buttons in a horizontal row and would like to use the small button class when the screen is resized smaller and the medium button class when the screen is "standard," is this possible?

Answer 1

This can be accomplished with Sass/Scss mixins and media queries. In your app.scss:

$medium-up: "only screen and (max-width:"#{$small-screen}")";
@media #{$small} { 
    .responsive-button {
        @include button($button-lrg, $primary-color, 0px, false, false, false); 
    }
}

@media #{$medium-up} {
    .responsive-button {
        @include button($button-sml, $primary-color, 0px, false, false, false); 
    }   
}

Just use the .responsive-button class we just created. Here is an example:

<div class="row">
    <div class="small-8 large-8 columns">
        <ul class="button-group round">
            <li><a href="" class="responsive-button">Lorem</a></li>
            <li><a href="" class="responsive-button">Qui</a></li>
            <li><a href="" class="responsive-button">Voluptatibus</a></li>
        </ul>
    </div>
    <div class="small-4 large-4 columns">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

This can be applied to any of the other Sass mixins described in the Official Zurb Foundation Documentation. Look at Media Queries and scroll to the bottom of the Buttons page.