Laying Things Out in React

In the Re­act world we en­cap­su­late the styles within the com­pon­ents. Even though we hear about CSS-in-JS quite a lot these days, the JavaS­cript de­velopers hate to touch the CSS. They even hate writ­ing the class names to change any styles. Then, how do we make JavaS­cript de­velopers work with de­sign­ers and HTML/CSS de­velopers without the use of weapons of mass de­struc­tion?

Jokes apart, for a de­veloper it’s hard to switch con­text between a lo­gical (while writ­ing JavaS­cript) and a graph­ical thought pro­cesses. To avoid such con­text switch­ing, we have to sep­ar­ate present­a­tional code from be­ha­vi­oural. So that we can let the de­sign­ers worry about the present­a­tion and JavaS­cript de­velopers worry about the be­ha­viour. Back in the days, we achieved sim­ilar sep­ar­a­tion – struc­ture and present­a­tion – us­ing HTML and CSS. Today, let’s see if we can sep­ar­ate present­a­tion and be­ha­viour within Re­act code­base.

When we work on Re­act pro­ject, our team will have a HTML/CSS flu­ent de­signer or a de­veloper, and a JavaS­cript (Re­act) de­veloper. The former fo­cus on build­ing state­less com­pon­ents with styles and the later com­poses the state­less com­pon­ents with state­ful com­pon­ents (Con­tain­ers). Thus, all the scary part of the CSS is hid­den un­der­neath the state­less com­pon­ents.

For a small pro­ject this will work out smoothly. But while work­ing on big­ger pro­jects com­pos­ing the com­pon­ents will need a bit work. Even though we main­tain com­pon­ent lib­rary us­ing Story­book de­velopers jit­ter when start to pick up com­pon­ents and com­pose. We figured out a way to calm them. We cre­ated in­vis­ible lay­out com­pon­ents and use them to com­pose the vis­ible com­pon­ents.

Layout components

Al­low me to ex­plain what is a lay­out com­pon­ent. Here is a com­pon­ent our de­signer friend Mr. Dan gave us. How do we make this into a Re­act code? Let’s call it <Stats­Bar>.

3 column stats
Stats as 3 columns. <StatsBar>

We could make a com­pon­ent called <Stat> only to show the la­bel and the value.

Stat
<Stat>

Then we can use <Stat> in­side the <Stats­Bar>, then write some styles us­ing flex-box or floats in <Stats­Bar> to show as three column.

For a one-off com­pon­ent like <Stats­Bar> writ­ing styles to show as three column is fine. When we are work­ing big­ger pro­jects like a web product or a pat­tern lib­rary, we might have to cre­ate sim­ilar mul­ti­column lay­outs at dif­fer­ent places. Some­times we might need to show as two columns, or other times four columns. We should not write styles for each cases.

We cre­ated a com­pon­ent called <Colum­nizer>. The only job of the com­pon­ent is to dis­play each of it’s child com­pon­ents in a column. This <Colum­nizer> can be used in­side our pre­vi­ously cre­ated <Stats­Bar> com­pon­ent, in­stead of writ­ing styles show the child ele­ments to render as columns.

Play with code on CodeSandbox

The <Colum­nizer> com­pon­ent can take prop gut­ter (val­ues like 2px, 1em, etc) which can set the spa­cing between two columns. Sim­il­arly we could en­hance the lay­out com­pon­ents through props to take care of spe­cial cases.

Now, let’s take a look at a big­ger and vis­ible lay­out com­pon­ent. This is a com­mon page lay­out pat­tern in web apps, where you have primary con­tent column with ad­di­tional column on left or right side. Oc­ca­sion­ally columns on both sides too. Usu­ally, this com­pon­ent will have some styles like back­ground color, bor­der ra­dius or shadow.

Block UI Pattern
Common page layout pattern, single content column or content content with a side column

De­sign­ers or de­velopers might uses Boot­strap’s grid class names pat­tern to re­cre­ate this design in code us­ing a grid frame­work. But, such a com­pon­ent is very easy to code with just a few lines of CSS. Also, we can avoid style sheets get­ting big­ger in size by avoid­ing grid frame­works.

We can cre­ate a com­pon­ent <Block>, which render it’s chil­dren in the main column. It can take two props, left­Side­Bar and right­Side­Bar. Ele­ments passed in to each of these props are rendered in their re­spect­ive column. See how im­ple­men­ted com­pon­ents re­sponds with pres­ence of con­tent in left and right side­bars. The JavaS­cript de­veloper need not have to worry about any CSS classes at all.

Play with code on CodeSandbox

The lay­out com­pon­ents help in run­ning front-end teams smoothly.

Layout Palette

Pick­ing up all the com­mon lay­out pat­terns from your pro­jects, cre­ate com­pon­ents for each them. Re­fine them by re­mov­ing sim­ilar pat­terns and re­mov­ing one-off com­pon­ents, you get a lay­out palette. Just like we have col­our palettes or ty­po­graphy palettes in design, why can’t we have a lay­out palette? A bet­ter lay­out palette help in evol­u­tion of the product.

We build up lay­out palette early on while on a pat­tern lib­rary (design sys­tems) pro­ject. It helps in re­du­cing in­con­sist­en­cies creep­ing up dur­ing later phases of the pro­ject. Ima­gine the de­signer com­ing up with a way dif­fer­ent lay­out haven’t been used earlier will not be a good idea. It also helps the team to spend enough time test­ing and tweak­ing each lay­out com­pon­ents in dif­fer­ent view­port sizes.


Thank you Ciju for sug­ges­tions.

Do you have any thoughts on this art­icle? Write to me.