Flexbox and Grids: your layout’s best friends

Re:Flexbox and Grids: your layout’s best friends by sillysaurus3 on Monday November 06, 2017 @03:33PM (#15638774)

Just use Bulma. You can drop it into any project. https://bulma.io/documentation/columns/sizes/

Your example can be accomplished like this:

  <div class="columns">
    <div class="column is-half">m:2*</div>
    <div class="column">1*</div>
    <div class="column">m:*1</div>
  </div>

There's a good reason to limit yourself to 12 columns: the layout is consistent across all common screen sizes, whether it's tiny mobile screens or huge desktop screens. If you have sizes like 1.374fr, you lose a lot of that automatic layout functionality.

[ Parent | on HN ]

Re:Flexbox and Grids: your layout’s best friends by c-smile on Monday November 06, 2017 @04:30PM (#15639193)

Bulma, as any other grid systems based on % units, is quite limited in real life.

Check this: https://sciter.com/images/wt-langs.png You see the same HTML markup there but in different languages. Text in most of European languages is longer.

This is HTML/CSS Sciter UI that uses flex units and flow property: https://sciter.com/docs/flex-flow/flex-layout.htm

[ Parent | on HN ]

Re:Flexbox and Grids: your layout’s best friends by sillysaurus3 on Monday November 06, 2017 @04:45PM (#15639282)

Hmm, why is it limited? I'm interested in hearing your experiences.

[ Parent | on HN ]

Re:Flexbox and Grids: your layout’s best friends by c-smile on Monday November 06, 2017 @04:53PM (#15639337)

Check screenshots above. There is a block having 4-columns layout. Each column there a) is flexible and b) uses min-content constraint. So widths of columns are unknown upfront - determined by actual content in grid cells.

That last part (use of actual content) is what you cannot reproduce using % units in principle.

[ Parent | on HN ]

Re:Flexbox and Grids: your layout’s best friends by SippinLean on Tuesday November 07, 2017 @10:15AM (#15643973)

That doesn't solve the problem the parent was describing. It just removes flex and sets 50% width on the half-column.

[ Parent | on HN ]

Re:Flexbox and Grids: your layout’s best friends by baby on Tuesday November 07, 2017 @04:12AM (#15641931)

Are you the laracast guy?

[ Parent | on HN ]

Re:Flexbox and Grids: your layout’s best friends by sillysaurus3 on Tuesday November 07, 2017 @06:49AM (#15642581)

Nope. But amusingly, you do know me. Shoot me an email if you want to know more.

Hope you've been well. Your 4chan board was hilariously cool.

[ Parent | on HN ]

Re:Flexbox and Grids: your layout’s best friends by e12e on Tuesday November 07, 2017 @12:41PM (#15645566)

(still) OT: now you two have made me curious about your story...

[ Parent | on HN ]