No 2. Coder example tutorial - building an improved 2 Column text layout

[Webdeersign]

We often have to create a 2 column layout to display text when the amount of text is too much for 1 column to remain the best solution. I.e. there comes a point when text grows to the point where 2 columns just looks better.

The old fashioned way was to use a 2 Column that could be very inefficient when the amount of text in the columns differed. This example is all about building a 2 column display where the priority of the layout is to vary the width of the columns to try to make the height of the 2 column of text, equalise.

We will use the Coder layout from Example 1 which is:

We need to remove all of the image stacks, and replace with 2 new Coder stacks set to text. One will contain a short amount of text and the second will contain a lot more text. Each text Coder will contain the Classes m-1 p-1 where p-1 is a new margin value set in the utility Class stack to apply 20px margin on all sides.

The main Coder acting as the (Flexbox) container has a tiny but easy to miss edit. Previously we had d-flex but now we want to replace this with d-m-flex. This is one of the super powerful aspects of the Utility Class stack. Adding in the m means the the flex (or Flexbox) will be applied at the m breakpoint or above 600px. We need to do this to make the “columns” stack below 600px. So simply by adding the m' we have created a 2 "column" layout that will stack below 600px. Below 600px flex will not be set and the default stacks behaviour of block` will apply - i.e. stuff stacks below the last thing.

Here is the previewed result at 3 different screen sizes.

So to recap, we have just built the coolest looking most compact 2 column text layout using just 1 stack that behaves perfectly (within the rules of words wrapping to the next line).

Lets also mention that the control that you have over the padding, margin (in px, rem, em, %, etc.) , backgrounds across all 4 breakpoints is achieved just by adding the classes required. Also note that this is not using a bloated framework and multiple stacks with multiple settings and is therefore fast in RW edit and preview mode.

PS the p-1 in the text Coders would not be required in real life as all that would be required is just m-1 to apply a 20px margin:

[Webdeersign]

The next part of this tutorial is to replace the text Coder containing the smaller amount of text, with an image. The image will be set to a max width of 100px and a padding of p-1 added. It is important to give the image a width:

Which previews as:

The next stage is to add some rounding and see what it looks like on a page.
The outer Coder is removed so that we only have 1 Coder acting as the container, contains an image and a text Coder with some text.

In the stack Coder we use base-bg-1-1 d-m-flex justify-content-around align-items-center rounded b-1 mx-4 and add b-1 which adds a border of 1px and rounded which rounds the outer Coder to 5px (both set in Utility Class stack) . For the purposed of this tutorial you can ignore the mx-4 which will add 10vw padding to each side of the layout so that we can see the effect of the other settings:

which previews as: