Laying things out in React
For a small project this will work out smoothly. But while working on bigger projects composing the components will need a bit work. Even though we maintain component library using Storybook developers jitter when start to pick up components and compose. We figured out a way to calm them. We created invisible layout components and use them to compose the visible components.
Allow me to explain what is a layout component. Here is a component our designer friend Mr. Dan gave us. How do we make this into a React code? Let’s call it
We could make a component called
<Stat> only to show the label and the value.
Then we can use
<Stat> inside the
<StatsBar>, then write some styles using flex-box or floats in
<StatsBar> to show as three column.
For a one-off component like
<StatsBar> writing styles to show as three column is fine. When we are working bigger projects like a web product or a pattern library, we might have to create similar multicolumn layouts at different places. Sometimes we might need to show as two columns, or other times four columns. We should not write styles for each cases.
We created a component called
<Columnizer>. The only job of the component is to display each of it’s child components in a column. This
<Columnizer> can be used inside our previously created
<StatsBar> component, instead of writing styles show the child elements to render as columns.
<Columnizer> component can take prop
gutter (values like 2px, 1em, etc) which can set the spacing between two columns. Similarly we could enhance the layout components through
props to take care of special cases.
Now, let’s take a look at a bigger and visible layout component. This is a common page layout pattern in web apps, where you have primary content column with additional column on left or right side. Occasionally columns on both sides too. Usually, this component will have some styles like background color, border radius or shadow.
Designers or developers might uses Bootstrap’s grid class names pattern to recreate this design in code using a grid framework. But, such a component is very easy to code with just a few lines of CSS. Also, we can avoid style sheets getting bigger in size by avoiding grid frameworks.
We can create a component
<Block>, which render it’s children in the main column. It can take two props,
The layout components help in running front-end teams smoothly.
Picking up all the common layout patterns from your projects, create components for each them. Refine them by removing similar patterns and removing one-off components, you get a layout palette. Just like we have colour palettes or typography palettes in design, why can’t we have a layout palette? A better layout palette help in evolution of the product.
We build up layout palette early on while on a pattern library (design systems) project. It helps in reducing inconsistencies creeping up during later phases of the project. Imagine the designer coming up with a way different layout haven’t been used earlier will not be a good idea. It also helps the team to spend enough time testing and tweaking each layout components in different viewport sizes.
Thank you Ciju for suggestions.