No 1. Coder example tutorial - building an Icon Bar type line of icons

[Webdeersign]

This is an introduction to using Coder to build a responsive line of icons that are positioned next to each other. Typically these are created in the older frameworks using columns or by floating fixed width images. That process is very limiting and takes a lot of time and a degree of skill to master. This demo will use just 1 Coder stack to achieve this.

Starting with a Source page, add in the Source settings stack, a Container Base stack (only used to have access to backgrounds and margins and paddings) and a Utility Class stack. The Container Base stack is used for convenience just to load a blue BG colour and some other colours that will be used later on.

Starting with the Utility stack, 4 paddings are setup and the Flex box is checked. Checking the Flex check box, means that these Classes will be loaded .

A Container is added to the page with some padding, it uses the Blue BG setup in the Container Base stack and a width of 700px is used. This is just to make the demo layout look more attractive on the page. A Coder stack is added to the Container and the Stacks drop down is selected in the Coder settings.

The empty Coder will fill its container and therefore fill the 700px space.

A Source Image stack containing a 50px wide icon image is added to the Coder.

which previews like this:

One of the Utility Classes detailed at https://knowledge.shakingthehabitual.com/article/63-utility-classes-addon?preview=true will now be used. To make the layout use some padding, p-1 will be added to the CSS classes box for the Image. In the linked information, p-1 sets a padding on all 4 side set in the padding for padding-1 in the Utility Class stack, which was set to 10px.

The preview will now look like this and note that the Coder height is set by its contents, i.e. the image with a padding of 10px on all side.

Now the image is copied and pasted 3 more times, so that we now have 4 images inside the Coder. The new 3 images have had their images changed to make this demo more meaningful.

Which previews like

which is exactly what we would expect. I.e. this is normal stacks behaviour where things stack on top of each other.

************** MAGIC ALERT *********************

Now add d-flex justify-content-around into the Coder Classes box:

(PS Ignore the stacks-margin-0 used in the image above.)

Which will preview like:

So what is going on here. The d-flex enables Flex Alignment of items inside the Coder which becomes the Flexbox container. The justify-content-around “spaces” the icons apart so that the space is evenly shared between the items which in this case are the images. This is one of the areas of Flexbox that is well worth learning and you should become familiar with the other types of spacing which we will use over and over again in these examples.

We can also add align-items-center p-1 flex-wrap which will align the items centred vertically, add a bit more 10px padding to pretty things up and then enable Flex Wrap. The Flex Wrap will allow the icon images to flow onto the next line when the width is too small. the preview will look like this:

So just to recap here. We have now created a fully responsive horizontal line of images that will scale responsively with just 1 stack!

[Webdeersign]

To many RW users this may all seem like a step too far, but these Classes are nothing but labels that you attach to things. When you have created a layout like this you can convert it into a Template to be saved as the most powerful icon layout stack you have.

[pmjd]

Thank you @Webdeersign brilliant!

I was wondering how to use the Utility stack, so good to see it in a tutorial already.

[Webdeersign]

@pmjd

I was wondering how to use the Utility stack, so good to see it in a tutorial already.

It’s important to note that you would only add the Utility Class stack if you want to access the features using the utilities in the stack. This keeps Source as lean and small and fast as possible.

[Webdeersign]

The next stage in this demo is to do 2 things. Add another image with a new icon and remove the 700px width set in the Container and set it to be the max width in the Source settings:

and this is the preview:

Note that the new 5th image just fits like in clockwork and everything is spaced perfectly.

Lets now add a new Coder (set to stack) to the page and add the Coder in the example above, into the new Coder. In the new Coder, tick the Add Wrapper Div and add in to the Classes, the following - base-bg-1-1. This will set the BG of the new Coder to the blue colour set in the Container Base BG 1. We are using a Coder here to fill the screen width just like we would normally use a Container:

In the inner original Coder, now tick the Use Max Width box. This will now keep the layout from going edge to edge because there is nothing worse than seeing edge to edge layouts for icons, fill the width of a large screen:

Which will preview like this:

The icon layout will be contained by the max width of the inner layout.

Now lets replace the 3rd Image with a new Coder (set to text) and add the text Privacy Policy:

Which previews as:

So what we have here is a super easy to scale layout for a mix of images and text. If you need more, you simply add more to the Coder that contains them.

IMPORTANT - It is important to understand that the inner Code is acting as the Flexbox container, and that the contents, i.e. are the Flexbox items. Flexbox uses the concept of Containers and Items that are held inside the Containers.

Let’s now add more lines of text into the Text Coder:

Which previews as:

Note that everything is perfectly centred vertically and between each other horizontally. There are so many applications for this type of layout, but the obvious one is to use in a footer. So you could make this a Template and now you have a super powerful footer stack like no other.

[Webdeersign]

You can of course use a normal Container with the Utility Class stack which some may be more comfortable with. The process is exactly the same. You add the same d-flex justify-content-around align-items-center p-1 flex-wrap into the Containers Inner Class box:

Which previews as :

The blue layout on top is the Coder version and the red version is the Container version.