#vuecember2020 #frontend #html

Layout components - why, how come, what for?

As a front-end developer, you probably know it: We build components, put them back together in the interface and use them to implement the design a designer has given us. Some time later you sit together with the designer and try to correct errors in the spacing between individual components in small steps - a few pixels here, a few pixels there. This happens quickly when components bring their own spacing. Unfortunately, for various reasons, these do not always combine in the way the design is intended. But there is a solution to this problem: In one of our projects we used layout components for the first time. Layout components mean a strict separation between content components and everything that arranges them on the screen.

An important basic condition: None of the content components defines external distances - we therefore completely avoid 'margin'. The layout components take care of this. This gives us the opportunity to maintain the spacing provided by the design in a consistent and harmonized manner.

Currently, we use a box component (with inner spacing, possibly shadows, border radius and a background color), classic columns/column components, a stack component (vertical stacks with spacing, very easily done by CSS Grid) and an inline component for example a list of tags that should be placed at the same distance to one another. In addition, we use typography components for paragraphs and headlines, which also fit into the layout concept (see in detail here )

From these basic components we then assemble further, more complex components as required.

Advantages

At first it seems to be quite tedious to make this strict separation between content and layout. But in the meantime it turns out:

  • The coordination with our UI designers is much easier. There is a predefined set of spacings, so we can transfer sketch mockups into code much faster. Measuring spacings individually and including them in the code as "magic numbers" is now only done in exceptional cases.
  • For recurring responsive content blocks (the classic three-column layout, for example), we have built separate components in which we reuse the layout components.
  • The layout logic is clearly separated within dedicated components, instead of being scattered through different components.
  • This makes it possible to predict and adjust the spacing across the entire website. This gives us a more consistent layout and design.
  • You don't need any CSS knowledge to create a responsive layout with the existing layout components. Maybe you should have a little fun with puzzles, if the layout gets a little more complex 😁
  • If we need to adapt the layouting for older browsers (currently we support all evergreen browsers), we can do this in the isolated layout components.
  • On the page level (in nuxt structure…) we don't need any CSS, but achieve the layouting completely through components.

Disadvantages

Due to the separate layout components, a little more markup is produced. In some cases, one could possibly spare a few DIV containers. However, in the long run, this would lead to maintenance problems, since inconsistencies would sneak in "uncontrolled" across the different components.