Columns?

[saiteki-kai]

Columns are missing?

[kulakowka]

yes, we need to create Column component. We will be grateful for the pull request.

[dotamir]

I'll be making a pull request If you haven't worked on that. Did you work?

[skbolton]

I have gotten really far with this and think I can get it in the next few days. I do want some feedback on somethings though.

There are just so many different sizes you can pass in for a column

• 1 - 12
• 'one-quarter', 'two-quarter'
• 'half'
• etc I am thinking it is just easier to have an is prop that you pass whatever size you want. So you end up with an api like.

  <Columns>
  // the numbers 1-12 would work either as string or number
  <Column is={2}></Column>
  <Column is='2'></Column>
  <Column is='one-quarter'></Column>
  <Column is='two-thirds'></Column>
  </Columns>

  Which I really like, but I would like to see what others think.

Second issue is all the responsive things you can pass to a column like the bulma docs have here. To implement that I could make it so that you can only pass one to is and then the rest you have to pass as classes to the Component. Or I have to make the is prop possibly be an array which I then add as classes for you like this (taking the exact code from the bulma docs example).

<Columns>
  <Column
    is={[ 'three-quarters-mobile', 'two-thirds-tablet', 'half-desktop', 'one-third-widescreen', 'one-quarter-fullhd' ]}
  >
    <code>is-three-quarters-mobile</code><br>
    <code>is-two-thirds-tablet</code><br>
    <code>is-half-desktop</code>
    <code>is-one-third-widescreen</code>
    <code>is-one-quarter-fullhd</code>
  <Column>
  <div class="column">1</div>
  <div class="column">1</div>
</Columns>

I think its a good compromise and keeps the api flexible, please tell me what you guys think @dotamir @kulakowka @Darklod

[dotamir]

@skbolton I agree with the first one. Do it. And the second one, I think it looks like good.

[kulakowka]

I think it should be:

<Column threeQuarters />
<Column twoThirds />
<Column half />
<Column oneThird />
<Column oneQuarter />
<Column fourFifths />
<Column threeFifths />
<Column twoFifths />
<Column oneFifth />

[skbolton]

Then how would we handle the numbers? And then how to handle the responsive sizes for all those options

[shy2850]

I prefer to use number only, but prop-name should be "span" or "size".

[kulakowka]

Maybe we can support all of this:

<Column threeQuarters />
<Column twoThirds />
<Column half />
<Column oneThird />
<Column oneQuarter />
<Column fourFifths />
<Column threeFifths />
<Column twoFifths />
<Column oneFifth />

<Column is="2" /> or <Column is={2} />
<Column is="3" /> or <Column is={3} />
<Column is="4" /> or ...
<Column is="5" />
<Column is="6" />
<Column is="7" />
<Column is="8" />
<Column is="9" />
<Column is="10" />
<Column is="11" />

<Column offset="1" /> or <Column offset={1} />
<Column offset="2" /> or <Column offset={2} />
<Column offset="3" /> or ...
<Column offset="4" /> 
<Column offset="5" /> 
<Column offset="6" /> 
<Column offset="7" /> 
<Column offset="8" /> 
<Column offset="9" /> 
<Column offset="10" />
<Column offset="11" />

<Column offsetThreeQuarters />
<Column offsetTwoThirds />
<Column offsetHalf />
<Column offsetOneThird />
<Column offsetOneQuarter />
<Column offsetFourFifths />
<Column offsetThreeFifths />
<Column offsetTwoFifths />
<Column offsetOneFifth />

<Colum narrow />

<Colum narrowMobile />
<Colum narrowTablet />
<Colum narrowDesktop />

[dotamir]

@skbolton So what you think about this?

[skbolton]

@dotamir I have since moved to a different bulma react component library. If you want my code that I was going to pr I can get it to you. It was mostly complete

[dotamir]

@skbolton Thank you. Yes, I'll be pleasure if you give me the codes. Push your changes on the PR.

[m8r1x]

Did this ever make it to past PR?

[kulakowka]

@m8r1x https://github.com/kulakowka/react-bulma/pull/20

[karanrajpal14]

@skbolton would you please share the name?