2. Objects

CSS objects that can be reused throughout the site. They are usually prefixed with o-.

Inline

A standard, ‘inline’ image.

Example markup:

<img src="image.jpg">

Outset

The outset utility can be used to outset an image by 200px to either the left, right or both sides of its container.

Example markup:

<div class="o-outset--left">
    <img src="image.jpg">
</div>

Example markup:

<div class="o-outset--right">
    <img src="image.jpg">
</div>

Example markup:

<div class="o-outset--both">
    <img src="image.jpg">
</div>

Breakout

Similar to o-outset--both, o-breakout breaks an image out of its container, but this time it stretches to the full width of the viewport.

Example markup:

<div class="o-breakout">
    <img src="image.jpg">
</div>

Image Cover

Covers the background of an element with an image. It uses the background-size: cover property, so the image will be rendered, preserving its intrinsic proportion, at the largest size contained within, or covering, the background positioning area.

Usage:

Define the image source inline in the style attribute of the element. The element needs to be given some dimensions, so this object works well with the o-ratio-embed object.

Example markup:

<div class="o-ratio-embed">
    <div class="o-ratio-embed__ratio o-ratio-embed--2by1"></div>
    <div class="o-ratio-embed__content">
        <div class="o-img-cover" style="background-image: url(image.jpg);"></div>
    </div>
</div>

Gives an element an intrinsic ratio. Works well with the o-img-cover object. Available ratios are 2by3, 1by1, 2by1, 3by1, 16by9, 3by2 and 4by3.

Example markup:

<div class="o-ratio-embed">
    <div class="o-ratio-embed__ratio o-ratio-embed--3by2"></div>
    <div class="o-ratio-embed__content">
        <!-- Content -->
    </div>
</div>

Uses inline-block and a psuedo element to vertically align content within an element.

Example markup:

<div class="o-valign">
    <div class="o-valign__content--middle">
        <!-- Content -->
    </div>
</div>

The container class should be used for structural layout purposes, such as separating ‘slices’ of content with different widths.

Use the u-max-width utility class to set a max width on a container. To add internal padding to a container use the u-padding utility class.

Containers can also contain an internal element, with the class section, on which you can set top and/or bottom padding (defaults to 20px top and bottom).

Example markup:

<div class="container u-max-width--l">
    <section class="section u-padding-top--none u-padding-btm--s"></section>
</div>

Example Markup:

<div class="o-grid o-grid--has-gutter">
    <div class="o-grid__cell o-unit-1of2 o-unit-1of4--m"></div>
</div>

Responsive Units

Firstly set a base row unit count for each cell, e.g. o-unit-1of2. This means there will be 2 cells in a row, so each cell will span 50% of its container.

Then set row unit counts for each breakpoint that you require, e.g. o-unit-1of4--m. This means there will be 4 cells in a row at the m breakpoint (768px), so each cell will span 25% of its container

Available unit counts are 1 to 1 2.

Utilities

A number of utilities are available:

o-grid--has-gutter

o-grid--<left/center/right>

o-grid--valign-<top/middle/bottom>

Aram Pattern Library | © GPMD Limited