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):

I agree with the Privacy Policy

import React from "react";
// @material-ui/core components
import { useTheme } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
// @material-ui/icons components

// core components

function Example() {
  const theme = useTheme();
  return (
    <>
      I agree with the{" "}
      <Box
        color={theme.palette.primary.main}
        component="a"
        textDecoration="none"
      >
        Privacy Policy
      </Box>
    </>
  );
}

export default Register;

Props

Please read more about it on the official Material-UI documentation:

Box
Flex Box

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:

Demo
API

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:

Demo
API

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:

Demo
API