Material-UI Grid
Our Material-ui grid is a powerful mobile-first flexbox grid which helps you build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
Breakpoints
We’ve changed the default Material-UI breakpoints with the following:
breakpoints: {
values: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
},
},
You can check them out inside our
src/assets/theme/theme.js
file, inside the
createMuiTheme
function.
Box
The Box component serves as a wrapper component for most of the CSS utility needs.
If you’ll search for it in our project, you will find out that we’ve used it in most of our files and components.
We’ve used it mostly with flex-box utility props: https://material-ui.com/system/flexbox/?ref=creativetim#flexbox
But we’ve also used it to add utility props, such as creating nice anchor elements (since the Material-UI theme provider does not have an option of adding styles for anchor elements):
Props
Please read more about it on the official Material-UI documentation:
Container
Inside our theme file (src/assets/theme/theme.js
), you can search for the
MuiContainer
keyword. Here, you will see that we’ve added and overide some of the
Material-UI styles, to make this product look more like the Argon
Dashboard one.
Props
Please read more about it on the official Material-UI documentation:
Grid
The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
Grid container
On the
Grid
element from Material-UI, you need to set
container
prop. You can leave it like so, or you can set like
container={true}
. The component will have the flex
container
behavior. You should be wrapping items with a
container always.
We’ve removed the default width set by Material-UI, and we’ve added
some extra margins to this component. To check out our
modifications, please go inside
src/assets/theme/theme.js
file, and check the
container
prop of the
MuiGrid
object.
Grid item
On the
Grid
element from Material-UI, you need to set
item
prop.
You can leave it like so, or you can set like
item={true}
. The component will have the flex
item
behavior. You should be wrapping items with a
container always.
We’ve added some extra paddings to this component. To check out our
modifications, please go inside
src/assets/theme/theme.js
file, and check the
item
prop
of the
MuiGrid
object.
Props
Please read more about it on the official Material-UI documentation:
Hidden
Quickly and responsively toggle the visibility value of components and more with the hidden utilities.
We’ve used it mostly with the CSS variant, since on some occasions, the JS one would work a bit slower.
Here are some the files where we’ve used it:
-
src/components/Dropdowns/NavbarDropdown.js
- used to make the button text disappear on responsive mode -
src/components/Navbars/AuthNavbar.js
- used for the responsive of the navbar/appbar menu, i.e. make the desktop menu disappear and make the mobile menu appear instead of it -
src/components/Sidebar/Sidebar.js
- the same as above -
src/views/admin/Icons.js
- to make the iframe for the Material Design Icons disappear on mobile devices
Props
Please read more about it on the official Material-UI documentation: