A simple row based flexible toolbar

<div f-toolbar f-toolbar-inverse f-bg-primary>
    <span f-title>Hi there</span>
    <div f-buttons-right>
      <button f-t-white f-button clear>Login</button>
    </div>
  </div>

  <div f-toolbar>
    <button f-button clear> Left</button>
    <span f-rubber></span>
    <div f-title>Centered</div>
    <span f-rubber></span>
    <button f-button clear>Right</button>
  </div>

Brandon

<div f-toolbar f-bg-indigo-500>
  <div f-buttons-left>
    <a href="/" f-button clear f-t-white f-icon-only>
      <i class="zmdi zmdi-arrow-left" f-t-white></i>
    </a>
  </div>
  <span f-w-min-10></span><!-- spacer to balance other side buttons -->
  <span f-rubber></span>
  <input type="text" placeholder="Search Facebook" f-t-14px f-round f-placeholder-inverse f-placeholder-center f-w-min-40 f-p-8px f-p-l-12px f-m-t-10px f-m-b-10px f-b-none f-bg-black-20 />
  <span f-rubber></span>
  <button f-button clear f-t-white-100 f-icon-only>
    <i class="zmdi zmdi-comment-more"></i>
  </button>
  <button f-button clear f-t-white-50>
    <div f-avatar sm f-m-r-10px>
      <img src="http://i.pravatar.cc/100?d=7" />
    </div>
    <span f-t-white-100 f-t-14px f-hide-md-down>Brandon</span>
  </button>
  <button f-button clear f-t-white-50 f-icon-only>
    <i class="zmdi zmdi-chevron-down"></i>
  </button>
</div>