Bar

Documentation of Bar layout component.

Files

app/styles/layout/_bar.scss

Bar

Bar is a simple horizontal layout for mixing content and actions.

Creating a bar layout is easy: The wrapper needs a .bar class and it's children a .bar__item or .bar__content class.

.bar__item takes only the space it needs
.bar__content takes up all remaining space

Example:

.bar__item

.bar__content

.bar__item

Home

Action

Code:

<div class="bar">
  <div class="bar__item"> ... </div>
  <div class="bar__content"> ... </div>
  <div class="bar__item"> ... </div>
</div>

<div class="bar">
  <div class="bar__item">
    <svg class="icon icon-home icon--large" role="img" aria-hidden="true">
      <use xlink:href="#icon-home"></use>
    </svg>
  </div>
  <h3 class="bar__content">Home</h3>
  <div class="bar__item">
    <div class="btn btn--primary">Action</div>
  </div>
</div>

Alignment

Bar is compatible with flexbox alignment classes.

Example:

.align-self-top

Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit.

.align-self-bottom

.bar.align-items-bottom

.bar__item

Code:

<div class="bar">
  <div class="bar__item align-self-top"> ... </div>
  <div class="bar__content"> ... </div>
  <div class="bar__item align-self-bottom"> ... </div>
</div>

<div class="bar align-items-bottom">
  <div class="bar__item"> ... </div>
  <div class="bar__content"> ... </div>
  <div class="bar__item"> ... </div>
</div>