The Extender

<extender-l layout="screen keep-center keep-p">...</extender-l>

The extender allows you to define an element to be wider than its parent.

It’s very useful when you want an element to match the width of its parent without including the padding.

It can also be used when you need an element to span the full screen width while staying in the flow of its parent.

When you’re inside an element with padding and need a child element to take the full width of its parent, excluding the padding.
When you’re within a centered element and want a child element to span the full width of the screen.

keep-p : keep the parent’s padding.
keep-pl : keep the parent’s left padding.
keep-pr : keep the parent’s right padding.
keep-center : keep the center from the ancestor center.
screen : Use this when you want the extender to span the full width of the screen.

Imagine you’re inside a div with padding, and at a specific position, you want an image that takes the full width, excluding the padding.

Normally, you’d have to adjust the entire HTML structure to achieve this, but thanks to the extender component, you can do it with ease.

Sometimes, you may want a full-width element as a background, but with the same padding as its parent.

To achieve this, simply add the keep-p attribute to the extender, and the parent’s padding will be preserved.

If you only want to retain the padding for a specific direction, such as the right padding, just add the keep-pr attribute to the extender.

The screen attribute makes the extender span the full screen width, even if it’s within a parent that is not full-screen wide!

This is particularly useful when you want to maintain the HTML flow while making an element take up the full screen width.

In the previous example, the extender was full screen, but its content wasn’t centered like the rest of the elements.

To fix this, you can use the keep-center attribute.

This will ensure the extender remains full screen wide, while its content is centered like its nearest “center” ancestor.