Bar

Documentation of Bar layout component.

Files

app/styles/components/bar/config.scss
app/styles/components/bar/style.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__item.bar__item--fill
.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" role="img" aria-hidden="true">
      <use xlink:href="#icon-home"></use>
    </svg>
  </div>
  <h3 class="bar__item bar__item--fill">Home</h3>
  <div class="bar__item">
    <div class="btn btn--primary">Action</div>
  </div>
</div>

Bar vertical

Bar layout with vertical orientation.

Wrapper needs .bar and .bar--vertical class.

Example:
.bar__item
.bar__item
.bar__item
Code:
<div class="bar bar--vertical">...</div>

Bar gutters

Gutter between bar items can alterned with .bar--small

Example:
Small
gutter with
.bar--small
No
gutters with
.bar--nospace
Code:
<div class="bar bar--small">...</div>
<div class="bar bar--nospace">...</div>

Bar item with border

Border between bar items can be added as bar item with class .bar__item--border.

Note

It's is usually placed on empty bar item, or space between border and bar item content needs to be handled.

Example:
Between first
and second bar item
is border
Code:
<div class="bar__item bar__item--border"></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

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.

.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>

Bar examples

Example:
Der Standard
16. 10. 2017
Code:
<div class="row row--space align-items-middle">
  <div class="col--4">
    <div class="bar bar--small bar--nowrap mb-none">
      <div class="bar__item">
        <button class="btn btn--hollow">
           Sidebar
        </button>
      </div>
      <div class="bar__item mr-none">
        <button class="btn btn--link-grey btn--equal">
          ...
        </button>
      </div>
      <div class="bar__item">
        <button class="btn btn--link-grey btn--equal">
          ...
        </button>
      </div>
      <div class="bar__item bar__item--fill">
        <div class="h4 mb-tiny">Der Standard</div>
        <div class="text-color-grey text-small">16. 10. 2017</div>
      </div>
    </div>
  </div>
  <div class="col--4 col--flex align-items-center">
    <div class="bar bar--small bar--nowrap bar--nowrap bar--nospace mb-none">
      <div class="bar__item">
        <button class="btn btn--link-grey btn--equal">
          ...
        </button>
      </div>
      <div class="bar__item">
        <button class="btn btn--link-grey btn--equal">
          ...
        </button>
      </div>
      <div class="bar__item">
        <button class="btn btn--link-grey">3/120</button>
      </div>
      <div class="bar__item">
        <button class="btn btn--link-grey btn--equal">
          ...
        </button>
      </div>
      <div class="bar__item">
        <button class="btn btn--link-grey btn--equal">
          ...
        </button>
      </div>
    </div>
  </div>
  <div class="col--4 col--flex">
    <div class="bar align-self-right mb-none">
      <div class="bar__item">
        <button class="btn btn--link-grey btn--equal">
          ...
        </button>
      </div>
      <div class="bar__item bar--small bar--nowrap">
        <button class="btn btn--link">
          Close
          ...
        </button>
      </div>
    </div>
  </div>
</div>