The Waveshape Component Structure

The Waveshape components are built using a slightly unusual development structure consistent throughout most, if no all, components. This article will explain the basics behind the structure in order to make it easier to further develop and customize them for you and/or your clients.

Flex gap

The main factor that differs between the Waveshape components (and other similar component libraries) is regarding spacing of elements. Instead of using traditional methods such as paddings and margins, Waveshape makes use of flex box parent wrappers and the "flex gap" property.

Let's start with an example - the Hero 001 component.

The component in the image above consists of three main parts, the navigation bar, the content and finally an image at the bottom. These parts are wrapped inside what we call a spacing wrapper; a simple div that uses flex gap in order to consistently space out its children.

This is visualized in the image below.

As you can see, all three parts are wrapped in containers spaced 7.5 REM (120 px) apart vertically. This is the basics of spacing wrappers; a wrapper that spaces out its children either vertically or horizontally.

Now let's take a deeper look into the structure.

The main content of the hero is also wrapped in a spacing wrapper. This time we're using the class of "Spacing Wrapper XS" with a flex gap of 1 REM (16 px).

But what if we want a smaller space between the text content and the text content itself and the buttons? Well then we'll wrap all content inside a larger spacing wrapper.

In this case we're using "Spacing Wrapper M" with a vertical spacing of 2 REM (32 px).

The buttons are also spaced using a spcing wrapper, however this time horizontally. The default setting for all spacing wrappers is a flex-direction of row (vertical), but by using a combo class of "Horizontal" we can get the same gap setting albeit horizontally.

By using this method we're able to get rid of margin and padding properties that sometimes might be hard to keep consistent. However, it also means that more HTML markup is required.

This is the structure of the full hero component. Hopefully this article can clear up any misunderstandings regarding this development method used throughout our components.