Documentation for customization

[redfrost]

Hi, thanks for the great grid system. It's very nice to use right out of the box, but it's hard to figure out where to start to modify some settings, for example gutter size between boxes.

It would be nice to have a detailed instruction or more examples.

[silvenon]

I'm not sure if this feature would be within the scope of this library. It is meant to only be a React wrapper around flexboxgrid, which doesn't offer this kind of customization.

I see why people would want to customize it, but currently I don't have any idea how to achieve this. Does anybody else?

flexboxgrid/src/css/flexboxgrid.css uses variables, maybe we could somehow use that, but it sounds very tricky.

[redfrost]

Thanks for your reply. In my case I got a simple sass setup like this to override default values, but I was wondering is there any way to approach in raw level in react by hijacking original variables, also I would like to see how other people do it.

$container-width: 1280px;
$container-gutter: 10px;
$breakpoint-sm: 960px;   // default 768px
$breakpoint-md: 1024px; // default 1024px
$breakpoint-lg: 1280px;   // default 1280px
$breakpoint-xlg:1920px;  // default 1920px

.grid {
  max-width: $container-width;
  padding-right: $container-gutter/2; 
  padding-left:  $container-gutter/2; 
  
    .col {
      padding: $container-gutter;
      @media (max-width: $breakpoint-sm - 1px) {
        max-width: 100%; 
        flex-basis:100%;
      }
    }
}

[silvenon]

Yeah, this is probably a pain, because you have to understand how flexboxgrid is written.

[silvenon]

I think CSS Modules support complicate our lives a bit, it would probably be much easier otherwise.

[alejandrolacasa]

Hi!

I faced this issue recently, and I was able to override the variables using webpack.NormalModuleReplacementPlugin like this:

/* webpack.config.js */

const NormalModuleReplacementPlugin = require('webpack');

// ...
plugins: [
      new NormalModuleReplacementPlugin(
      /node_modules\/flexboxgrid\/dist\/flexboxgrid\.css/,
      require.resolve('./src/styles/custom-flex-box-grid.css')
    )
]
// ...

And then, in that custom file:

/* custom-flex-box-grid.css */

@import 'flexboxgrid/src/css/flexboxgrid.css';

:root {
  --gutter-width: 0;
}

Hope this can be usefull!

[planetflash]

Any idea how to do this on the latest version that uses flexboxgrid2?

[jsergiu]

I think one way would be to have more properties on Row and Col to allow more flexibility. I will try to have a look.

[theetrain]

This affects my usage of the component. Seeing that react-flexbox-grid consumes plain CSS from flexboxgrid2, it's not straightforward to override CSS4 variables programmatically. I was thinking of approaching this problem a couple ways:

1. Refactor flexboxgrid2 to use Sass, and allow the consumer of react-flexbox-grid to provide overrides to its source files, and then be responsible for building react-flexbox-grid
2. Refactor react-flexbox-grid to use a CSS-in-JS solution such as Emotion, that way react-flexbox-grid can accept settings as a prop and perform composition to override values and classes from flexboxgrid2

If either of these proposals seem attractive, let me know and I'll be glad to contribute.

[lalomts]

I just created a CSS-in-JS version that can be easily customized by passing an object:

const gridConfig = { 
  gutterWidth: 16, 
  outerMargin:8 
}

<div className={ FlexGrid.grid(gridConfig)}>  </div> 

Let me know what you think: https://github.com/LaloMrtnz/flexgrid-js 😛