POSITION (ADVANCED)

Frontend Developers use a Parent and Child relationship that we call 'Absolute' and 'Relative'. Where it can be said that "the position of Child Frame becomes 'Absolute', 'Relative' to the Parent Frame". Where it can be said that "the position of Child Frame becomes 'Absolute', 'Relative' to the Parent Frame".

ABSOLUTE + RELATIVE

ABSOLUTE (CHILD): The Child Frame set's the Position. We therefore select 'Absolute' plus we also set the Position e.g. 'Bottom-Left'.

RELATIVE (PARENT): The Parent Frame is the frame that the Child is 'relevant' to. Think of it like the anchor that the Child is connected to. So therefore, the position that you set for the Child is relative to the position of Parent.

TROUBLE SHOOTING

In Video below,  'Absolute' and 'Bottom-Left' is used to Position the Headline Snippet.

Notice that as soon as the Absolute Position is applied, the Width collapses. This is because Absolute must be given a Width. If this happens, go to the ADV (Advanced) Tab and in the Class box, add the class max-width to make the Frame 100% wide.

  D03 E02    01:57

Relative Parent and Absolute Child

So what's going on here? Well said simply: "Position your Child Frame 'Absolute Bottom Right' relative to the Parent Frame."

Ok, so if you can position your Child relative to the Parent, isn't this the same as the Child Height feature above?  Yes it is, so which one should you use? Well, most of MOBLE's clients tend to use Child Height (%) to position Child Frames. However, most Frontend Developers tend to use Absolute and Relative, rather than Child Height.

Why is this?  Well, this is because Frontend Developers don't have a UI like MOBLE to play with, where Child Height is quite easy to visualise and more flexible in height position (Simply put, there are more Percentages than Absolute positions, so it's just more flexible and works in far more use cases).

Therefore, the MOBLE Team, tend to encourage Child Height rather than Absolute and Relative. We also know from years of experience that there are less potential conflicts when your future content team begin to add new features and content to your page. An example of this is Background Video, as you now know MOBLE makes the hard decisions for you behind the scenes, well, there is also code running behind the scenes too. You don't need to know any of this, but when you add a Background Video we automatically apply a Relative class for you, and if the content team start randomly adding Relative classes everywhere, and don't clean up their classes as they go, they could in theory, start to leave a trail of unused Relative classes around the page, which could confuse the Video behaviour and cause a conflict. This is really is an edge case, and MOBLE has algorithmic procedures to prevent such situations by striping out unwanted classes, but even so, we've scene it happen. So MOBLE encourage Child Height for Designers and Absolute and Relative as a supporting tool for Advanced users.

So when should you use Absolute and Relative?

In this Episode, we use an Anchor link inside an Image, to Navigate up and down the page. This Image is "Absolute Bottom Right Relative to the Parent Frame". The Image, therefore ignores the Outer Padding, and hugs the Absolute Bottom right. So if you ever have a requirement to place a Frame in a position that ignores Padding, this is a great time to consider Absolute and Relative. We cover Absolute and Relative some more in upcoming episodes.

STICKY + STICKY SIDE

  D03 E02    03:23

Sticky with Sticky Side

Sticky and Sticky Side classes offer an enjoyable technique to bring an element of animation that brings focus to key content, such as Call-to-Actions and Forms. Here we look at Sticky Side on a Layout that you can play with on the Gilyan Theme. Use the Layouts Drawer to drop the Layout if you if don't wish to build this one from scratch.

Check out the Side Bar episode to see Sticky and Sticky Side in action for Online Shop category Side Bars.