Layout

The layout clases exist to maintain a consistent structure across all pages, with built-in responsive support.

Container

The container is a box that wraps all content area components in a page. The main width of content is defined by using a .container CSS class. This will automatically centre content and make sure that it stays within the defined "max width" of the container. Here is an example of a dark background with some content in the middle:

Hi there

Some content

<div class="bg-dark">
  <section class="container">
    <h1>Hi there</h1>
    <p>Some content</p>
  </section>
</div>

This container should be used on most pages to keep content aligned with headers and footers (and other content).

Layout

Layout provides a way to arrange different types of content into single or multiple columns. There are currently two types of layouts in the ember-styleguide that have different purposes and usecases.

Layout for general pages

The general layout helper is layout that will automatically apply a reasonable layout for most text based pages. Using the layout helper on its own will only apply spacing between elements in the page:

Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.
Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.
Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.
Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.

<ul class="layout list-unstyled">
  <EsCard>
    Some of the best development teams in the world have been iterating on their
    products for years with Ember. With scalable UI architecture baked-in from
    the start, you’ll be working with the same patterns these organizations use
    every step of the way.
  </EsCard>
  <EsCard>
    Some of the best development teams in the world have been iterating on their
    products for years with Ember. With scalable UI architecture baked-in from
    the start, you’ll be working with the same patterns these organizations use
    every step of the way.
  </EsCard>
  <EsCard>
    Some of the best development teams in the world have been iterating on their
    products for years with Ember. With scalable UI architecture baked-in from
    the start, you’ll be working with the same patterns these organizations use
    every step of the way.
  </EsCard>
  <EsCard>
    Some of the best development teams in the world have been iterating on their
    products for years with Ember. With scalable UI architecture baked-in from
    the start, you’ll be working with the same patterns these organizations use
    every step of the way.
  </EsCard>
</ul>

The true power of the layout helper is when you want to have some elements take up different widths:

Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.
Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.
Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.
Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.

<ul class="layout list-unstyled">
  <EsCard class="lg:col-3">
    Some of the best development teams in the world have been iterating on their
    products for years with Ember. With scalable UI architecture baked-in from
    the start, you’ll be working with the same patterns these organizations use
    every step of the way.
  </EsCard>
  <EsCard class="lg:col-3">
    Some of the best development teams in the world have been iterating on their
    products for years with Ember. With scalable UI architecture baked-in from
    the start, you’ll be working with the same patterns these organizations use
    every step of the way.
  </EsCard>
  <EsCard class="lg:col-2">
    Some of the best development teams in the world have been iterating on their
    products for years with Ember. With scalable UI architecture baked-in from
    the start, you’ll be working with the same patterns these organizations use
    every step of the way.
  </EsCard>
  <EsCard class="lg:col-3">
    Some of the best development teams in the world have been iterating on their
    products for years with Ember. With scalable UI architecture baked-in from
    the start, you’ll be working with the same patterns these organizations use
    every step of the way.
  </EsCard>
</ul>

The layout is based on a 6-column layout on larger screens and 4-column on smaller screens. Anything that is prefixed with lg: will only apply on larger widths, so the example above will fallback to full width when viewed on smaller screens. If you want to apply column rules only on smaller screens you can use the helpers prefixed with sm:

Now we will go through a few examples that will hopefully give you some inspiration for what you can achieve with the existing helpers.

Center-Aligned fixed-width column

Here is an example of a centered element that only takes up 4 (out of the available 6) columns. A column class is used to limit its width and an offset class is used to define where it should start. Note: because both of these rules start with lg: they will not apply on mobile and it will fallback to being a full-width UI.

Build with the teams that never stop shipping.

Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.

<div class="layout">
  <div class="lg:col-4 lg:start-2 text-center">
    <h2>Build with the teams that never stop shipping.</h2>
    <p>
      Some of the best development teams in the world have been iterating on
      their products for years with Ember. With scalable UI architecture
      baked-in from the start, you’ll be working with the same patterns these
      organizations use every step of the way.
    </p>
  </div>
</div>