Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button sizes, could be responsive #1572

Closed
antoniobrandao opened this issue Dec 29, 2017 · 36 comments · Fixed by #3484 · 4 remaining pull requests
Closed

Button sizes, could be responsive #1572

antoniobrandao opened this issue Dec 29, 2017 · 36 comments · Fixed by #3484 · 4 remaining pull requests
Assignees
Labels

Comments

@antoniobrandao
Copy link

antoniobrandao commented Dec 29, 2017

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
Copy link

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
Copy link

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
Copy link

@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
Copy link
Author

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
Copy link

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
Copy link

Madgame3 commented Feb 5, 2018

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
Copy link
Author

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

@Madgame3
Copy link

Madgame3 commented Feb 8, 2018

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
Copy link

nightillusions commented Mar 29, 2018

@raygervais @svitlana-galianova any news on this?

@rikoz
Copy link

rikoz commented Apr 10, 2018

still waiting for updates on responsive button sizes

@Botanistt
Copy link

I am surprised that Bulma lacks something so simple.

@PhotoAtomic
Copy link

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?

@stale
Copy link

stale bot commented Sep 4, 2019

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.

@stale stale bot added the stale label Sep 4, 2019
@Vinnl
Copy link

Vinnl commented Sep 4, 2019

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?

@stale stale bot removed the stale label Sep 4, 2019
@Duke360
Copy link

Duke360 commented Sep 4, 2019

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

@bkarlson
Copy link

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

@ggdx
Copy link

ggdx commented Oct 26, 2019

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

@simultsop
Copy link

simultsop commented Nov 2, 2019

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
Copy link

stale bot commented Apr 30, 2020

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.

@stale stale bot added the stale label Apr 30, 2020
@gluons
Copy link

gluons commented Apr 30, 2020

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

@stale stale bot removed the stale label Apr 30, 2020
@thejmitchener
Copy link

+1

2 similar comments
@jcantrel
Copy link

jcantrel commented Jun 1, 2020

+1

@Arrig0
Copy link

Arrig0 commented Sep 15, 2020

+1

@jgthms jgthms self-assigned this Sep 15, 2020
@jgthms jgthms added the feature label Sep 15, 2020
@ryahpalma
Copy link

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

@faraznisar
Copy link

I don't know you all but bulma seems dead in the water if it takes ~4 years for something as basic as this to materialise. In my use case it's not only about buttons but also inputs should have a responsive pattern because on mobile the inputs are a little too big -_-

My team suggested we use it. I frankly am over it. The support just sucks, get back to bootstrap or tailwind, maybe even material ui but no bulma.

@ryahpalma
Copy link

ryahpalma commented Nov 23, 2021 via email

@shieldcy
Copy link

+1....

@cannaclinicdev
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment