👋 Some notes I took looking at the source code :)

Hi 👋 ,

I will gather my feedback on the project in this issue. You have done a great job so far! It’s opening a new path for Material-UI. I want this project to be an inspiring theme example. I will invest time into it.

• Use prettier? I do think that prettier is starting to be a standard in the JS ecosystem. Using it would ease my code reading experience, most likely the same for other people.
• Missing documentation live website.
• 29,5% compression possible with the src/assets/img folder. I have used imageOptim to get this figure.
• classes.root is equivalent to using className. https://github.com/creativetimofficial/material-dashboard-react/blob/88ee44627534ff217bc8fce6e2e91d0835bfc0d3/src/components/CustomInput/CustomInput.jsx#L18-L20
• the classNames() helper can avoid doing brittle class name manipulation. https://github.com/creativetimofficial/material-dashboard-react/blob/88ee44627534ff217bc8fce6e2e91d0835bfc0d3/src/components/CustomInput/CustomInput.jsx#L19
• to be cautious with: https://github.com/creativetimofficial/material-dashboard-react/blob/1e371ad12a501e1b8ee87585b8f1fbe6b24c7359/src/components/Cards/TasksCard.jsx#L5-L7 See: https://material-ui-next.com/guides/minimizing-bundle-size/ It can lead to bundles bloating without tree-shaking. It would be safer to do:

import BugReport from 'material-ui-icons/BugReport';
import Code from 'material-ui-icons/Code';
import Cloud from 'material-ui-icons/Cloud';

• Maybe we can use the spacing={16} property instead of: https://github.com/creativetimofficial/material-dashboard-react/blob/8e709abc4fc1357f38249300ffe3bf5fe537892a/src/components/Grid/ItemGrid.jsx#L6
• The global override might not be needed with https://github.com/creativetimofficial/material-dashboard-react/blob/e3ad7d53215e9f7ad056490ce6d3fed822881d26/src/assets/css/material-dashboard-react.css#L56-L67 https://material-ui-next.com/style/reboot/
• Try using function component over class component where possible, it’s lighter. https://github.com/creativetimofficial/material-dashboard-react/blob/e3ad7d53215e9f7ad056490ce6d3fed822881d26/src/components/Typography/Warning.jsx#L9
• It seems you are no using the theme in this components. It’s not an exhaustive list. I have most likely missed some:
  • https://github.com/creativetimofficial/material-dashboard-react/blob/e3ad7d53215e9f7ad056490ce6d3fed822881d26/src/components/Sidebar/Sidebar.jsx#L102
  • https://github.com/creativetimofficial/material-dashboard-react/blob/e3ad7d53215e9f7ad056490ce6d3fed822881d26/src/containers/App/App.jsx#L106
• You shouldn’t need to explicit the prefixes. css-vendor use feature detecting to do it. https://github.com/creativetimofficial/material-dashboard-react/blob/e3ad7d53215e9f7ad056490ce6d3fed822881d26/src/variables/styles.jsx#L23-L29
• jss-default-unit is making a lot of unit optional https://github.com/creativetimofficial/material-dashboard-react/blob/e3ad7d53215e9f7ad056490ce6d3fed822881d26/src/variables/styles.jsx#L32

-paddingRight: '15px', 
+paddingRight: 15, 

• Using theme.zIndex.modal + 2 could be more explicit https://github.com/creativetimofficial/material-dashboard-react/blob/e3ad7d53215e9f7ad056490ce6d3fed822881d26/src/variables/styles.jsx#L191
• I was surprised to see all the styles in one file. I like the simplicity it’s providing. But to be cautious with the bundle size implication. Right now, it’s fine (40kB raw, 26kB minified, 5kb gzipped). However, I don’t know if it’s going to scale with the pro version. You can consider moving some of the files to the components to take advantage of code splitting between the pages when it starts to be an issue.
• I’m surprised there is no usage of the MuiThemeProvider. For instance, setting the primary and secondary colors could have made the style override simpler.

[mbrookes]

to be cautious with:

 import { 
     BugReport, Code, Cloud 
 } from 'material-ui-icons'; 

Similarly with the recommendation here: https://creativetimofficial.github.io/material-dashboard-react/#/documentation/styles

See: https://material-ui-next.com/guides/minimizing-bundle-size/

[oliviertassinari]

I haven’t had the time to look at everything in detail yet. Give me a week or two.