Objects are here to make your life easier. They solve common CSS headaches like centering things or responsive grids so you can focus more on creating unique visual languages instead of wrestling with CSS.

Please note: The given compatibility charts assume that custom properties and CSS calculation are available in any browser – either natively or because you used a polyfill or transformation in your build step. See the introduction on cross browser compatibility for more information.

The wrapper object is a simple helper object that helps you to to ensure an element always has a max-width and is centered on the page.

<div class="o-wrapper">
I am am a wrapper.
</div>

Overriding Size

By default the wrapper object sets its max-width to 1400px. To override this value, you can set the $layout--widths-max-width variable or override the --o-wrapper--width custom property in an inline style.

<div class="o-wrapper" style="--o-wrapper--width: 500px">
I am 500px wide.
</div>

Use cases

The most common use case is to apply o-wrapper to your layout’s main or its siblings to ensure the page’s content always has the same width.

The stack object provides a simple way of creating vertical rhythm. The stack will put even spacing between all its direct child elements by setting their margin-top value (except of course, for the first child).

<div class="o-stack">
  <div class="o-box u-bg-white">
    I am in a box
  </div>
  <div class="o-box u-bg-white">
    I am in a box
  </div>
  <div class="o-box u-bg-white">
    I am in a box
  </div>
</div>

Spacing Modifier

The stack object’s spacing can be modified by using one of the spacing modifiers provided in your _settings.scss. Modifiers are passed as the data-spacing attribute.

<div class="o-stack" data-spacing="large">
  <div class="o-box u-bg-white">
    I am in a box
  </div>
  <div class="o-box u-bg-white">
    I am in a box
  </div>
  <div class="o-box u-bg-white">
    I am in a box
  </div>
</div>

Recursive Stack

By default the stack only spaces its direct children elements. In some cases you might want to put a space between all children element. In this case, you can simply add the data-recursive attribute to your stack.

<div class="o-stack" data-spacing="large" data-recursive>
  <div class="o-box u-bg-white">
    <div>I am in a box</div>
    <div>I am a spaced div in a box</div>
  </div>
  <div class="o-box u-bg-white">
    I am in a box
  </div>
  <div class="o-box u-bg-white">
    I am in a box
  </div>
</div>

Use Cases

The stack object is a handy utility object that can be used in every situation you need to establish a consistent vertical rhythm, without relying on adding margins to every single component. In the past I've used the stack object for spacing the macro layout of an entire site but also to create a basic vertical rhythm for text-blocks coming from rich text editors.

In essence the stack object enables you to add spacing to your components without adding it to the component styles, which allows you to write more self-contained code, where every part just knows how to style itself but has no interdependence on how other parts are styled and spaced. If you use this object often enough you will fall in love with it.

The box object is a simple abstraction to box things of. Providing adjustable padding.

<div class="o-box u-bg-white">
    I am in a box
</div>

Spacing Modifier

The box object’s spacing can be modified by using one of the spacing modifiers provided in your _settings.scss. Modifiers are passed as the data-spacing attribute.

<div class="o-box u-bg-white" data-spacing="large">
    I am in a box
</div>

Use Cases

Use the box object whenever you need to box off content from the rest of the pages. Common use cases include teaser cards or floating info or call-to-action boxes. The box object, as all objects, only sets the spacing and does not add any cosmetic styling. Combine with utility classes or custom component styles to get a fully styled box.

The grid object is a flex box based layout grid, providing adjustable padding. The grid object sets up a manual grid, that needs to be controlled with utility styles across breakpoints. By default all direct child elements of the grid object are sized to 100% width.

By default und-css is set up to provide a 12 column grid. See width tokens for configuration options.

<div class="o-grid">
  <div class="u-w-6/12">
    <div class="o-box u-bg-white">
        I am in a box
    </div>
  </div>
  <div class="u-w-6/12">
    <div class="o-box u-bg-white">
        I am in a box
    </div>
  </div>
</div>

Spacing Modifier

The grid object’s spacing can be modified by using one of the spacing modifiers provided in your _settings.scss. Modifiers are passed as the data-spacing attribute.

<div class="o-grid" data-spacing="large">
  <div class="u-w-6/12">
    <div class="o-box u-bg-white">
        I am in a box
    </div>
  </div>
  <div class="u-w-6/12">
    <div class="o-box u-bg-white">
        I am in a box
    </div>
  </div>
</div>

Alignment Modifier

You can set the prefered vertical alignment of your items using the data-align attribute. Available alignments are middle and bottom, if no modifier is set, the items will be aligned at the top.

Justification Modifier

You can set the prefered horizontal alignements using the data-justify attribute. Available values are center and right, if no modifier is set, the items will be justified to the left.

Responsive Grids

