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

    • Switcher-l

    ...

    The switcher is a flexbox which display its elements in a row and at a specific width its layout change from row to column.

    You don't have to use any media queries and the breakpoint is not based on the screen width, but on the switcher width!

    • threshold : is a width value representing the switcher breakpoint.
    • gap : the space between child elements.
    • reverse : change the order of the elements when wrapped (the last child will be on top, and the first one on the bottom).
    • limit : defines the maximum number of child the switcher can have while beeing in a row direction.

    Examples:

    Try to resize the switcher bellow and you will see that at 500px, its layout will switch from row to column.

    element 1

    element 2

    In this example, we will see how the limit works. Here we have set a limit at 3 and the switcher have 3 child. Therefore, the switcher will be in column because we have reached the limit.

    element 1

    element 2

    element 3