Javascript Components

The following components rely on the tailcoat javascript library. You can find the library in dist/js/tailcoat.js.

6.1 _modal.scss Back To Top

Modals

A simple modal dialog box can be summoned by adding the show-modal class and a data-modal attribute to an element, then adding a div with the modal-overlay class containing the corresponding modal markup at the bottom of the page (before the closing body tag).

The modal you want to bind to the button should have the same data-modal attribute. Note that there should only ever be one modal-overlay block which contains all modal blocks for your page.

default

<a class="modal-show btn orange" data-modal="question" href="#">Show Modal</a>
<div class="modal-overlay">
  <div class="modal" data-modal="question">
    <a class="modal-dismiss icon-close right" href="#"></a>
    <h4>Question 1</h4>
    <p>Do you want to dismiss this modal?</p>
    <button class="btn blue modal-dismiss">Yes</button>
  </div>
</div>
<a class="modal-show btn blue" data-modal="question2" href="#">Show Second Modal</a>
<div class="modal-overlay">
  <div class="modal" data-modal="question2">
    <a class="modal-dismiss icon-close right" href="#"></a>
    <h4>Question 2</h4>
    <p>Did the button open the c asdf asdf asdf asdf asd fasd fasd fasd fasd fasd fas dfas dfa sdf asdf asdf asdf asdf asdf asdf asd f orrect modal?</p>
    <button class="btn blue modal-dismiss">Yes</button>
  </div>
</div>

6.2 _tabs.scss Back To Top

Tabs

The framework includes a quick set of styles for a tabbed interface pattern. The full tab container will expand to fit its parent.

As an added bonus, this component supports intelligently restricting the width of tabs if they get too long and numerous.

Tab 1 Content

Tab 2 Content

Tab 3 Content

Tab 4 Content

Modifiers

.gray - current tab will have a gray background
.transparent - only the current tab will have a border

Tab 1 Content

Tab 2 Content

Tab 3 Content

default

Tab 1 Content

Tab 2 Content

Tab 3 Content

.gray

Tab 1 Content

Tab 2 Content

Tab 3 Content

.transparent

<div class="tab-group">
  <nav class="tab-nav">
    <a class="tab active">Tab 1</a>
    <a class="tab">Tab 2</a>
    <a class="tab">Tab 3</a>
  </nav>
  <section class="tab-contents">
    <article class="tab-content active">
      <p>Tab 1 Content</p>
    </article>
    <article class="tab-content">
      <p>Tab 2 Content</p>
    </article>
    <article class="tab-content">
      <p>Tab 3 Content</p>
    </article>
  </section>
</div>

6.3 _accordion.scss Back To Top

Accordions

The framework includes a quick set of styles for an accordian interface pattern.

Remember to include the sample vanilla js titled 'accordion.js' or write your own js in your framework of choice.

.open - opens all sections of the nav letting it behave more like a TOC

Current Section

Section Title

Another Section

default

Current Section

Section Title

Another Section

.open

<div class="accordion">
  <section class="accordion-section active current">
    <header>
      <h5 class="section-title">Current Section</h5>
    </header>
    <ul class="section-content">
      <li class="current"><a href="#">Current Page</a></li>
      <li><a href="http://waggingtailspc.com/wp-content/uploads/2013/10/cats-animals-kittens-background-us.jpg">link</a></li>
      <li><a href="http://waggingtailspc.com/wp-content/uploads/2013/10/cats-animals-kittens-background-us.jpg">link</a></li>
    </ul>
  </section>
  <section class="accordion-section">
    <header>
      <h5 class="section-title">Section Title</h5>
    </header>
    <ul class="section-content">
      <li><a href="http://static.squarespace.com/static/5068a99084ae5a723be3f171/t/52701d03e4b00e2f47e7474a/1383079207639/kitten-in-a-sweater-kittens-5890480-670-578.jpg">Link</a></li>
      <li><a href="http://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg">Link</a></li>
      <li><a href="http://images2.fanpop.com/image/photos/10500000/Cute-Wallpapers-cute-kittens-10501750-1024-768.jpg">Link</a></li>
    </ul>
  </section>
  <section class="accordion-section">
    <header>
      <h5 class="section-title">Another Section</h5>
    </header>
    <ul class="section-content">
      <li><a href="http://dailynewsdig.com/wp-content/uploads/2013/05/cutest-kittens-in-the-world-2.jpg">Link</a></li>
      <li><a href="http://www.deargrumpycat.com/wp-content/uploads/2013/02/Grumpy-Cat1.jpg">Link</a></li>
      <li><a href="http://www.kimballstock.com/pix/PIG/01/PIG-01-RK0195-17P.JPG">Link</a></li>
    </ul>
  </section>
