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

    • Sidebar-l

    ...

    The Sidebar is a flexbox that gives a fixed width to one of its children, and the space left to the other child.

    By default, the Sidebar switch to a vertical layout when the content element's (the children that is not the sidebar) width is equal to 50% of the Sidebar component.

    • side : define the position of the sidebar, left or right.
    • side-width : define the width of the sidebar.
    • content-min : is a breakpoint defined on the content element's width, that wraps the component to a vertical layout.
    • gap : the space between the sidebar and the content element.
    • reverse : lets you wrap the sidebar with the content on top and the sidebar on the bottom.
    • shrink : by default, the Sidebar's children doesnt shrink, which means that both elements will have the same height. By giving the shrink attribute to the element, both children elements will adopt their natural heights.

    Examples:

    The first thing to do is to define the side of the sidebar.

    If you want the sidebar on the left, you add `side="left"`.

    content

    sidebar

    You can define the width of the sidebar with `side-width`. (It gives a width to the side element only, not the content element).

    sidebar

    content

    With `content-min`, you can define when the sidebar should wrap. If you set `content-min` to 60%, it means that when the content element's width will be smaller than 60% of the component, the sidebar will wrap.

    sidebar

    content

    If you want elements inside the Sidebar to take the height of their content you just have to add the `shrink` attribute.

    sidebar

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id rerum fuga dolor, suscipit molestias laborum vitae laboriosam ipsa repellendus nesciunt distinctio, ex incidunt expedita at recusandae veniam dicta autem non.

    The reverse attribute, lets you wrap the content the other way around. Just see by yourself, when wrapped, the content will be on top and the sidebar on bottom.

    sidebar

    content

    One last thing, if you want to space the elements inside the Sidebar just use the `gap` attribute.

    sidebar

    content