Conflict with bootstrap

[Cyril CHAPON]

The way elements are declared (eg: .container, .col-sx-12) conflict with bootstrap.

While it's understanding that one aims to replace bootstrap grid system, and almost works (except some opiniated choices, like rem usage, and except some people - many people - tweak bootstrap using LESS or SASS, and this completely breaks things with this module...), classes could be declared, maybe, with ...-flex-... or something, to allow both works together.

[Harshit Mehrotra]

I don't understand the use case of using this along with bootstrap if you don't intend on replacing bootstrap's grid system.

[Cyril CHAPON]

Exactly, the fact you can't anticipate each use-case one will attempt to cover with a library is presicely the point to make it avoid conflict.

[kj]

it is not meant to be used in conjunction with bootstrap grid.
if you use boostrap grid... then use the boostrap grid... or don't

[Marco Polichetti]

Using LESS, this library works very well without conflicts (just nest inside .flexboxgrid):

.flexboxgrid {
  @import (less) "../../../web/components/flexboxgrid/dist/flexboxgrid.css";

  .container-fluid,
  .container {
    padding-left:  (@grid-gutter-width / 2);
    padding-right: (@grid-gutter-width / 2);
  }

  .container {
    @media (min-width: @screen-sm-min) { width: @container-sm; }
    @media (min-width: @screen-md-min) { width: @container-md; }
    @media (min-width: @screen-lg-min) { width: @container-lg; }
  }

  .row {
    &:before,
    &:after { content: none; }

    margin-left:  (@grid-gutter-width / -2);
    margin-right: (@grid-gutter-width / -2);
  }

  [class^="col-"],
  [class*=" col-"] {
    padding-left:  (@grid-gutter-width / 2);
    padding-right: (@grid-gutter-width / 2);
  }
}

[Cyril CHAPON]

@kristoferjoseph

it is not meant to be used in conjunction with bootstrap grid.

Strange idea then, to take exactly same class names than bootstrap.

Maybe any disclosure or warning saying "fully incompatible with bootstrap" would be great.
(the lib is not only overriding .row and .col- classes, but also .container, which is the root for every bootstrap template........)

if you use boostrap grid... then use the boostrap grid... or don't

Well, I'm using bootstrap grid for my layout, and would like to be able to use this great lib for smaller things (ie: non-critical as flex is not supported in older browsers)
And same remark, when you're building atomic lib, it's basically a bad idea to try to anticipate each use-case

@gremo

Using LESS, this library works very well without conflicts (just nest inside .flexboxgrid):

Thanks, yes that was basically the idea, I wish SASS/LESS source was providen in the repo...