Introduction

Material-ui Layout V4

This library exposes a group of enhanced Material-UI components to build modern-web layout instantly.

We leverage high quality components from Material-UI and great interface library from React to let you turn your idea into product. From dashboard, to blog, to social webapp until mailbox layout. This library has proved to be compatible with these convoluted layout.

A little bit from v3. We had lessons learn from previous version (v3.3.4) that it has a lot of spaces to be improved. These are major points that we try to achieve in v4.

  • Reduce JS calculation and leverage css-in-js for server side rendering (no more blip at first paint)

  • Keep the library lean as much as possible. Get rid of lodash and don’t rely on specific css-in-js lib (jss is still used internally in Material-UI, so we cannot remove it)

  • Improve developer experience by rewriting with typescript and design new API

  • Add more documentation & troubleshoot requested from developers (thanks everyone)

  • Reduce bundle size and make it tree shakeable!

  • >=v4.4.0, support built-in RTL from material-ui

    The whole bundle size at v4.0.0 is around 55kB MINIFIED, 11kB MINIFIED + GZIPPED, but if you use only some components it will reduce. This is an example of Dashboard Layout, built from create-react-app. The size of layout is reduced to 39kB!. image

The why part

I created this because

  • It took me a lot of time to initialize dashboard layout when I have new projects or ideas to prove and I’m sure that a lot of you are the same as me.
  • Sometimes it is hard to refactor because the structure is so poor because someone isn’t deeply understand what he/she was doing, as a result, rewrite the whole layout which affect other parts of project and you heard your colleague shout “WTF” (it actually happened, at least in my experience).
  • Because we need to be fast to let others continue our work, we frequently write poor and a lot of code. However, we say we don’t have time to fix them. Eventually, spend all day paying technical debts.

Objectives

It must be easy enough to use, however still be able to adjust to be compatible with real word examples and usages. More importantly, it need to follow Material specs since we are 100% based on Material-UI. Last but not least, responsive is a must.