By default all grid items are set to 100% in width. As you’ve seen you can use utility classes to set the width of single grid items. To achieve a responsive grid, you can use the responsive modifiers of utility classes.

<div class="o-grid">
  <div class="lg:u-w-6/12">
    <div class="o-box u-bg-white">
      I am 50% wide on big screens
    </div>
  </div>
  <div class="lg:u-w-3/12">
    <div class="o-box u-bg-white">
      I am 25% wide on big screens
    </div>
  </div>
  <div class="md:u-w-6/12 lg:u-w-3/12">
    <div class="o-box u-bg-white">
      I am 50% wide on medium screens and 25% wide on big screens
    </div>
  </div>
</div>

Use Cases

The grid object is used for manual grid, where you need full control over their responsive behaviour to account for differences in visual hierarchy. The manual grid is usually used to create the macro layout of a site.

The auto grid provides a simple way of creating a responsive grid without writing media queries or relying on breakpoints. This is good if you just have a bunch of equally important elements you need to put in a grid.

<div class="o-auto-grid">
    <div class="o-box u-bg-white">
      I am in a box
    </div>
    <div class="o-box u-bg-white">
      I am in a box
    </div>
    <div class="o-box u-bg-white">
      I am in a box
    </div>
</div>

Spacing Modifier

You can set the grid’s gutter by using one of the spacing modifiers provided in your _settings.scss. Modifiers are passed as the data-spacing attribute.

<div
  class="o-auto-grid"
  data-spacing="large"
>
    <div class="o-box u-bg-white">
      I am in a box
    </div>
    <div class="o-box u-bg-white">
      I am in a box
    </div>
    <div class="o-box u-bg-white">
      I am in a box
    </div>
</div>

Measure Modifier

The auto grid is sized intrinsically. That means that instead of specifying the amount of columns you want to have, you specify the minimum width each column should occupy. CSS grid will then calculate the neccessary amount of columns and rows to lay out your items.

The min-width is expressed in measures. You can set the min-width by using one of the measure values set in _settings.scss. Measure modifiers are passed as the data-measure attribute.

<div
  class="o-auto-grid"
  data-measure="narrow"
>
    <div class="o-box u-bg-white">
      I am in a box
    </div>
    <div class="o-box u-bg-white">
      I am in a box
    </div>
    <div class="o-box u-bg-white">
      I am in a box
    </div>
</div>

<div
  class="o-auto-grid"
  data-measure="wide"
>
    <div class="o-box u-bg-white">
      I am in a box
    </div>
    <div class="o-box u-bg-white">
      I am in a box
    </div>
    <div class="o-box u-bg-white">
      I am in a box
    </div>
</div>

Stretching the Grid

By default every element in the grid will obey strictly to the grid. If you only have one box in a grid at a large viewport, this box will only occupy the first column, even if there are potentially more columns available. In many scenarios this is the desired default.

However you might also need a grid from time to time where the elements stretch out to always fill the full width of a row. This can be achieved by adding the data-stretch modifier to your auto grid element.

If a grid row is wider than the amount of available columns it will break into a new row thereby reverting to the default auto grid behavior.

There is a good in-depth article on CSS Grid column sizing over on CSS-Tricks.

<div
  class="o-auto-grid"
  data-measure="narrow"
  data-stretch
>
  <div class="o-box u-bg-white">
    I am in a box
  </div>
  <div class="o-box u-bg-white">
    I am in a box
  </div>
  <div class="o-box u-bg-white">
    I am in a box
  </div>
  <div class="o-box u-bg-white">
    I am in a box
  </div>
</div>

Use Cases

The auto grid is good when you have a bunch of equally important items that you want to place in a responsive grid without worrying about breakpoints.

A prime example is a collection of cards (e.g. news teaser of team members) that need to be layed out automatically.

Do not use auto-grid if you need granular control over the grid. In those cases you should use the manual grid object.

The cluster provides a simple responsive way of putting items next to each other without using a grid. So instead of giving each item the same width, the item’s size is deciding how much space there is for each item. On smaller viewports the cluster item’s will get wrapped into multiple lines.

<nav class="o-cluster">
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>
</nav>

Markup

Please note, how in the above example the cluster is set on the parent element of the element holding the cluster items (nav). The cluster always expects exactly one children element that hosts all the cluster items. This is necessary, so the cluster itself can handle overflow issues.

Spacing Modifier

You can set the spacing between your cluster items by using one of the spacing modifiers provided in your _settings.scss. Modifiers are passed as the data-spacing attribute.

<nav class="o-cluster" data-spacing="large">
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>
</nav>

Alignment Modifier

You can set the prefered vertical alignment of your items using the data-align attribute. Available alignments are middle and bottom, if no modifier is set, the items will be aligned at the top.

