Components

Action Panel

Action panels are used to group links that apply to the whole page, or to an area of the page. Simply wrap the links in a <ul class="actionPanel" > to get the desired appearance.

Space is automatically added to the right of icons embedded in the action panel links; there is no need to use the .inline helper class.

<ul class="actionPanel">
  <li><a href="#"><i class="icon16-contactAdd"></i>Create a Recipe</a></li>
  <li><a href="#"><i class="icon16-approve"></i>Approve Account</a></li>
  <li><a href="#"><i class="icon16-trash"></i>Delete stuff</a></li>
</ul>

Badge

Badges help users quickly distinguish between the different brands, asset formats, and asset types in search results and detail pages. Shows that are aired on two different brands could have the same show title, and the brand badge helps the user distinguish between the two different assets. Badges also help users differentiate between a standard definition episode and a high definition episode.

Usage and Initialization

Simply add the desired format code like (badge, badge-format) in <span> tag to get the desired appearance.

Generic badge SD Cooking DIY FLN Food GAC HGTV Travel

<span class="badge">Generic badge</span>
<span class="badge-format">SD</span>
<span class="badge-cooking">Cooking</span>
<span class="badge-diy">DIY</span>
<span class="badge-fineLiving">FINE</span>

Feedback Message

Feedback message is used to inform users about an event that has occurred.

Usage

Feedback messages are available for success, error, warning and info. To use any of these wrap the text message in one of the classes .feedbackMessage-success, .feedbackMessage-error, .feedbackMessage-warning or .feedbackMessage-info.

Success

Thank you for logging in.

<div class="feedbackMessage-success">
  Thank you for logging in 
</div>

Error

Your account has been suspended.

samplefile1.jpg
samplefile2.jpg

<div class="feedbackMessage-error">
  Your account has been suspended.
  <ul class="unstyled">
    <li>samplefile1.jpg</li>
    <li>samplefile1.jpg</li>
  </ul>  
</div>

Warning

You have entered incorrect password.

<div class="feedbackMessage-warning">
  You have entered incorrect password. 
</div>

Information

General info.

<div class="feedbackMessage-info">
  General info
</div>

Keyword filter

You can use the same sizing classes for form inputs with the keyword filter, like .input-large.

<span class="keywordFilter">
    <i class="icon16-magnifySmall"></i>
    <span class="keywordFilter-wrapper">
        <input type="search" value="Filter..." />
    </span>
    <a class="keywordFilter-clear" href="#"><i class="icon16-close"></i></a>
</span>

Local Navigation

Local Navigation helps the user to navigate locally within some subset of pages in a site. Local navigation is faster and more efficient for users to scan. When one of the top level areas is selected the navigation bar expands to include the local navigation within that area.

Usage and Initialization

Simply add the code in <ul> in the <div class="localNavigation"> tag to get the desired appearance.

View an example

Note:
When using local navigation in a layout, the class container-localNavigation needs to be applied to the parent with the class container-fixed or container-fluid. For more information on layouts click here.

<body>
  ...
  <div class="container-fluid container-localNavigation"> 
  <!-- Could also used container-fixed -->
    <div class="content" role="main">
      ...
    </div>

    <div class="localNavigation">
      <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a>
          <ul>
            <li><a href="#">Subpage 2.1</a></li>
            <li class="selected"><a href="#">Subpage 2.2</a></li>
          </ul>
        </li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
        <li><a href="#">Page 5</a></li>
      </ul>
    </div>
  </div>
  ...
</body>

Page footer

The page footer should be inserted before the closing </body> tag, prior to any <script> elements.

<footer class="pageFooter">
  <hr />
  <p>Scripps Networks Interactive Bootstrap version 1.1.0.</p>
  <p>Copyright © 2012 Scripps Networks Interactive</p>
</footer>

Page header

Basic logo

The page header starts with a basic appearance that just shows the background and the logo. If the header will be used without global navigation, apply the pageHeader-noNavigation class to the <header> element to add additional padding below the logo.

<header class="pageHeader pageHeader-noNavigation">
  <div class="pageHeader-portal">
    <div class="pageHeader-logo">
      <a href="/"></a>
    </div>
  </div>
</header>

Utility links

Utility links can be added to the header by appending this code to the <div class="pageHeader-portal" > element. The first class needs to be applied to the first <li> element to remove the dividing line.

<nav class="pageHeader-utility">
  <ul>
    <li class="first"><a href="#">My Account</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Signout</a></li>
  </ul>
</nav>

Search

Similar to utility links, search can be added to the header by appending this code to the <div class="pageHeader-portal" > element.

To add behavior, JavaScript can bind to the text input and button based on the IDs #searchInput and #searchButton.

