Ornament

Containers are internal content wrappers that manage widths of things.

By default, Ornament wraps your content in a container already, so these should be used full-width by using either :above_layout or :below_layout yields.

Percentage Containers

Percentage containers take a percentage width and a pixel max-width.

The idea here is that the container will be a percentage of the screen size as it scales down, but at the largest size it won't exceed the max-width.

This is the type of container that Ornament uses by default for all content in the form of the .layout--container element.

The appeal of percentage containers is that the gap between the content and the side of the viewport never really feels too big or too small.

The syntax to use this mixin is container-percentage($percentage-width, $max-width).

<div class="container-percentage">
  <div class="panel__passive">This is a 96% wide container that maxes at 900px</div>
</div>

.container-percentage {
  @include container-percentage(96%, 900px);
}

Padded Containers

The other container type is the padded container.

This again uses a max-width but also uses padding on either side of the container rather than a percentage width to push it away from the viewport. This is usefull if you need things to pull out of the container, you know exactly how many pixels things need to move.

There are two padding values you can pass in to the mixin, the first is desktop and the second is mobile padding.

You can optionally pass false in as the mobile padding to only use one value all the way down.

The syntax for this mixin is container($max-width, $desktop-padding, $mobile-padding).

<div class="container-pixel">
  <div class="panel__passive">This is a 800px wide container with 32px padding on the left and right.</div>
</div>

.container-pixel {
  @include container(50rem, $default-unit, $small-unit);
}

Full-width examples

It's a little hard to see the intention inside the code previews above, so below are some full-width examples: