There is a lot of pre-built, reusable, abstracted, encapsulated, and tested code available to use nowadays. In Frontend, we call this code a building block or shorter, a component. Good developers copy, great developers steal.
- I'll refer to Material UI as MUI and to Ant Design as Antd in this article.
- I won't supply code examples for the described components, but instead, links to the documentation in the cheat sheet as it's well-written and full of use-cases.
2MUI Box and supplementary example of using it: (hard to find in the documentation) Usage, it's this missing component that you're looking for when using various Grid systems, e.g. for applying additional spacing or just any CSS property when you want to avoid additional boilerplate by creating a styled-components (or similar) wrapper just for one style. Didn't find a version of this one in Antd.
4Antd Space, only found it in Antd, another utility component used for spacing, simplifies boilerplate, includes direction changing and can guard unified spacing between e.g. group of buttons.
5MUI Hidden, I miss it a lot in Antd, had to implement my own components for hiding content on different breakpoints. MUI does a great job there by exposing a straightforward API that allows manipulating content easily for different devices.
6Antd Descriptions, often in admin portals, there is a lot of detail views where content should be properly formatted and adjusted even if elements have different widths. As with the previous one, I miss it a lot, but in MUI. Looks like combining these two powerful component libraries would make the world better.
7MUI Icons and Antd Icons, at some point, I got bored of finding perfect icons for my websites, built-in packages came to the rescue. It's an additional bundle size, but most of the time it's worth as icons will be unified across the entire system and it's better for designers to create an only brand, unique icons. There are optimization methods for decreasing bundle size, e.g. this one written in MUI documentation.
8For a more in-depth explanation of the components, please read the full article.
In the modern Frontend world, everything is built and composed of components. They're building blocks of any UI. Both Developers and Designers started using this term in their work. It might consist of different definitions, but the idea is the same.
A Designer creates e.g. Button component in Sketch which has concrete properties such as width, height, color, font size, etc. It also has a concrete behavior, hover effect on click, and could be presented in different states. Given the Sketch file, a Developer can implement the Button component now. To avoid duplication and follow the DRY principle, Button should be reusable and abstracted into e.g. React, Angular, Vue, or Web component. This component should have proper HTML structure, predefined CSS styles, JS behavior and can be controlled through properties, for example, it could have a property
type that would allow changing Button state to
secondary, by default it would have a
The Button example might sound trivial, but in practice, there is a lot to cover. There needs to be a unified theme that includes different colors, spacing rules, typography settings, and much more. Components need to work in different browsers (god damn IE 😅) and be properly tested. When creating an MVP, there is no time for that.
And that's why we reuse what others built for us. MUI or Antd are the most popular Design Systems and have free to use MIT License, and React Component Libraries based on these principles. It's fun to build components from the scratch, but it's all about finding the right balance. I highly recommend checking out all the components in their API, but in this article, I will focus on some utility components that can save you time, reduce boilerplate code, unify styling in your application, and simplify workflow with designers.
A common misconception is that MUI or Antd are absolute, that's not true! They provide the fundamentals that you can base off and still have a unique, brand look for the application. And all of that without spending a huge amount of time on implementing components behavior or supporting different tweaks in older browsers. It's basically a starter pack for your next MVP.
I completely understand and respect Developers who code components from the scratch, but I also feel sorry for them to maintain, test, make the code compatible with all the possible browsers. And at the same time, deliver features, meet deadlines and often, work under the pressure. I'm kind of a lazy Developer who loves to reuse what others have built and expand on that to achieve the results.
I've been working on multiple Frontend projects, from small to large ones and I can assure you that in 99%, picking up a pre-built Design System with Component Library such as MUI or Antd was a perfect choice. There are downsides of this approach like with any other you would go for, but let's focus on the bright sides, rite?
Let's dive in components you shall fall in love soon.
Most of the Grid Systems are based around Flexbox and CSS Grid. A layout should be the very first thing you're working on. Decide on either Mobile First or Desktop First approach and apply RWD rules. Otherwise, it will consume time to refactor the
Layout component and adjust it for different devices. Usually, there is a
Col component, or just one
Grid which is controlled through props to be either a container or item.
When you create a new view, page or want to have unified spacing and sizing of elements, start from
Grid, it will save you time.
There is a lot of discussion around the styling approach, either to choose BEM, SMACSS, or CSS-in-JS. I'm a fan of the last one and heavily use that either with styled-components or JSS. It bothers me when I have to create a wrapper component just for one CSS property. On the other hand,
Box can simplify and unify styling through props, e.g. instead of providing exact value for margin, it could be multiplied by a base spacing value, which in MUI is 8 btw.
One of the fundamental concepts when creating a Design System. Line heights, font sizes, colors, font weights, there is a lot to consider, and Designers have a strong opinion on that one. Well-thought Typography can impact immensely on the user. It's hard to come up with rules and standards alone. The
Typography component should be used in almost every text, it will be much easier to refactor later on or apply new, brand rules from the designs.
There are use cases where you just want to apply the same padding or margin between elements. The
Grid seems a bit too heavy for that as it's not a complex layout concern. The
Box would also result in a bit too much boilerplate if used multiple times in the render method.
Space can help with that. It wraps all of the children components and applies equal spacing between them and can also help with alignment.
When you're using a Static Site Generator such as Gatsby, using hooks e.g. from react-media might break the layout in your application. During static assets generation, there is no information about the dimensions of the window. The solution to this problem is using a standard CSS Media Queries or
Hidden. When your layout grows complex, it's better to split it into smaller components for each device than fighting with all conditions in the code.
dd tags in HTML which are used for building a Description List. It can be tough to center a list when content has dynamic, unknown content. It's often the case that every description should be left centered. Also, with
Descriptions you gain semantic structure and simplified creation of details pages.
There is a separate package needed when using icons from MUI or Antd, but it's up to you which ones you will use. I can tell that 90% of icons are from these packages in my projects. Only 10% is reserved for unique icons, illustrations that are specific to my brand. With the
Icon it's easier to manipulate SVG, resize, and apply fill color, etc. And again, you get bonus points on consistency.
Wow, we covered a lot in this article! I've linked resources between the lines with the hope that you will learn something new. Remember to be a Mr. Consistency when it comes to the balance between implementation and designs, but don't push too hard, communicate, and work out it all together.
There are a lot more components than I've described in this article, please hunt some and start using them in your application if you find they could be useful.
Big thanks for reading the article, you're awesome! 🙇♂️
You can also find me on:
Thanks for all the support. ❤️