Generic containers

Containers are both simple pieces of UI for organizing content, and part of a core common language for third party components to speak.

Simple container

The simplest container has a familiar padding used with other components and rounded borders (varies with theme, of course.)

Hello world

<div class="container">Hello World</div>


.container {
  @include container();
}

Colors

New message
Hello world
All rights reserved

To add a color, use the additional .container-[color] class

Available colors include:

  • container-red
  • container-orange
  • container-yellow
  • container-green
  • container-blue
  • container-violet

You may also use your theme's primary and secondary colors via container-primary and container-secondary

Pass in a value to the $color parameter to apply different colors to a container.

<div class="container container-blue">
  <header>New message</header>
  <main>Hello world</main>
  <footer>All rights reserved</footer>
</div>


.container.container-blue {
  @include container(map-get($colors, blue));
}

Subcontainers

For subcontainers, simply use the <header>, <main>, and <footer> HTML5 tags.

Header

New message
Hello world

<div class="container">
  <header>New message</header> 
  <main>Hello World</body>
</div>


.container {
  @include container();
}

Footer

Hello world
© Copyright, all right reserved

<div class="container">
  <main>Hello World</main>
  <footer>&copy; Copyright all rights reserved</footer>
</div>


.container {
  @include container();
}

With other components

<div class="container">
  <header class="navigation">
    <nav>
      <ul>
        <li class="navbar-title">
          <h1>Edit your profile</h1>
        </li>
      </ul>
      <ul>
        <li>More options
          <ul>
            ...
          </ul>
        </li>
      </ul>
    </nav>
  </header>

  <main>
    <!-- See thumbnail content below -->
  </main>

  <footer>
    <button class="button button-primary">Save</button>
  </footer>
</div>


.container { @include container; }
.navigation { @include navigation; }
.button.button-primary { @include button($primary-color)

Images

All images are given some baseline styling to make them work best within content. Here are some additional styles that are helpful in getting content and images to live in harmony:

Treatments

Bordered

Bordered images help separate images and their captions from the main content. article.code

Look at these beautiful mountains!

<figure class="thumbnail">
  <img src="mountains.png" />
  <figcaption>Look at these beautiful mountains!</figcaption>
</figure>


.thumbnail {
  @include thumbnail();
}

Thumbnail Content

Imagine living among the mountains

In one of our gorgeous luxury timeshare condominiums, finally this dream can become a reality!

Imagine living among the mountains

In one of our gorgeous luxury timeshare condominiums, finally this dream can become a reality!

The implementation of this container is pretty simple. You'll simply need an image and any html element to house the content.

To float the image right, simply follow it after the content instead of before. 

<div class="feature">
  <img src="mountains.png" />
  <article>
    <h1>Imagine living among the mountains</h1>
    <p>...</p>
  </article>
</div>

<div class="feature">
  <article>
    <h1>Imagine living among the mountains</h1>
    <p>...</p>
  </article>
  <img src="mountains.png" />
</div>

.feature {
  @include thumbnail-content();
}


<div class="thumbnail-content">
  <img src="mountains.png" />
  <article>
    <h1>imagine living among the mountains</h1>
    <p>...</p>
  </article>
</div>

<div class="thumbnail-content">
  <article>
    <h1>imagine living among the mountains</h1>
    <p>...</p>
  </article>
  <img src="mountains.png" />
</div>

If you don't want to use the img element for your image (say you want to set the image as a background image), simply use the figure element instead.

<div class="thumbnail-content">
  <figure style="background-image: url('mountains.png');" />
  <article>
    <h1>imagine living among the mountains</h1>
    <p>...</p>
  </article>
</div>

<div class="thumbnail-content">
  <article>
    <h1>imagine living among the mountains</h1>
    <p>...</p>
  </article>
  <figure style="background-image: url('mountains.png');" />
</div>


<div class="feature">
  <figure style="background-image: url('mountains.png');" />
  <article>
    <h1>Imagine living among the mountains</h1>
    <p>...</p>
  </article>
</div>

<div class="feature">
  <article>
    <h1>Imagine living among the mountains</h1>
    <p>...</p>
  </article>
  <figure style="background-image: url('mountains.png');" />
</div>

.feature {
  @include thumbnail-content();
}