Bulma: Add ability to use different number of columns on different breakpoints

[daralthus]

Similarly to col-sm-4 vs. col-xl-4 in bootstrap.

[jgthms]

Yes, this is somewhat planned. Not sure how though.

[eko24]

@jgthms you can take a look at bootsrap source files regarding this feature:
Scaffold gird by 'make-grid' method: grid.less
Itself 'make-grid' method: framework.less

So I think this is most important part of the code from grid-framework.less:

.make-grid(@class) {
  .float-grid-columns(@class);
  .loop-grid-columns(@grid-columns, @class, width);
  .loop-grid-columns(@grid-columns, @class, pull);
  .loop-grid-columns(@grid-columns, @class, push);
  .loop-grid-columns(@grid-columns, @class, offset);
}

Which also uses reference to other methods.
Assign this item to me if you want me to help you out with this one :)

[itsdarrylnorris]

Here is a grid system base on Flexbox http://flexboxgrid.com/. Something that we might be able to integrate into into this framework or do something similar.

[ivanistheone]

For reference, http://flexboxgrid.com/ uses the syntax col-[xs|sm|md|lg]-nn where nn is out of 12.

<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4"> ... 

This feels comfortable coming from bootstrap so +1 for implementing similar API.

[PhillippOhlandt]

I am for something like

<div class="column is-6-mobile is-2-tablet is-2-desktop"></div>

It fits better into the naming conventions of bulma.

[nathanjessen]

Here is a sample mixin. Just use the mixin under .column in grid.sass

=make-grid
  @for $i from 1 through 11
    &.is-#{$i}
      flex: none
      width: ($i / 12) * 100%
  +tablet
    @for $i from 1 through 11
      &.is-#{$i}-tablet
        flex: none
        width: ($i / 12) * 100%
  +desktop
    @for $i from 1 through 11
      &.is-#{$i}-desktop
        flex: none
        width: ($i / 12) * 100%

.column
  +make-grid

[PhillippOhlandt]

Disabling flexbox on a flexbox grid is not a good solution IMO.

[JustSteveKing]

+1 @PhillippOhlandt - the reason people are looking at Bulma is because of the Flexbox capabilities. Removing this we may as well give up and go back to Bootstrap ...

[nathanjessen]

@PhillippOhlandt that should be opened as a separate issue. Doesn't directly relate to adding responsive column classes. In my example, my mixin takes preexisting code to create responsive classes. But yes, I agree we shouldn't be setting flex: none; for the same reason plus it creates a lot of unnecessary output

[jgthms]

This has been implemented: http://bulma.io/documentation/grid/

[PhillippOhlandt]

@jgthms The solution with half third quarter isn't very flexible because you can't use the 12 column grid.

[psi-4ward]

Solution is not flexible enough. Or how can i switch from 3-3-3-3 to 4-4-4 and then to 6-6 on defined breakpoints?

[nathanjessen]

@psi-4ward Did you look at the "Different sizes per breakpoint" section? I think you would want columns defined as <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">

[wing5wong]

this solution misses some required column configurations.
How can we have, say a grid of 2/12 columns (one-sixth)
<div class="is-half-mobile is-one-third-tablet is-one-sixth-desktop column">1</div>

[frederikhors]

@wing5wong, @psi-4ward Any news on this? @jgthms, can we have a is-one-sixth-? Does it make sense?

[ibnuh]

@wing5wong, @psi-4ward Any news on this? @jgthms, can we have a is-one-sixth-? Does it make sense?

You can use is-1-mobile ... is-12-mobile

https://bulma.io/documentation/columns/sizes/#12-columns-system