</div>

6.4 _drawer.scss Back To Top

Drawer

The off-canvas "drawer" pattern is used primarily for top-level mobile navigation.

 <body>
  <!-- Mobile Nav Drawer -->
  <div class="drawer">
    <nav class="drawer-nav drawer-left"> <!-- drawer-right will put the drawer on the right side. -->
      <div class="drawer-header">
        <h4 class="site-title">Arc<span class="bold">GIS</span> CSS</h4>
      </div>
      <ul>
        <li class="drawer-link"><a href="#">Link 1</a></li>
        <li class="drawer-link"><a href="#">Link 2</a></li>
        <li class="drawer-link"><a href="#">Link 3</a></li>
      </ul>
    </nav>
  </div>

  <!-- Main Content Wrapper -->
  <div class="wrapper">
    <!-- ...all site content goes here... -->
  </div>
 </body>

Add the drawer-toggle class and a data-direction attribute with a value of of either "active-left" (for the left drawer) or "active-right" (for the right drawer) to the element that you want to open the drawer.

Toggle Left Drawer Toggle Right Drawer default

<a class="drawer-toggle btn blue" data-direction="active-left" href="#">Toggle Left Drawer</a>
<a class="drawer-toggle btn orange" data-direction="active-right" href="#">Toggle Right Drawer</a>

6.5 _click-dropdown.scss Back To Top

Click Dropdown

Dropdown menu that appears on click.

.checkmarks - adds a check mark to the active class and checkmarks on hover
.align-left - dropdown aligns with the anchor on the left side
.align-right - dropdown align with the anchor on the right side

default

.checkmarks

.align-left

.align-right

<div class="click-dropdown">
  <a href="#" class="click-dropdown-link">Click Me</a>
  <nav class="click-dropdown-menu">
    <a href="#" class="click-dropdown-item selected">Item 1</a>
    <a href="#" class="click-dropdown-item">Item 2</a>
  </nav>
</div>

6.6 _site-dropdown.scss Back To Top

Site Dropdown

This pattern is meant to be used as an inter-site dropdown menu for related ArcGIS sites.

ArcGIS for Developers

default

<div class="site-brand">
  <a href="#" class="site-logo">Arc<span>GIS</span> for Developers</a>
  <span class="site-dropdown-toggle"></span>
  <nav class="site-dropdown">
    <a href="http://www.arcgis.com/about/">
      <h4>ArcGIS</h4>
      <p>Learn more about ArcGIS for Organizations</p>
    </a>
    <a href="http://developers.arcgis.com/" class="current selected">
      <h4>ArcGIS for Developers</h4>
      <p>Build location-aware apps with ArcGIS</p>
    </a>
  </nav>
</div>

6.7 _responsive-navigation-bar.scss Back To Top

Responsive Navigation Bar

If you'd like to use the navigation bar pattern with a mobile-friendly page, a convinience class is provided for you. Simply add a responsive class the the navigation bar and a toggle icon.

.green - colors the background green
.nav-only - no title or call to action, just the nav

default

.green

.nav-only

<div class="navigation-bar responsive">
  <div class="container">
    <header>
      <h1>Section Title</h1>
      <a class="btn secondary right leader-1" href="#"> Call to Action </a>
    </header>
    <nav class="navigation-bar-nav">
      <a href="#" class="dropdown-toggle icon-navigation"></a>
      <ul>
        <li class="current"> <a href="#"> Page 1 </a> </li>
        <li> <a href="#"> Page 2 </a> </li>
        <li> <a href="#"> Page 3 </a> </li>
      </ul>
    </nav>
  </div>
</div>