Causeway Style

Notifications

  • Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
  • It is a paradisematic country,in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. Find out more.
  • It is a paradisematic country,in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. Find out more.
  • You have One New Pending Invitation: Carillion AMBS Limited.
  • You have One New Pending Invitation: Amey Group Services Ltd.
  • You have One New Pending Invitation: Amey Group Services Ltd.

Shells

The Shells for the style are comprised of several components, the header and footer will remain constant components on each page.

Header

The header is comprised of 2 components (the site heading, incorporating the Causeway Logo, and the site menu) enclosed within <div> containers as shown below:

This should be added immediately following to the opening body tag with the appropriate modifications to the title text and site menu. 

    
      <div class="container site-header">
        <div class="site-header-holder">
          <div class="site-heading">
            <div class="site-logo"></div>
            <h1 class="page-title">
              <!-- The site title goes here -->
            </h1>
          </div>
          <!-- The site menu goes here -->
        </div>
      </div>

Avatar 

    
        <div class="account-management dropdown">
            <div class="user-avatar">
                <img src="../images/image_placeholder.png">
            </div>
            <div class="user-info">
                <a data-toggle="dropdown" href="#">Hello Guest
                    <span class="fa fa-chevron-down"></span>
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a>Logout</a>
                    </li>
                </ul>
            </div>
        </div>

Additional Site Menu Information 


  <div class="additional-nav-info">
    <span class="current-time">08 May 2014 09:29:55</span>
    <span class="grey"><strong>Causeway Ltd</strong></span>
  </div>

Breadcrumb

Example with a dropdown:

  1. Causeway LTD
  2. Carillion 

  <ol class="breadcrumb">
    <li><a href="#">Causeway LTD</a></li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Carillion
        <span class="glyhicon caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Sub Company A</a></li>
        <li><a href="#">Sub Company B</a></li>
        <li><a href="#">Sub Company C</a></li>
        <li><a href="#">More</a></li>
      </ul>
    </li>
  </ol>

Example without a dropdown:

  1. Causeway LTD
  2. Carillion

  <ol class="breadcrumb">
    <li><a href="#">Causeway LTD</a></li>
    <li><a href="#">Carillion</a></li>
  </ol>

Additional Menu (Three Line Menu)

Example:



  <span class="additional-menu">
    <a href="#" data-toggle="dropdown">
      <span class="glyphicon glyphicon-threeLine-menu"></span>
    </a>

    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Site Map</a></li>
      <li><a href="#">Application Sample</a></li>
    </ul>
  </span>

Footer

The footer is comprised of a component (the status message notification block) enclosed within <div> containers as shown below: 

    
      <div class="container site-footer">
        <div class="status-holder">
          <div class="status-message">
            <!-- Status Message Text -->
          </div>
        </div>
        <a href="#" class="site-footer-toggle">
          <span class="caret"></span>
        </a>
      </div>

Single Pane

The single pane shell comprise of a surround and an optional component - the page header block. 

    
      <div class="container page">
        <div class="content pane single-pane">
          <!-- The page header goes here -->
          <!-- The content goes here -->
      </div>