<div class="pageHeader-search">
  <div class="pageHeader-searchWrapper">
    <input id="searchInput" type="search" value="Search" />
  </div>
  <a id="searchButton" href="#"><i class="icon16-magnifySmall"></i></a>
</div>

Global Navigation

Navigation links can be added directly below the header using the following code block. A class of selected should be added to the <a> element that represents the page or area being viewed.

<nav class="globalNavigation">
  <ul>
    <li class="selected"><a href="index.html">Overview</a></li>
    <li><a href="scaffolding.html">Scaffolding</a></li>
  </ul>
</nav>

Pagination

Pagination is presented here without any actual functionality to demonstrate the correct appearance.

Most often, pagination will be implemented as part of a JavaScript plugin. It may make sense to extend the JavaScript plugin to use the example HTML/CSS below instead of trying to style the pagination built in into the plugin.

<div class="pager">
    <ul>
        <li class="pager-arrow"><a href="#"><i class="icon12-first"></i></a></li>
        <li class="pager-arrow"><a href="#"><i class="icon12-previous"></i></a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li class="pager-arrow"><a href="#"><i class="icon12-next"></i></a></li>
        <li class="pager-arrow"><a href="#"><i class="icon12-last"></i></a></li>
    </ul>

    <div class="pager-pageJump">
        Page <input type="text" /> of <a href="#">12</a>
    </div>
</div>

Progress Indicator

Progress indicator describes each step involved in submitting data to a system. As the user progresses through the steps, the current step that they are on is highlighted, giving a clear indication where they are in the process.

Usage

The progress indicator mainly consists of a ul with a class progressIndicator-list, which along with progressIndicator-content is wrapped in progressIndicator. The variation to the progress indicator is the vertical progress indicator which can be achieved by applying an additional class progressIndicator-vertical.

Appearance

We can add .completed class to a li (tab) to indicate that it is completed. We can add .current class to a li (tab) to indicate that it is active.

Progress Indicator - Horizontal

Lorem Ipsum Dolar redit verim.
Lorem Ipsum Dolar redit verim.
Lorem Ipsum Dolar redit verim.
Lorem Ipsum Dolar redit verim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. is urna mollis magna tincidunt posuere. Donec ipsum orci, ultricies quis ultricies vel, cursus ut neque.Quisque a est eu sapien congue rhoncus id quis purus. Aliquam erat volutpat. Etiam at luctus justo. Nulla eget elit eget lacus dignissim lobortis.

Secondary

<section class="progressIndicator clearFix">
  <ul class="progressIndicator-list">
    <li class="completed">
      <i class="progressIndicator-symbol"></i>
      <span class="progressIndicator-title">Lorem Ipsum Dolar redit verim.</span>
    </li>
    <li class="current">
      <i class="progressIndicator-symbol"></i>
      <span class="progressIndicator-title">Lorem Ipsum Dolar redit verim.</span>
    </li>
    <li>
      <i class="progressIndicator-symbol"></i>
      <span class="progressIndicator-title">Lorem Ipsum Dolar redit verim.</span>
    </li>
    <li>
      <i class="progressIndicator-symbol"></i>
      <span class="progressIndicator-title">Lorem Ipsum Dolar redit verim.</span>
    </li>
  </ul>
  <div class="progressIndicator-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. is urna mollis magna tincidunt posuere. Donec ipsum orci, ultricies quis ultricies vel, cursus ut neque.Quisque a est eu sapien congue rhoncus id quis purus. Aliquam erat volutpat. Etiam at luctus justo. Nulla eget elit eget lacus dignissim lobortis
    <div class="form-actions">
      <input type="submit" value="Primary" class="button button-primary"/>
      <a href="#">Secondary</a>
    </div> 
  </div>
</section>

Progress Indicator - Vertical

Lorem Ipsum Dolar redit verim.
Lorem Ipsum Dolar redit verim.
Lorem Ipsum Dolar redit verim.
Lorem Ipsum Dolar redit verim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse is urna mollis magna tincidunt posuere. Donec ipsum orci, ultricies quis ultricies vel, cursus ut neque.Quisque a est eu sapien congue rhoncus id quis purus. Aliquam erat volutpat. Etiam at luctus justo. Nulla eget elit eget lacus dignissim lobortis.

Secondary

