Bulma: Button sizes, could be responsive

[antoniobrandao]

These sizes are great, but useless if we need them to be responsive. Would be great if there was a Bullma-way to make them responsive. Right now I did it myself, but it feels hacky.

Docs:

<a class="button is-small">Small</a>
<a class="button">Normal</a>
<a class="button is-medium">Medium</a>
<a class="button is-large">Large</a>

Hacky code: (not a suggestion)

@media screen and (max-width: $breakpoint_6)
  .button
    font-size: 15px !important
    &.is-small
      font-size: 13px !important
    &.is-medium
      font-size: 18px !important
    &.is-large
      font-size: 22px !important

@media screen and (max-width: $breakpoint_5)
  .button
    font-size: 14px !important
    &.is-small
      font-size: 12px !important
    &.is-medium
      font-size: 17px !important
    &.is-large
      font-size: 20px !important

@media screen and (max-width: $breakpoint_4)
  .button
    font-size: 13px !important
    &.is-small
      font-size: 11px !important
    &.is-medium
      font-size: 16px !important
    &.is-large
      font-size: 18px !important

[raygervais]

I like the idea, but disagree with the approach of using media breakpoints to determine size, more so I'm not convinced hard coding in pixels is the best way to go either. Just my $0.02. Perhaps consider expanding similar to how I have done for #1535, which adds size modifier classes so that the developer has more choice over the styling.

Again, just my thoughts, I'm still waiting for merge / validation that this is what @jgthms would like going forward.

[svitlana-galianova]

Hello, I would like to work on this issue. I agree with @raygervais , using pixels is not the best way, so I would like to try his idea with size modifiers.

[raygervais]

@antoniobrandao, just want to confirm we are on the same page: Are you describing functionality not found in the size classes listed here? https://bulma.io/documentation/elements/button/#sizes

Simply curious, having worked with @svitlana-galianova to investigate how this would be best implemented / extended, we saw that a lot of the ground work was already in place, thus referencing back to the documentation.

[antoniobrandao]

Hi, thanks for the quick replies. Please disregard my hacky example, it was by no means a suggestion.

I am familiar with that part of the documentation, included the example code in the original comment. My problem is, they are fixed sizes. I do love the idea of having these size classes, they make sense and are very helpful. It just feels to me intuitive that they could become responsive somehow.

This would also affect border-radius, font-size, and icon size

In my current project, a responsive website, I had to customise font-size, border-radius, icon size for each button size at each breakpoint 😞

Personally I would be very happy if there was a simple class that we could add to these buttons, to make them responsive, according to predefined defaults.

For example, imagine just adding a class "is-responsive" to a "is-large" button:

.button .is-large .is-responsive

Would make the button change in size according to Bulma defaults, while remaining "Large" in proportion:

• In Desktop, it would have the current "is-large" size.
• In Tablet it would have a X% smaller size
• In Smartphone, it would become even smaller by another X%
• And so on
• Providing of course, the ability to customise these sizes, as it is possible for all other Bulma defaults. But it would be great if one could rely on the defaults!

So the "is-large" class (and the others) would make sense in every Bulma breakpoint, not just in the default size.

Thanks again

[raygervais]

Makes sense what you are saying @antoniobrandao, I'll work with @svitlana-galianova after 2018 begins to implement to the spec you described above. It makes sense now with that added description. I suppose I'll reference how my own PR was done (ratio wise, styling wise) for the added is-*, which follows suit to the suggested is-responsive css class.

[Madgame3]

I ran into a similar issue. My solution was to use buttons inside columns while also adding the is-fullwidth class to meh buttons. Gave it the responsiveness I was looking for without having create my own css classes.

[antoniobrandao]

@Madgame3 I suppose that takes care of the width, but not the text size?

[Madgame3]

I’ll have to play around with it a bit but try adding a text modifier class is-size-1-mobile is-size-2-widescreen


[nightillusions]

@raygervais @svitlana-galianova any news on this?

[rikoz]

still waiting for updates on responsive button sizes

[Botanistt]

I am surprised that Bulma lacks something so simple.

[PhotoAtomic]

i ran into the same problem, also other people on stackoverflow (https://stackoverflow.com/questions/53145045/bulma-input-button-size-on-tablet) seems to have the same need, but i'm unable to find an out-of-the-box solution
is there any progress on this issue?

[gauravmc]

For anyone looking for a workaround, at least for simple cases, here's a way: I added two buttons side-by-side – the bigger one with is-hidden-touch on it, and the other one with is-hidden-desktop.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Vinnl]

I hate having to spam all subscribers with another comment, but this is still an unresolved issue that affects many people - so I suppose it shouldn't be closed yet?

[Duke360]

As far as I know this is still an issue that need to be addressed with an out-of-the-box solution

[bkarlson]

actually, just stumbled upon this, and is-size-4-desktop is-size-5-mobile works

[ggdx]

Nice one @bkarlson, just stumbled onto this too. Should probably make it's way into the docs...

[simultsop]

actually, just stumbled upon this, and is-size-4-desktop is-size-5-mobile works

Sadly is-large-desktop or is-small-mobile doesn't work.
This situation kinda makes using sizes nonsense.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[gluons]

This is feature request. Don't dare to close Stale bot.

[bostondigitalio]

+1

[jcantrel]

+1

[Arrig0]

+1

[ryahpalma]

Using is-size-*-desktop is-size-*-mobile as @bkarlson mentioned it worked perfectly, waiting for the feature.

[haacked]

In addition to is-size-*-desktop is-size-*-mobile are there plans for the friendly named sizes such as is-small-mobile, is-medium-tablet etc?

[gahia]

+1 for is-small-mobile, is-medium-tablet, etc...