Introduction

In the Introduction to Components chapter we dedicated a section to how to combine components. There we explained how in most cases when working on your product you are going to end up combining multiple components together in order to achieve the desired outcome based on the design you have.

In the specific code example in that section we introduced one of the layout components, Stack, that you have available and can help work on UI composition and complex sections and even pages that can even adapt to different screen sizes.

 

---

Challenges

Even if you are familiar with the various components of the Mews Design System and you know how to adapt them to the design given you might still find issues when you dealing with a page block or even an entire page. This is understandable considering the challenges that creating a layout presents. Components in isolation are in general straightforward but when we are dealing with UI composition there are extra things to take into consideration. Starting from how to deal with spacing between various elements to how to adapt the layout based on different viewports.

You could deal yourself with aligning various components on a page but this first requires a lot of extra work, custom styling and unnecessary markup, but also leads to inconsistency between pages and layout because we can’t expect different engineering to all think, build and deal with composition in the same way.

That’s why the rest of the chapter will be dedicated to walk you through the various layout components the design system has, explaining how to use them and also very important when to use them. Those components are intended to help you solving the various challenges described above that you have to deal with when doing UI composition.

 

---

Resources

In order to achieve various type of layouts we have available three different components that can be used mainly as wrapper for other components for UI composition. These components are fairly powerful and come with a lot of options and settings so it might require a bit of time in order to achieve something as close as possible to the new design you are working of.

Before we go into more details for each components you should probably start checking the section on Layout in our documentation and the layout stories in our Storybook. The are few components in that section, some of which are components that combines multiple other components together while other are specific helpers for UI composition and those are the same ones that you can find documented as mentioned above. We are going to focus here mainly on those 3 components covered in the Layout documentation.

 

---

Container

Let’s start focusing on the Container component. As mentioned in the documentation you should use Container as a wrapper for other single or multiple components for spacing, positioning and so on instead of creating a custom component or try to adjust the styling of an already existing component in order to have it align in a specific way or have some custom dimensions.

Consider Container as a div that can take various CSS properties, like position, display, width, height, padding and so on. It can easily be combined with other containers as parent, sibling or child and also offers responsive behaviour but we are going to focus on the Responsive Style API in a bit.

The related story exposes all the different props so please play with the controls to see the changes in the story.

 

---

Stack

If you find yourself in a situation where you have to align various components, let’s say a bunch of card or even a bunch of containers, and you are struggling to have the right spacing and alignment between them then you might want to have all of them wrapped in a Stack component.

As the name suggested, with Stack, you can decide how various components will stack on top or next of each others. The component is very powerful and the API quite extensive so you will probably be a bit confused when starting to use Stack and might even think that something is not achievable. As usual we suggest to play a bit with the story so you can gather some knowledge and feel a bit confident in combining different props in order to achieve a layout close enough to the design you got provided.

Something to mention for this component, that you check in its documentation, is that it is composed by both the Stack element but also the StackItem element. So you can have each item in the stack to behave differently from the others and achieve very complex UI composition. Similar to Container also Stack can take advantage of the Responsive Style API and behave differently based on the device viewport. We suggest to have a read of the Overview page to see how you can compose an entire UI block step by step.

 

---

Grid

The last layout component we offer is Grid. If you are a bit familiar with the CSS grid layout you probably already understand how this component can help you when dealing with UI composition. As much as Container is just div you can use for position and spacing what you have with Grid is a wrapper that allows you to align any type of other elements in a grid system.

Also similar to Stack you can apply props to both the parent and children wrapping them inside a GridItem element. The API of CSS grid layout is fairly intricate and the same can be said for our component, as usual check the documentation to start navigating the various props offered. Even if this can be seens as a limitation at the beginning you will find out quickly while starting using Grid that possibilities are endless and allow to achieve quite complex UI composition.

As said for the all the other components have the story alongside ready for some quick prototyping. Something to keep in mind that is specifically true for Grid but can be applied also to Container and Stack is that you can probably produce the same UI using one or the other component and different props. So we leave to you the decision to make on which of those layout components are the best to use for your specific usage.

 

---

Responsive Styles

We already mentioned in this chapter the Responsive Style API. This API is specifically been made to work with the above 3 layout components in order to make them even more flexible and powerful for any needs related to responsive design. The API is structured like an object and inside it you can pass all the properties of the component you are using with.

So you can have a default spacing for the Stack component but then have different spacing for any of different breakpoints we offer as part of the API. That means that for example you could have a 3 columns grid that becomes a 2 columns grid for tablet screen sizes and down to a more simple 1 column layout for phone screen sizes.

Having this extra API as part of the layout components avoids the need to create extra components to handle different viewports or to create custom logic in order to deal with various devices. When using Responsive Styles try always to cover all the possible scenarios and speak first to your designers in order to understand what’s expected in terms of UI composition for various users and devices.

 

---

Best practices

UI composition is quite tricky at first and might feel even more so when you have the limitation of trying to avoid custom components and custom styling but instead use the components that the Mews Design System provides you with. The tools at your disposal are meant to speed up your work, make you productive and help you solving the problems that really matter but composing a complicated UI has a steep learning curve so you might feel at the beginning that these layout components are slowing you down.

As already mentioned we highly recommend to have the Storybook open and ready for you to prototype with. Once you have managed to combine the various props that make you achieve the desired outcome then try to see if you can simplify your solution while making it more robust. As much as this is about creating a UI that reflects the design you are working with it should also be about code maintainability and readability.

If your solution is quite convoluted and not flexible at all you might want to spend a bit more time on it, maybe try to break down the page in more individual blocks so you can make each of them more flexible. We also suggest you to have an open conversation with your designer when dealing with UI composition. It’s part of our job as engineer to collaborate with designers and suggest better alternative and guide them to what’s possible to achieve in terms of a product appearance and functionality. This is even more true when we have to think about responsive design and how the layout of a page should change based on the width of the screen.

 

---

Outro

In this chapter we introduced you to the 3 layout components: Container, Stack and Grid. Each of them serves a specific scope and can all be combined together to achieve any type of UI compositions. Those components are complex and offers multiple options so take your time and try different solutions. There should never be a need to create any custom components or wrap a bunch of component in a custom div with some custom styling. Don’t forget to consider responsive design and test the layout with various type of content also. Our products supports various languages plus even if some products don’t have a mobile version for example that doesn’t mean that some users don’t use them on very narrow screens. So always try to achieve a flexible layout that is easy to maintain and can be expanded if and when needed.

 

---

Where next