<section class="progressIndicator progressIndicator-vertical clearFix">
  <ul class="progressIndicator-list">
    <li class="completed">
      <i class="progressIndicator-symbol"></i>
      <span class="progressIndicator-title">Lorem Ipsum Dolar redit verim.</span>
    </li>
    <li class="current">
      <i class="progressIndicator-symbol"></i>
      <span class="progressIndicator-title">Lorem Ipsum Dolar redit verim.</span>
    </li>
    <li>
      <i class="progressIndicator-symbol"></i>
      <span class="progressIndicator-title">Lorem Ipsum Dolar redit verim.</span>
    </li>
    <li>
      <i class="progressIndicator-symbol"></i>
      <span class="progressIndicator-title">Lorem Ipsum Dolar redit verim.</span>
    </li>
  </ul>
  <div class="progressIndicator-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse is urna mollis magna tincidunt posuere. Donec ipsum orci, ultricies quis ultricies vel, cursus ut neque.Quisque a est eu sapien congue rhoncus id quis purus. Aliquam erat volutpat. Etiam at luctus justo. Nulla eget elit eget lacus dignissim lobortis.
    <div class="form-actions">
      <input type="submit" value="Primary" class="button button-primary"/>
      <a href="#">Secondary</a> 
    </div>
  </div>
</section>

Property Grid

Scripps applications often use property grids to display metadata. The left hand column is used to display the labels for each metadata attribute with the associated value in the right hand column.

Metadata
Property	Value
Property	Value
Property	Value

<table class="propertyGrid">
  <caption>Metadata</caption>
  <tbody>
    <tr>
      <th>Property</th>
      <td>Value</td>
    </tr>
    <tr>
      <th>Property</th>
      <td>Value</td>
    </tr>
    <tr>
      <th>Property</th>
      <td>Value</td>
    </tr>
  </tbody>
</table>

Property grids aren't limited to only displaying one column of labels and one column of values. Simply add additional <th>/<td> pairs to create multiple columns.

Metadata
Column 1	Value 1	Column 2	Value 2
Column 1	Value 1	Column 2	Value 2

Section Help

Section Help tells the user how they should complete the task by including a detailed block of help text.

Usage

For a simple Section Help, wrap the required text and the header with .sectionHelp. The header with a class sectionHelp-header can enwrap an icon like <i class="icon16-info"></i> and a heading text wrapped in h5.

General Section Info

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

<section class="sectionHelp" >
  <header class="sectionHelp-header" >  
    <i class="icon16-info"></i>
    <h5 class="sectionHelp-title">
      General Section Info
    </h5> 
  </header>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis mod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</section>

Structured Action Result

Structured action result encapsulates the result of an action method.

Usage

The structured action result mainly consists of a ul with a class searchResult-actionPanel, which along with searchResult-content is wrapped in searchResult.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse is urna mollis magna tincidunt posuere. Donec ipsum orci, ultricies quis ultricies vel, cursus ut neque.Quisque a est eu sapien congue rhoncus id quis purus. Aliquam erat volutpat. Etiam at luctus justo. Nulla eget elit eget lacus dignissim lobortis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse is urna mollis magna tincidunt posuere. Donec ipsum orci, ultricies quis ultricies vel, cursus ut neque.Quisque a est eu sapien congue rhoncus id quis purus. Aliquam erat volutpat. Etiam at luctus justo. Nulla eget elit eget lacus dignissim lobortis.

<ul class="searchResults">
  <!-- Search Result without image -->
  <li class="searchResult">
    <div class="searchResult-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse is urna mollis magna tincidunt posuere. Donec ipsum orci, ultricies quis ultricies vel, cursus ut neque.Quisque a est eu sapien congue rhoncus id quis purus. Aliquam erat volutpat. Etiam at luctus justo. Nulla eget elit eget lacus dignissim lobortis.
    </div>
    <div class="searchResult-actionPanelWrap">
      <ul class="searchResult-actionPanel">
        <li><a href="#"><i class="icon16-contactAdd"></i>Create a Recipe</a></li>
        <li><a href="#"><i class="icon16-approve"></i>Approve Account</a></li>
        <li><a href="#"><i class="icon16-trash"></i>Delete stuff</a></li>
      </ul>
    </div>
  </li><!-- /.searchResult -->
  <!-- Search Result with image -->
  <li class="searchResult">
    <div class="searchResult-image">
      <img src="images/structured-result.jpg" alt="searchimg" />
    </div>
    <div class="searchResult-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse is urna mollis magna tincidunt posuere. Donec ipsum orci, ultricies quis ultricies vel, cursus ut neque.Quisque a est eu sapien congue rhoncus id quis purus. Aliquam erat volutpat. Etiam at luctus justo. Nulla eget elit eget lacus dignissim lobortis.
    </div>
    <div class="searchResult-actionPanelWrap">
      <ul class="searchResult-actionPanel">
        <li><a href="#"><i class="icon16-contactAdd"></i>Create a Recipe</a></li>
        <li><a href="#"><i class="icon16-approve"></i>Approve Account</a></li>
        <li><a href="#"><i class="icon16-trash"></i>Delete stuff</a></li>
      </ul>
    </div>
  </li><!-- /.searchResult -->
</ul>