w8mngr | styleguide

Breadcrumbs

Used to indicate a path for the user. I like these as a way for helping users and developers understand the flow and hierarchy of the application.

On live (as below) we wrap the inner contents in a .section-inside class so the container overflows the window, while the contents stay aligned with the rest of the view.

NB: To show this styleguide properly, I modified the breadcrumbs and its inner contents. Use just as shown in pages in order for the breadcrumbs to render properly.

<div class="breadcrumbs">
  <div class="section-inside">
    <ul>
      <li><a href="/foods">Foods</a></li>
      <li><a href="/foods/1">ARCHWAY Home Style Cookies, Peanut Butter</a></li>
      <li>Edit</li>
    </ul>
  </div>
</div>

Day Navigator

Used to indicate the current day and give options to change that day for the user.

NB: To show this styleguide properly, I modified this style. Use just as shown in pages in order for the day navigator to show properly.

Tuesday, August 2, 2016
<div class="day-navigator">
    <a href="#" title="Previous Day"><i class="fa fa-chevron-circle-left"></i></a>
    <span class="current-day">Tuesday, August  2, 2016</span>
    <a href="#" title="Next Day"><i class="fa fa-chevron-circle-right"></i></a>
</div>