Objects

Layout

Our grid-like layout system can be used to group content in halves, thirds, quarters and fifths.

Unlike a traditional column grid system, gutters are included into each layout item by default; allowing designers and developers to focus purely on the grouping of content.

Dependencies

sky-toolkit-core/all

The classes from supercell/objects.layout are used to set the gutters and offsets essential for forming Toolkit layouts.

.o-layout is the outer block class which adds offsets to counter the outer gutters, used similarly to the row classes found in other frameworks.
.o-layout__item is the element used for layout items which sets gutter spacing and essential styling. This can be augmented using the width utilities in utilities/widths in order to create layout structures sized accordingly. The .o-layout__item class is used similarly to col classes in other frameworks.

All direct child elements of .o-layout must be .o-layout__item elements for example:

<div class="o-layout">
  <div class="o-layout__item  u-width-1/2">
    <!-- Content -->
  </div>
</div>

🔗Basic Layouts

We can use the layout classes in combination with the width utility to create a wide range of layouts:

Full width

Half width

Third width

Quarter width

Half width

Nested item

<div class="o-layout">
  <div class="o-layout__item">
    <div>Full width</div>
  </div>

  <div class="o-layout__item u-width-1/2">
    <div>Half width</div>
  </div>
  <div class="o-layout__item u-width-1/2">
    <div>Half width</div>
  </div>

  <div class="o-layout__item u-width-1/3">
    <div>Third width</div>
  </div>
  <div class="o-layout__item u-width-1/3">
    <div>Third width</div>
  </div>
  <div class="o-layout__item u-width-1/3">
    <div>Third width</div>
  </div>

  <div class="o-layout__item u-width-1/4">
    <div>Quarter width</div>
  </div>
  <div class="o-layout__item u-width-1/4">
    <div>Quarter width</div>
  </div>
  <div class="o-layout__item u-width-1/4">
    <div>Quarter width</div>
  </div>
  <div class="o-layout__item u-width-1/4">
    <div>Quarter width</div>
  </div>

  <div class="o-layout__item u-width-1/2">
    <div>Half width</div>
  </div>

  <div class="o-layout__item u-width-1/2">
    <div class="o-layout">
      <div class="o-layout__item u-width-1/2">
        <div>Nested item</div>
      </div>
      <div class="o-layout__item u-width-1/2">
        <div>Nested item</div>
      </div>
    </div>
  </div>
</div>

🔗Responsive

utilities/widths also makes use of the breakpoints defined in settings/breakpoints to provide a suite of responsive classes by default, using a mobile-first approach.

Simply add the following suffixes to your width classes:

@small - "small" breakpoint and up
@medium - "medium" breakpoint and up
@large - "large" breakpoint and up
@x-large - "x-large" breakpoint and up

<div class="o-layout  o-layout--spaced">
  <div class="o-layout__item  u-width-1/2  u-width-1/4@large">
    <!-- First Content -->
  </div>
  <div class="o-layout__item  u-width-1/2  u-width-1/4@large">
    <!-- Second Content -->
  </div>
  <div class="o-layout__item  u-width-1/2  u-width-1/4@large">
    <!-- Third Content -->
  </div>
  <div class="o-layout__item  u-width-1/2  u-width-1/4@large">
    <!-- Fourth Content -->
  </div>
</div>

🔗Push / Pull

Elements can be offset from one another. These spacings can be achieved by adding .u-push-× or .u-pull-× where × equals values supplied by classes in utilities/widths.

e.g. .u-push-1/3 to positively offset by a third.

These classes can also be combined with the responsive classes as defined above. e.g .u-push-1/3@medium to effect medium screens and above

33.33333% width item on large screens

33.33333% width item pushed out by a further 33.33333%, creating an equal gutter between the two elements on large screens only.

<div class="o-layout">
  <div class="o-layout__item  u-width-1/3@large">
    33.33333% width item on large screens
  </div>
  <div class="o-layout__item  u-width-1/3@large  u-push-1/3@large">
    33.33333% width item pushed out by a further 33.33333%, creating an equal gutter between the two elements on large screens only.
  </div>
</div>

🔗Options

There are a lot of different options (and combinations of options) for different styles of layout. Below is a rough summary, but please refer to the comments in the Sass for a more complete description of what each option provides.

.o-layout--[narrow|wide|flush] Narrow, wide, or no gutters between items.
.o-layout--[middle|bottom] Align all items to the vertical middles or bottoms of each other (top alignment is the default).
.o-layout--[center|right] Begin filling up layout items from the horizontal center or the right hand side of the layout context (filling from the left is the default).
.o-layout--reverse Completely reverse the displayed order of the layout items.
.o-layout--spaced Add vertical gutters to layout items (they do not carry vertical spacing by default).

100% by default, then 25% width on medium screens, before finally being 50% width on large screens and beyond. Displays last on-screen despite being defined first in the markup.
50% width by default, then 25% width on medium screens and beyond. Displays third on-screen despite being defined second in the markup.
50% width by default, then 25% width on medium screens and beyond. Displays second on-screen despite being defined third in the markup.
100% by default, then 25% width on medium screens, before finally being 100% width again on large screens and beyond. Displays first on-screen despite being defined last in the markup.

<ul class="o-layout  o-layout--spaced  o-layout--reverse">
  <li class="o-layout__item
             u-width-1/1  u-width-1/4@medium  u-width-1/2@large">
    100% by default, then 25% width on medium screens, before finally being 50% width on large screens and beyond. Displays last on-screen despite being defined first in the markup.</li>
  <li class="o-layout__item
             u-width-1/2  u-width-1/4@medium">
    50% width by default, then 25% width on medium screens and beyond. Displays third on-screen despite being defined second in the markup.</li>
  <li class="o-layout__item
             u-width-1/2  u-width-1/4@medium">
    50% width by default, then 25% width on medium screens and beyond. Displays second on-screen despite being defined third in the markup.</li>
  <li class="o-layout__item
             u-width-1/1  u-width-1/4@medium  u-width-1/1@large">
    100% by default, then 25% width on medium screens, before finally being 100% width again on large screens and beyond. Displays first on-screen despite being defined last in the markup.
  </li>
</ul>