Components
Utilities
Fonts
Components
Utilities
Fonts
The Extender
The extender allows you to define an element to be wider than its parent.
It's very useful when you want for an element to take the width of its parent without taking the padding in count.
Or sometimes, you just need for an element to take the screen width and for it to stay in the flow of its parent.
- keep-p: keep the parent's padding. If you want to keep only a specific padding, you can use `keep-pl`, to keep only the padding-left, or `keep-px`, if you want to keep only the horizontal padding etc. You can use all of the following attributes : `keep-p` `keep-px` `keep-py` `keep-pl` `keep-pr` `keep-pt` `keep-pb`
- keep-center: keep the center margin from the parent center.
- screen: if you want the element to take the full screen width
Examples
Here, the red div has a padding, but the extender will take full width of it beyond the padding.
Normally, you had to add the padding on each element, but with the extender, only the parent has a padding, and its child is still able to go past it.
Hello
Hello
Hello
Hello
Sometimes, you want to have a full width div as a background but with the same padding as its parent.
To do so, you just need to add `keep-p` to the extender and the parent's padding will be preserved.
If you only want to keep the padding of a specific direction, for example the horizontal padding, you just have to add the `keep-px` attribute to the extender.
Hello
Hello
I keep my parent's padding
Hello
Hello
I keep only my parent's x padding
A very cool feature of the extender, is the ability to extend in order to take the full screen width. The only limitation to this feature, is that you have to be in a horizontally centered element.
You just need to add the `screen` attribute to your element and that's it!
This way, you can keep your flow and show a full screen width element without leaving its parent.
Hello
Hello
Oh ! I take full screen width.
Hello
Hello
Finally if you want to keep the element centered, you add the `keep-center` attribute.
As you can see the extender take full screen width, but it keep the element's content centered. In this case, the center parent is the element containing all the content of the page. (Inspect the code to see which component is the center parent from this extender)
Oh ! I take full screen width but my content is inside my parent center component.