Container width depends on configuration about styled-bootstrap-grid HOT 4 CLOSED

I'm working on it, this feature will have to force the module to get rid of the phone, tablet, desktop and giant media queries.

Major release incoming!

from styled-bootstrap-grid.

@dragma why remove the abstraction if the underlying numbers are made to be configurable? Is it tied to this issue in particular or part of a bigger overhaul?

from styled-bootstrap-grid.

Working on this issue made me realise that this module had a fundamental problem, and it is directly linked to those aliases sm => phone

Until now, "aliases" like desktop for lg weren't really aliases.
There was two entries with the same values.

Ex :

const breakpoints = {
  lg: 1234,
  desktop: 1234,
}

So, until then, when you update breakpoints yourselves with GridThemeProvider, you could do weird things like this :

const theme = {
  breakpoints: {
    lg: 1234,
    desktop: 4321,
  }
}

I have to find a way to "declare" aliases that are specifically bound to normalised breakpoints. :)
If I can do this, there will not be breaking changes in the usage anymore !

from styled-bootstrap-grid.

v1.2.0 published

max-width are now configurable through the <GridThemeProvider />

Ex:

const theme = {
  container: {
    maxWidth: {
      xl: 800, // or giant
    }
  },
};

ReactDOM.render(
  <GridThemeProvider gridTheme={theme}>
    <App />
  </GridThemeProvider>
  ,
  document.getElementById('root'), //eslint-disable-line
);

from styled-bootstrap-grid.