LayoutCSS Docs Showcase
  • Showcase

    • components

  • Area
  • Box
  • Center
  • Extender
  • Grid
  • Icon
  • Ledge
  • Outsider
  • Rack
  • Sidebar
  • Slider
  • Stack
  • Switcher

    • Utilities

  • align-self
  • bg-img
  • flex
  • font-size
  • h
  • hide
  • line-height
  • p-child
  • p-recursive
  • p
  • ratio
  • relative
  • w
  • z-index

    • Extender-l

    ...

    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-pr`, to keep only the padding-right.
    • 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 blue 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 right padding, you just have to add the `keep-pr` attribute to the extender.

    I keep my parent's padding

    I keep my parent's left padding.

    I keep my parent's right 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 world !

    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)

    hello world