sunweb

Layout

object layout

Definition


The layout object helps us to define column-based layouts in a very simple way. It's probably the most used and flexible object and it becomes very powerful combined with utilities and breakpoint modifiers.
The object also allows to create responsive layouts using the utilities breakpoint modifiers (resize window to see how behaves with different breakpoints).

o-layout
      <div class="o-layout">
        <div class="o-layout__item  u-1/1"></div>
        <div class="o-layout__item  u-1/2"></div>
        <div class="o-layout__item  u-1/4"></div>
        <div class="o-layout__item  u-1/4"></div>
        <div class="o-layout__item  u-1/3"></div>
        <div class="o-layout__item  u-2/3"></div>
        <div class="o-layout__item  u-1/5"></div>
        <div class="o-layout__item  u-1/5"></div>
        <div class="o-layout__item  u-3/5"></div>
      </div>



o-layout responsive
      <div class="o-layout">
        <div class="o-layout__item u-1/2@sm u-1/4@md"></div>
        <div class="o-layout__item u-1/2@sm u-1/4@md"></div>
        <div class="o-layout__item u-1/2@sm u-1/4@md"></div>
        <div class="o-layout__item u-1/2@sm u-1/4@md"></div>
      </div>

Vertical alignment modifiers


Defines how the items should be aligned between each other within the row.
The object alignment is top by default, but middle and bottom are also available.

o-layout > o-layout--middle
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Body ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum
      <div class="o-layout o-layout--middle">
        <div class="o-layout__item u-1/2"></div>
        <div class="o-layout__item u-1/2"></div>
      </div>

Vertical alignment modifiers


Defines how the items should be aligned along the row.
The object alignment is left by default, but center and right are also available.

o-layout > o-layout--right
Lorem ipsum
Lorem ipsum
      <div class="o-layout o-layout--right">
        <div class="o-layout__item u-1/2"></div>
        <div class="o-layout__item u-1/2"></div>
      </div>

Reverse modifier


Flips the whole layout

o-layout > o-layout--reverse
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
      <div class="o-layout o-layout--reverse">
        <div class="o-layout__item  u-1/1"></div>
        <div class="o-layout__item  u-1/2"></div>
        <div class="o-layout__item  u-1/4"></div>
        <div class="o-layout__item  u-1/4"></div>
        <div class="o-layout__item  u-1/3"></div>
        <div class="o-layout__item  u-2/3"></div>
        <div class="o-layout__item  u-1/5"></div>
        <div class="o-layout__item  u-1/5"></div>
        <div class="o-layout__item  u-3/5"></div>
      </div>