Menu icon Foundation
Idea/Request: Breakpoint / Size classes for buttons

It would be great if we could have extended button classes for styling buttons based on responsive conditions.
Much like we have for 'visibility' and 'text alignment' utilities.

So for example we could have a button that is .expand and .large for small screens but inline and normal size for medium up.

Something like this as a possibility applied to an anchor tag:

class="button large-for-small-only expand-for-small-only"

PS: 'visibility' utilities also have classes for 'orientation' and 'touch' detection which would also be great to extend to these proposed button classes and possibly also the text alignment classes.

buttonsutility classessize classutilitiesresponsive buttons

It would be great if we could have extended button classes for styling buttons based on responsive conditions.
Much like we have for 'visibility' and 'text alignment' utilities.

So for example we could have a button that is .expand and .large for small screens but inline and normal size for medium up.

Something like this as a possibility applied to an anchor tag:

class="button large-for-small-only expand-for-small-only"

PS: 'visibility' utilities also have classes for 'orientation' and 'touch' detection which would also be great to extend to these proposed button classes and possibly also the text alignment classes.

Rafi Benkual over 4 years ago

My opinion on this: That would add a lot of extra code that most people wouldn't use. We want to only add classes for things that are used most or all of the time and not any more as it bloats the code.

Also in production, some people don't want to use the classnames so they'd have to write CSS anyways.

You can write this CSS

@media only screen and (max-width: 40em) {
  button.expand, .button.expand {
      padding-right: 0;
      padding-left: 0;
      width: 100%; 
    }
}