Material-ui: Grid system suggestion?

[0x80]

I am currently using skeleton as my css/grid framework but I notice that not all components in material-ui seem to play well with this. For example the input fields trump over the grid boundaries and when I limit them using skeletons "u-max-full-width" class, the animations still go over.

Could you maybe suggest a grid system that works well with mui? I guess it makes sense to choose a reactified grid implementation like react-grid-layout maybe. Any recommendations?

[0x80]

I just got a little deeper into the material-ui less files, and I now understand it probably doesn't make much sense to use something like skeleton alongside material-ui, so I'm ditching that.

[gabriel-laet]

@0x80 Yes, I guess a grid solution like this implementation of Flexbox makes more sense, and it should work with material-ui.

[0x80]

@gabriel-laet Meanwhile I dug into your documentation pages code. I found it a really nice and clean example of how to build a site with react and material-ui. I don't think I need a grid system after all. Thanks for that!

[jarvismartin]

Which "documentation pages code"? I'm sure a link would be appreciated by a lot of us...

[mmrtnz]

@jarvismartin I think @0x80 is referring to the source code for the documentation site. They begin at the docs folder here:
https://github.com/callemall/material-ui/tree/master/docs

but to see specific pages go to this folder here:
https://github.com/callemall/material-ui/tree/master/docs/src/app/components/pages

The documentation site was created using mui and serves as a much more robust example. I would also suggest you familiarize yourself with React basics before reading the source:
http://facebook.github.io/react/

Hope this helps!

[jarvismartin]

Thank you! I'm sure other people who end up here via web searches will be thankful, too.

[0x80]

Yes that's what I was referring to. Meanwhile I learned about css flexbox attributes and planning to use that where I need responsive positioning. I don't think you need components for it but I'm going to give react-flexbox a try.

[ezmiller]

@gabriel-laet (or anyone else) would you mind elaborating a little bit about why it makes sense to build without a grid when using react and material-ui?

[0x80]

@ezmiller I don't think using react or material-ui changes anything to the question whether you want to use a grid system. If you have the need for a grid system, you will still need it in react. Personally I simply learned that css flexbox can do all I need (I don't need to care about older browsers), and I'm doing that with plain divs and css classes. A library which uses components for this might be a bit cleaner but I don't feel I need it at this point. Maybe this (article)[http://philipwalton.github.io/solved-by-flexbox/demos/grids/] helps.

[lucygeneric]

Thanks 0x80, you really put me on to a good solution there.

[roylee0704]

But what about the grid-list component by material-ui ? Wasn't that for grid system?

[0x80]

@roylee0704 yes seems useful for lists specifically. I think grid systems are also used for whole page layout but I don't use them now. The grid-list component didn't exist yet at the time this question was posted

[roylee0704]

@0x80 Oh, in fact according to: Material Design Specs: Grid lists, it says:

Grid lists are an alternative to standard list views. Grid lists are distinct from grids used for layouts and other visual presentations.

So perhaps, grid-list at material-ui is not built for layouts system.

[grigio]

Another approach is React Native Web https://github.com/necolas/react-native-web , I don't know if it is compatible with material-ui but a common abstract way to represent rows and cells seems good

[roylee0704]

Shameless-plug: consider this one? react-flexbox-grid.
It is a set of React components implementing flexboxgrid.css with the power of CSS Modules. :)