Stacks & Spacers

New!

Lesson Length -

2:58

Stacks are by far the most crucial tool in Judo to make responsive layouts
Close Video

Resources

Stacks on Stacks on Stacks...

If there's one element you'll use in 99.9% of Judo experiences, it's Stacks.
There are 3 types of stacks:

We can add a Stack element three different ways:

1) From our Insert Menu, and then drag our layer(s) we want inside to be nested underneath

2) Select a layer (or multiple layers) we want to be in a Stack, and then from the top menu select Arrange > Embed In > VStack/HStack/ZStack.

3) Select the applicable layers and then use the shortcuts:

    shift + cmnd + H (for HStack)
    shift + cmnd + V (for VStack)
    shift + cmnd + Z (for ZStack)

4) Right click the highlighted layers then choose Embed In VStack/HStack/ZStack.

Vertical Stacks (VStacks)

This is our first type of Stack, which will arrange our layers into a Vertical column.

We can then adjust the spacing in between our layers within our VStack, where 8 is the default value.

We can also adjust our layers to be aligned to the left, center or right side of our VStack.

Horizontal Stacks (HStacks)

This now aligns our layers instead in a Horizontal row.

We can modify the spacing of our Hstack too, and also align the nested layers either to the middle, top or bottom, or we can align them to the baseline of nested text.

ZStacks

ZStacks are for placing layers on top of each other.

So in the layers hierarchy, the highest layer will be the one on top.

Probably the most common use of ZStacks is to place Text on top of anImage.

Spacers

A Stacks best friend is a Spacer element.

A very common purpose for spacers is to place them in an HStack and orient an image to the very left of our screen.

In this example, our purple circle image will be on the very far left of the screen no matter what screen size this experience is viewed on.

Stacks are how we create responsive layouts

That’s a rundown on how Stacks help us to create amazing layouts that are adaptive instead of static.

This will really start coming into play when we start viewing this on different device sizes, which we’ll cover more in the Accessibility & Compatibility section.

Next up we’re going to cover modifiers that you’ve been seeing in our Inspector panel that help us build our layout.

Happy learning and see you there.

Was this lesson helpful?

Close
Close