Web Services

To provide a shared and up-to-date main menu and consistent login, there are two separate web services provided. The quickest way to implement these is by including login-menu.min.js in your html, preferrably as this page has done at the end of the document body. Once included, provided the elements are present in your document, they will stay current.

              <script src="https://idfg.idaho.gov/sites/all/themes/bison/2.1/js/login-menu.min.js"></script>

If updates are made to our website that require changes to be made to your document object model (DOM), these services as well as the theme's css and js will also be versioned. Versioning will allow us to change the look of the website without breaking your application. When new versions are available you will be notified and you will be able to upgrade at your leisure. This matches the pattern used by most content delivery networks (CDN) to ensure backwards compatibility.

While this including this javascript is the quickest way to include these components, as a developer you are welcome to roll your own javascript or server-side code against the two web services which are called. The menu endpoint in particular would be more performant if you make a single call and cache the result in your application.

Available Services

Main Menu

Returned as a jsonp encoded string to replace the contents of #block-idfg-components-menu. The main menu primary links should be included in your DOM to avoid a visual flash on render and allow graceful degradation.
https://idfg.idaho.gov/api/1.0/site/menu

Login (Optional)

Returns a user name or null if not authenticated. Typically you want to query the idfg.idaho.gov/accounts endpoint. Developers on IFWIS infrastructure are encouraged to use the IFWIS endpoint if using integrated authentication. Returned as a jsonp, use the value to update the displayed login link found in the .accounts-login-link. This is an optional enhancement, as without this all functionality is available.
https://idfg.idaho.gov/accounts/user/state (IFWIS endpoint)

Additional services are in the works.
As the look of idfg.idaho.gov matures we will be providing more web services to ease the maintenance and display of page elements, alerts and branding.

Other Implementations

Callouts

The Bootstrap documentation has really nice callouts to draw attention to important information, but for some reason these callouts are not included in the actual Bootstrap distribution. The generic callout CSS and the styles for the info, warning, and danger callouts is a direct pull from the live CSS for the docs. Styles for default, success, and primary, are created by Chris Pratt, as the Bootstrap docs do not employ these.

Examples

Default Callout

This is a default callout.

Primary Callout

This is a primary callout.

Success Callout

This is a success callout.

Info Callout

This is an info callout.

Warning Callout

This is a warning callout.

Danger Callout

This is a danger callout. 
<div class="bs-callout bs-callout-default">
  <h4>Default Callout<h4>
  This is a default callout.
</div>
<div class="bs-callout bs-callout-primary">
  <h4>Primary Callout<h4>
  This is a primary callout.
</div>
<div class="bs-callout bs-callout-success">
  <h4>Success Callout<h4>
  This is a success callout.
</div>
<div class="bs-callout bs-callout-info">
  <h4>Info Callout<h4>
  This is a info callout.
</div>
<div class="bs-callout bs-callout-warning">
  <h4>Warning Callout<h4>
  This is a warning callout.
</div>
<div class="bs-callout bs-callout-danger">
  <h4>Danger Callout<h4>
  This is a danger callout.
</div>

Contextual Menus

Bison adds a standard sidebar and mobile contextual menu design. On desktop it appears as light gray. On mobile it appears as a dropdown menu triggered by a chevron. This may be used optionally along with a page header context to add branding to sections of our webpages.

Example

Custom

Customized components and styles added on top of Twitter Bootstrap.

This section demonstrates the contextual menu behavior used for sidebars on desktop and branded drop-downs on mobile. The header image above illustrates how a landing page may alter the header height for emphasis. Removing the inline height attribute you will see the default height which would typically be used on subpages. Optionally you may choose a background color or image for mobile. Shrink this page to see mobile behavior.

<header role="banner" id="page-header-context">
  <div class="container">
    <div class="region region-header">
      <section id="block-idfg-branding-contextual-head" class="block block-idfg-branding clearfix">
        <div id="page-header-context" style="height:280px; background-image: url(../resources/images/bison-herd-lamar-valley-public-domain-by-flickr-yellowstonnps.jpg)">
          <div class="container region">
            <h2 class="header-context"><a href="../" title="Bison Homepage">Bison Style Guide</a></h2>
          </div>
        </div>
      </section>
    </div>
  </div>
</header>
<div class="row">
  <aside class="col-sm-2" role="complementary">
    <div class="navbar navbar-context">
      <div class="navbar-inner">
        <div class="navbar-top">
          <a class="brand" title="Bison Homepage" href="../"><h2>Bison Style Guide</h2></a>
          <button id="context-menu-dropdown" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".context-nav">
            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse context-nav">
          <section id="block-idfg-branding-contextual-nav" class="block block-idfg-branding clearfix">
            <ul class="menu nav">
              <li><a href="../css/">CSS</a></li>
              <li><a href="../components/">Components</a></li>
              <li><a href="../javascript/">JavaScript</a></li>
              <li class="active"><a class="active" href="#">Custom</a></li>
            </ul>
          </section>
        </div>
      </div>
    </div>
  </aside>
  <section class="col-sm-10">
    <h1 class="page-header">Custom</h1>
    <div class="region region-content"><p>Customized components and styles added on top of Twitter Bootstrap.</p><p>This section demonstrates the contextual menu behavior used for sidebars on desktop and branded drop-downs on mobile.  The header image above illustrates how a landing page may alter the header height for emphasis.  Removing the inline height attribute you will see the default height which would typically be used on subpages.  Optionally you may choose a background color or image for mobile. Shrink this page to see mobile behavior.</p></div>
  </section>
</div>

#TODO

Many classes and components are lacking documentation. Please help by adding the appropriate documentation so others may use these components successfully.