Layout

The layout of any basic view : header, footer, container, and the grid system. These layout components provide a basic, mobile-first, device-agnostic and flexible system, based on Flexbox and Bootstrap 4.

You can find the below components in _spinner.scss, _header.scss, _footer.scss, _banner.scss and _grid.scss.




Spinner

Visibility of system status is an important key to User Experience since it shows the users you are listening and aware of their expectations. Thus, a progress indicator makes waiting time more acceptable.

<div class="spinner-backdrop">
  <img class="spinner" src="/assets/im/spinner.gif" alt="loading">
</div>












Basic grid

The basic grid uses the Bootstrap 4 framework and the Flexbox technology to display content in two columns : an aside and a main section, respectively 1/3 and 2/3 of the container.

The basic grid is used when significant content has to be placed in the aside, for instance to present an equipment, an attachment or to display the search results and its filters.

<div class="basic-grid">
  <aside>
      ...
  </aside>
  <section>
      ...
  </section>
</div>



Navigation grid

Like the basic grid, this navigation grid uses the Bootstrap 4 framework and the Flexbox technology to display content in two columns. In this grid the aside is smaller and the main section bigger, respectively 1/4 and 3/4 of the container.

The navigation grid is useful when the aside is used for a navigation system, mainly with the nav dropdown (see section Navigations), for instance to introduce various services.

<div class="navigation-grid">
  <aside>
      ...
  </aside>
  <section>
      ...
  </section>
</div>

<div class="navigation-grid">
  <aside>
      ...
  </aside>
  <section>
      <div class="bloc">
        ...
      </div>
      <div class="row">
        <div class="col">
          ...
        </div>
        <div class="col">
          ...
        </div>
      </div>
  </section>
</div>

<div class="navigation-grid">
  <section>
      ...
  </section>
  <aside>
      ...
  </aside> 
</div>



Split grid

The split grid, also based on Bootstrap 4 framework and the Flexbox technology, provided two equal columns.

<div class="split-grid">
  <section>
      ...
  </section>
  <section>
      ...
  </section>
</div>



Features grid

Feature cards (see section Cards & Blocks) are natively made to fit in a grid. No need for an additional class : you just have to stack your cards in a .row.

<div class="row">
  <div class="card-feature-container">
    <a href="#" class="card-feature">
      <img class="card-img-top" alt="" src="http://farm8.staticflickr.com/7462/15608351184_fc84dda888_z.jpg">
      <div class="card-block">
        <p>Aerial Jib 1</p>
      </div>
    </a>
  </div>
  <div class="card-feature-container">
    <a href="#" class="card-feature">
      <img class="card-img-top" alt="" src="http://farm8.staticflickr.com/7462/15608351184_fc84dda888_z.jpg">
      <div class="card-block">
        <p>Aerial Jib 1</p>
      </div>
    </a>
  </div>
  ...
</div>



Timeline (history)

The timeline is obviously used when it makes sense to introduce content according to time, namely for an history view for instance.

As it is shown below, each card contains a title and a short text, but can be illustrated with a specific media, such as a picture or a video.

2013

Yanmar becomes a shareholder

Strengthening of the Yanmar partnerships sealed by Yanmar becoming a shareholder, with a shareholding of 6.26%.

1996

Manitou Germany

Opening of the Manitou Germany subsidiary.

ISO 9001

ISO 9001 certification obtained.

<div class="timeline">
  <section>
    <div class="timeline-line"></div>

    <div class="timeline-year">
      <span>2013</span>
    </div>

    <article class="bloc">
      <div class="row">
        <div class="timeline-picture">
          <img alt="" src="http://manitou.cdn.prismic.io/manitou/910b0dc4b89561fd3f0b2c2cad4b60eaaf0c4fea_2013_yanmar.jpg">
        </div>
        <div class="timeline-content">
          <h2 class="border">Yanmar becomes a shareholder</h2>
          <p>Strengthening of the Yanmar partnerships sealed by Yanmar becoming a shareholder, with a shareholding of 6.26%.</p>
        </div>
      </div>
    </article>

    <div class="timeline-year">
        <span>1996</span>
    </div>

    <article class="bloc">
      <div class="row">
        <div class="timeline-content">
          <h2 class="border">Manitou Germany</h2>
          <p>Opening of the Manitou Germany subsidiary.</p>
        </div>
      </div>
    </article>

    <article class="bloc">
      <div class="row">
      <div class="timeline-picture">
          <img alt="" src="http://manitou.cdn.prismic.io/manitou/bb3376acc58ca6467c4c2fe694f1d21240182fd7_capture-decran-2015-02-04-a-10.59.54.png">
        </div>
        <div class="timeline-content">
          <h2 class="border">ISO 9001</h2>
          <p>ISO 9001 certification obtained.</p>
        </div>
      </div>
    </article>

  </section>
</div>