Justification Modifier

You can set the prefered horizontal alignements using the data-justify attribute. Available values are center and right, if no modifier is set, the items will be justified to the left.

<nav class="o-cluster" data-spacing="large" data-justify="right">
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>
</nav>

Use Cases

Typical use cases of the cluster object include navigation patterns, tag lists or logo walls.

The frame object can be used to wrap images or videos to maintain or force their aspect ratio. This is especially useful if you can’t control the aspect ratio of some image data coming from a CMS or you don’t want your layout to horizontally jump when using lazy loading for images.

<div class="o-frame">
  <img src="https://source.unsplash.com/random/1600x900" alt="Some Image" />
</div>

Ratios

The frame object can be configured to use different ratios. You can set the available ratios in your _settings.scss. The ratio can be passed to the data-ratio attribute.

<div class="o-frame" data-ratio="1:1">
  <img src="https://source.unsplash.com/random/1600x900" alt="Some Image" />
</div>

Image Scaling

Images will be centered within the provided ratio and will be scaled so they fully fit within given ratio. This can cause some unwanted crops with some images, so be sure to double check if the selected ratio is the correct one for the images you’re working with.

The media object is a simple abstraction over the – well – media objects. It allows you to put media and text next to each other in a responsive way, without using a breakpoint.

The media object is sized intrinsically and will collapse to a one column layout if the min-widths of it’s children can not be met anymore.

If no widths are provided, the media object will use the natural sizes of its elements.

<div
  class="o-media"
  data-media-width="3/12"
  data-content-width="medium"
>
  <figure> <!-- Required Block Level Wrapper Element -->
    <div><!-- First child of wrapper will be the media -->
      <div class="o-frame">
        <img src="https://source.unsplash.com/random/1600x900" alt="Some Image" />
      </div>
    </div>
    <figcaption class="o-box u-bg-white"><!-- Second child is text component -->
      I am the text component of the media object
    </figcaption>
  </figure>
</div>

Markup

The media object – like the cluster object – depends on a single child element, that then wraps the media and text children. The somewhat unsemantic wrapper element is needed to handle overflow management.

Spacing Modifier

The media object’s spacing can be modified by using one of the spacing modifiers provided in your _settings.scss. Modifiers are passed as the data-spacing

<div
  class="o-media"
  data-media-width="3/12"
  data-content-width="medium"
  data-spacing="large"
>
  <figure> <!-- Required Block Level Wrapper Element -->
    <div><!-- First child of wrapper will be the media -->
      <div class="o-frame">
        <img src="https://source.unsplash.com/random/1600x900" alt="Some Image" />
      </div>
    </div>
    <figcaption class="o-box u-bg-white"><!-- Second child is text component -->
      I am the text component of the media object
    </figcaption>
  </figure>
</div>

Direction Modifier

By default the first element will be the media container. If you want to reverse the media object (making the second element the media container) you can add reversed as the data-direction attribute.

<div
  class="o-media"
  data-media-width="3/12"
  data-content-width="medium"
  data-direction="reversed"
>
  <figure> <!-- Required Block Level Wrapper Element -->
    <figcaption class="o-box u-bg-white"><!-- First child is now text component -->
      I am the text component of the media object
    </figcaption>
    <div><!-- Second child of wrapper will now be the media -->
      <div class="o-frame">
        <img src="https://source.unsplash.com/random/1600x900" alt="Some Image" />
      </div>
    </div>
  </figure>
</div>

Size Modifiers

To handle the intrinsic sizing of the media object you can provide values for data-content-width and data-media-width. You can pass named widths from your _settings.scss. It is best practice to use an absolute value for one of the values and provide a relative value for the other. See the above examples, where the media’s width was set to 3/12 while the content’s width used a measure value to set its width.

Use Cases

This component can be used everytime you need to solve the common layout problem of putting image and text next to each other in a responsive way. This might be teaser cards, landing page sections or comment entries.

Please note, even though it’s called media object you are by no means required to place images or videos in the media slot of the object. The media object can also be used to create a sidebar-layout or put input-fields and labels on the same row. The component was simply named after its most probable use case.

The site object is a simple helper object that helps you to to ensure an element always has a min-height. The most common use case is to apply this to the main section of your web page, to ensure your footer is always pushed to the bottom of the screen.

<div class="o-site">
  I am 100vh tall.
</div>

Overriding Size

By default the side object sets its min-height to 100vh. To override this value, you can override the --o-site--height custom property in an inline style.

<div class="o-site" style="--o-site--height: 50vh">
  I am 50vh tall.
</div>

Use cases

The most common use case is to apply o-site to your layout’s main to ensure the page’s footer is always pushed to the bottom of the page.