Merge branch 'responsive-expanded-buttons' of https://github.com/andycochran/foundati...

# Conflicts:
#	docs/pages/button.md

diff --cc docs/pages/button.md
index dc45547497291bd96a9c775455f0dec20ec4b30f,e261e8041c574cc74e861ae64fa5df8c8b9515be..db058c89fc6b078ab9cb7aaa5352a35d733a8d61
--- 1/docs/pages/button.md
--- 2/docs/pages/button.md
+++ b/docs/pages/button.md
@@@ -44,21 -33,13 +44,22 @@@ A basic button can be created with mini
  
  Additional classes can be added to your button to change its size and shape.
  
 +<p>
 +  <a class="" data-open-video="3:23"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 +</p>
 +
 +<div class="docs-codepen-container">
 +  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/JNLVRb?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 +</div>
 +
  ```html_example
 -<a class="tiny button" href="#">So Tiny</a>
 -<a class="small button" href="#">So Small</a>
 +<a class="button tiny" href="#">So Tiny</a>
 +<a class="button small" href="#">So Small</a>
  <a class="button" href="#">So Basic</a>
 -<a class="large button" href="#">So Large</a>
 -<a class="expanded button" href="#">Such Expand</a>
 -<a class="small expanded-for-large button" href="#">Wow, Small + Expand for Large</a>
 +<a class="button large" href="#">So Large</a>
 +<a class="button expanded" href="#">Such Expand</a>
 +<a class="button small expanded" href="#">Wow, Small Expand</a>
++<a class="button small expanded-for-large" href="#">Wow, Small + Expand for Large</a>
  ```
  
  ---

diff --cc scss/components/_button.scss
index e71f26493189f8358aaf030314d2121e41bf404b,8cad1b2cebf5f5bc23bb2c0081ed6d72b636b8bd..3d9509e7ae25a468ad5f6f6654f288714a1708bf
--- 1/scss/components/_button.scss
--- 2/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@@ -263,19 -201,23 +263,26 @@@ $button-transition: background-color 0.
      @include button;
  
      // Sizes
 -    &.tiny     { font-size: map-get($button-sizes, tiny); }
 -    &.small    { font-size: map-get($button-sizes, small); }
 -    &.large    { font-size: map-get($button-sizes, large); }
 +    @each $size, $value in map-remove($button-sizes, default) {
 +      &.#{$size} {
 +        font-size: $value;
 +      }
 +    }
 +
      &.expanded { @include button-expand; }
+     @each $size in $breakpoint-classes {
+       @include breakpoint($size) {
+         &.expanded-for-#{$size} {
+           @include button-expand;
+         }
+       }
+     }
  
      // Colors
 -    @each $name, $color in $foundation-colors {
 +    @each $name, $color in $button-palette {
        @if $button-fill != hollow {
          &.#{$name} {
 -          @include button-style($color, auto);
 +          @include button-style($color, auto, auto);
          }
        }
        @else {