Responsive design

Why use responsive design

When designing components it's important to keep in mind that users have different screen sizes which can affect how elements appear on their page. Setting height, width, or positions to fixed values (i.e. hard-coding) can have unintended consequences as a result. Components should be styled in a way that changes dynamically in response to their container.

Flexbox and CSS Grid

The easiest way to achieve a responsive design is by using Flexbox and/or CSS grid. Read more:

• Flexbox
• CSS Grid

Example (using flex-grow):

Here we are separating the items in this header component into two groups, one on the left and one on the right.

In the parent component we use the following:

.controls {
  display: flex;
  justify-content: center;
}

This will line up all the child components horizontally and align each item on the center horizontal axis.

In the center we use a filler element that grows and shrinks depending on the width of the parent. To do this we use the flex-grow property.

.filler {
   flex-grow: 1;
}

Now the two groups of items will be properly separated even when the size of the item changes.