Containers - Flex UI Library

Containers

Canvas Container

The canvas container has the following styles:

  <style>
    .c-container--canvas {
      background-color: $theme-color-canvas;
      padding: $theme-spacing-unit;
    }
  </style>

This container is generally applied to the page (<body> tag) or to the element that has the Bootstrap class .container.

Mobile Container

This is the component that all Mobile pages should use for layout.

Mobile Content

<!-- Classes that begin with '.s-' are for UI Library display purposes only. -->
<div class="c-container--mobile s-container--mobile">
  <div class="c-header--mobile">
  <div class="c-navbar--mobile js-navbar-pro">
  <a href="#" class="c-navbar__item js-navbar-item active">
    <div class="flexicon flexicon-search--large"></div>
  </a>

  <a href="#" class="c-navbar__item js-navbar-item">
    <div class="flexicon flexicon-flame--large"></div>
  </a>

  <a href="#" class="c-navbar__item js-navbar-item">
    <div class="flexicon flexicon-avatar--large"></div>
  </a>

  <a href="#" class="c-navbar__item js-navbar-item">
    <div class="flexicon flexicon-file--large"></div>
  </a>

  <a href="#" class="c-navbar__item c-badge-holder--icon js-navbar-item">
    <div class="flexicon flexicon-bars--large"></div>
    <div class="badge"> 10 </div>
  </a>

  <a href="#" class="c-navbar__item js-navbar-item">
    <div class="c-avatar c-avatar--small">ab</div>
  </a>
</div>

<script>
$(function () {
  $('.js-navbar-pro').on('click', '.js-navbar-item', function () {
    $('.js-navbar-pro .js-navbar-item').removeClass('active');
    $(this).addClass('active');
    return false;
  });
});
</script>

</div>

  <div class="c-content--mobile">
    Mobile Content
  </div>
</div>