Material-ui: Document theme.mixins.gutters()

[bfirsh]

• [x] This is a v1.x issue (v0.x is no longer maintained).
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I was following https://material-ui.com/layout/grid/ to get a basic app set up. After copying and pasting the examples on that page, the grid had no gutter on the left and right hand side of the page.

Adding theme.mixins.gutters() to the root class produced the behaviour I wanted.

const styles = theme => ({
  root: {
    ...theme.mixins.gutters(),
    flexGrow: 1
  }
});

Current Behavior

I first looked at the example apps, but these were all centred, so didn't suffer from the same issue. Next, I dug through the source code of the Toolbar, which did what I expected, where I found the mixin.

This seems pretty essential for building any left-aligned app, so I would have expected it to be in the getting started guide. I had a bad on-boarding experience due to this.

[QzSG]

Please add this to the documentation asap, was about to implement my own breakpoint styles before I found this after pages of searching

[jedwards1211]

@oliviertassinari does ListItem no longer use theme.mixins.gutters? It seems like it used to use it, but now I don't see any @media query in the ListItemgutters class. Debatably a breaking change...I was using theme.mixins.gutters all over the place to align text fields and other things with the content of ListItems, and now it's not working...

[oliviertassinari]

What do you guys think of killing the theme.mixins.gutters method? I have never found a use case for it, working on different Material-UI applications.
What are you guys using it for? Could the Container component replace it?

[QzSG]

A quick code search on GitHub lists lots of existing MUI sites using theme.mixins.gutters for responsive left and right padding (gutters) between desktop and mobile screens. Not sure if official documentation were ever added for the gutters mixin, but the fact that thousands (44k on a rough search albeit most should no longer be maintained) of repositories are using the same mixin in their existing MUI styles seem to suggest it being a popular method to settle responsive gutters. I guess a small article on migrating from the old theme.mixins.gutters to the mentioned Container component would be nice. I am thinking if there are uses for when we do not exactly need the Container component, even though it looks pretty lightweight and flexible

[jedwards1211]

I created a demonstration of why I was using theme.mixins.gutters in #14751 (recent changes to ListItem gutters made my usage obsolete)
@oliviertassinari I only discovered it because I had to read the source code for ListItem to determine how to perfectly match its margins in my own code.

[jedwards1211]

@oliviertassinari I think you're right, it would be better if we get rid of theme.mixins.gutters. It's not being used in many places in the next branch anymore anyway. Do you think I should get rid of it in #14754?

[kaycebasques]

FYI the demo for Paper still mentions gutters: https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/paper/PaperSheet.js#L9

[oliviertassinari]

@kaycebasques We focus on the next branch.