Patterns

These patterns are designed to be used as standard off the shelf pieces for ArcGIS branded websites. Simply copy and paste the markup as needed to use these patterns in your own projects.

4.0 Back To Top

Basic HTML Page

A basic starting point for an html page using Tailcoat might be something like this:

<!doctype html>
<!--[if lt IE 9]>  <html class="ie lt-ie9 ie8"> <![endif]-->
<!--[if IE 9]>     <html class="ie ie9"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Tailcoat</title>
    <link rel="shortcut icon" href="/img/favicon.ico">
    <link type="text/css" rel="stylesheet" href="http://fast.fonts.net/cssapi/3706abc4-0756-424b-b07b-1748122f85d8.css">
    <link type="text/css" rel="stylesheet" href="stylesheets/tailcoat.css">
    <!--[if lt IE 9]>
      <script src="/assets/javascripts/libs/selectivizr.js" type="text/javascript"></script>
      <script src="/assets/javascripts/libs/html5shiv.js" type="text/javascript"></script>
    <![endif]-->
  </head>
  <body>
    <div class="wrapper">
      <div class="page sticky-footer">
        <header class="header">
          <!-- header pattern -->
        </header>
        <!-- content of page -->
      </div>
      <footer class="footer sticky-footer">
        <!-- footer pattern -->
      </footer>
    </div>
    <script src="/assets/javascripts/tailcoat.js" type="text/javascript"></script>
  </body>
</html>
4.1 _header.scss Back To Top

Standard Header

If you want to create a standard site-wide header like the header for http://developers.arcgis.com you can implement the following HTML.

default 
<header class="header">
  <div class="container">
    <div class="row">
      <div class="inner-header">
        <div class="site-brand">
          <a href="#" class="site-logo">Arc<span>GIS</span> for Unicorns</a>
        </div>
        <nav class="site-nav">
          <ul>
            <li><a href="/page-1">Plains</a></li>
            <li><a href="/page-2">Fields</a></li>
            <li><a href="/page-3">Forests</a></li>
            <li><a href="/page-4">Mountains</a></li>
          </ul>
        </nav>
        <div class="esri-logo">Esri</div>
      </div>
    </div>
  </div>
</header>
4.1.1 _header.scss Back To Top

Standard Responsive Header

The Standard Responsive Header expands the site-wide header into a robust and responsive header pattern.

default 
<header class="header">
  <div class="container">
    <div class="row">
      <div class="inner-header">
        <div class="site-brand">
          <a data-direction="active-left" class="left toggle toggle-site-navigation icon-navigation tablet-show" href="#"></a>
          <a href="#" class="site-logo">Arc<span>GIS</span> for Developers</a>
        </div>
        <nav class="site-nav tablet-hide">
          <ul>
            <li><a href="/page-1">Plans</a></li>
            <li><a href="/page-2">Features</a></li>
            <li><a href="/page-3">Documentation</a></li>
            <li><a href="/page-4">Support</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>
4.2 _navigation-bar.scss Back To Top

Navigation Bar

A sub-navigation menu is provided in the framework. Simply use a class of navigation-bar to create a container for the sub-nav.

You can add a call to action or a search bar inside the sub-nav, and these will be styled specifically for the navigation-bar section.

If you choose not to include a menu but still want a call-to-action in the header apply the .small-leader class to the call-to-action or input. A navigation-bar with only a nav and no header must be given the class nav-only. For a responsive version of this pattern, see the responsive navigation bar on the javascript page.

  • .green - colors the background green
  • .nav-only - useful when no header is required
  • .no-nav - useful when no nav is required
  • .green.nav-only - both green and short

Section Title

Call to Action
default

Section Title

Call to Action
.green

Section Title

Call to Action
.nav-only

Section Title

Call to Action
.no-nav

Section Title

Call to Action
.green.nav-only 
<div class="navigation-bar">
  <div class="container">
    <header>
      <h1>Section Title</h1>
      <a class="btn secondary right leader-half" href="#"> Call to Action </a>
    </header>
    <nav class="navigation-bar-nav">
      <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>
4.3 _search-bar.scss Back To Top

Search Bar

Building out a search page with Tailcoat is very simple. A search-bar pattern is provided for entering search terms. Other aspects, such as search results and pagination are covered by existing tailcoat patterns. Below is a sample search and search results page:

Time
Type

Showing 12 of 2000 results

Result Title

Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. http://arcgis.github.io/tailcoat/

Result Title

Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. http://arcgis.github.io/tailcoat/

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
default 
<div class="search-bar">
  <div class="container">
    <div class="search-inputs">
      <input class="left" type="search" placeholder="Search Your Applications">
      <a class="search-btn btn transparent"><span class="icon-search"></span></a>
    </div>
  </div>
</div>
<div class="search-filters">
  <div class="container">
    <div class="click-dropdown checkmarks">
      <a href="#" class="click-dropdown-link">Time</a>
      <nav class="click-dropdown-menu">
        <a href="#" class="click-dropdown-item selected">Last 7 days</a>
        <a href="#" class="click-dropdown-item">Last month</a>
        <a href="#" class="click-dropdown-item">Last year</a>
        <a href="#" class="click-dropdown-item">Anytime</a>
      </nav>
    </div>
    <div class="click-dropdown checkmarks">
      <a href="#" class="click-dropdown-link">Type</a>
      <nav class="click-dropdown-menu">
        <a href="#" class="click-dropdown-item selected">Guides</a>
        <a href="#" class="click-dropdown-item">Getting Started</a>
        <a href="#" class="click-dropdown-item">API Reference</a>
      </nav>
    </div>
  </div>
</div>
<div class="container">
  <div class="content-area show-visited-links">
    <p class="leader-half"><small>Showing 12 of 2000 results</small></p>
    <h4><a href="/ok">Result Title</a></h4>
    <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.
    <small class="clearfix"><a href="/yes">http://arcgis.github.io/tailcoat/</a></small>
    </p>
    <h4><a href="/yeah">Result Title</a></h4>
    <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.
    <small class="clearfix"><a href="/links">http://arcgis.github.io/tailcoat/</a></small>
    </p>
  </div>
</div>
<div class="container">
  <ol class="pagination">
    <a class="pagination-previous" href="#">
      <span class="icon-left-arrow"></span>
    </a>
    <li class='pagination-page'>
      <a href="#">1</a>
    </li>
    <li class='pagination-page'>
      <a href="#">2</a>
    </li>
    <li class='pagination-page active'>
      <a href="#">3</a>
    </li>
    <li class='pagination-page'>
      <a href="#">4</a>
    </li>
    <li class="pagination-page">
      <a href="#">5</a>
    </li>
    <a class="pagination-next" href="#">
      <span class="icon-right-arrow"></span>
    </a>
  </ol>
</div>
4.4 _content-area.scss Back To Top

Content Area

Content Area refers to things like articles, documentation, and other content that is designed for more long-form reading than for web application purposes.

Content Area

The content-area class formats everything so it is more condusive to long-form reading. If you add the class to your wrapper element, all the elements below will inherit a set of styles giving everything proper spacing and line-length. The following elements are spaced properly:

  • Headers
  • Images
  • Lists
  • Tables
  • Horizontal Rules
  • Code Blocks

How to use it:

  1. add the content-area class
  2. write some markup
  3. enjoy.
default 
<div class="content-area">
  <h1>Content Area</h1>
  <p>The <code>content-area</code> class formats everything so it is more condusive to long-form reading. If you add the class to your wrapper element, all the elements below will inherit a set of styles giving everything proper spacing and line-length. The following elements are spaced properly:</p>
  <ul>
    <li>Headers</li>
    <li>Images</li>
    <li>Lists</li>
    <li>Tables</li>
    <li>Horizontal Rules</li>
    <li>Code Blocks</li>
  </ul>
  <h3>How to use it:</h3>
  <ol>
    <li>add the <code>content-area</code> class</li>
    <li>write some markup</li>
    <li>enjoy.</li>
  </ol>
</div>
4.5 _feature.scss Back To Top

Feature Block

The feature class provides a typical pattern of graphic and text side by side (graphic on the right and text on the left).

The feature class can be extended with both vertical align and flip . You must reverse the order of the blocks in the pattern, so feature block leads feature text.

  • .flip - Displays graphic on the left and text on the right
  • .vertical-center - Centers the text vertically in the feature's height
  • .flip.vertical-center - Centers the text vertically in the feature's height

Title

Text of the feature block.

Action
Placeholder
default

Title

Text of the feature block.

Action
Placeholder
.flip

Title

Text of the feature block.

Action
Placeholder
.vertical-center

Title

Text of the feature block.

Action
Placeholder
.flip.vertical-center 
<div class="feature">
  <div class="feature-text">
      <h2 class="leader-half trailer-half">Title</h2>
      <p>Text of the feature block.</p>
      <a class="btn" href="#">Action</a>
  </div>
  <div class="feature-block">
    <img src="http://placehold.it/725x400&amp;text=Image" alt="Placeholder">
  </div>
</div>
4.6 _sidebar-navigation.scss Back To Top

Sidebar Navigation

A sidebar navigation pattern is provided for a short list of links in a sidebar. If you have a lot of links, the accordian javascript pattern. This will fill the parent container. We recommend using an aside as the parent with the column classes applied to that.

  • .current - add a current class to the list-item of the page you're on
default
.current 
<aside class="column-12">
  <nav class="sidebar-navigation">
    <header>
      <h4>Map Viewer</h4>
    </header>
    <ul>
      <li><a class="icon-right-arrow" href="#">Link 1</a></li>
      <li><a class="icon-right-arrow" href="#">Link 2</a></li>
      <li><a class="icon-right-arrow" href="#">Link 3</a></li>
    </ul>
  </nav>
</aside>
4.7 _footer.scss Back To Top

Standard Footer

If you want to create a standard sitewide footer like on http://developers.arcgis.com you can implement the following HTML.

<footer class="footer">
  <div class="container">
    <div class="row">
      <nav>
        <h4>Arc<span>GIS</span></h4>
        <ul>
          <li><a href="http://www.arcgis.com/about/">Home</a></li>
          <li><a href="http://www.arcgis.com/about/features.html">Features</a></li>
          <li><a href="http://www.arcgis.com/about/pricing.html">Pricing</a></li>
        </ul>
      </nav>

      <nav>
        <h4>Arc<span>GIS</span> for Developers</h4>
        <ul>
          <li><a href="/en/">Home</a></li>
          <li><a href="/en/features/">Features</a></li>
          <li><a href="http://blogs.esri.com/esri/arcgis/category/developer/">Blog</a></li>
        </ul>
      </nav>

      <nav>
        <h4>About Esri</h4>
        <ul>
          <li><a href="http://www.esri.com/about-esri/">About Us</a></li>
          <li><a href="http://www.esri.com/careers/">Careers</a></li>
          <li><a href="http://blogs.esri.com/esri/esri-insider/">Insiders Blog</a></li>
          <li><a href="http://www.esri.com/events/user-conference/index.html">User Conference</a></li>
          <li><a href="http://www.esri.com/events/devsummit/index.html">Developer Summit</a></li>
        </ul>
      </nav>

      <nav>
        <a class="esri-logo-footer" href="http://esri.com">Esri</a>
        <section class="footer-social-nav">
          <a class="icon-twitter" href="https://twitter.com/Esri/"></a>
          <a class="icon-facebook" href="https://www.facebook.com/esrigis/"></a>
          <a class="icon-github" href="http://esri.github.com/"></a>
          <a class="icon-email" href="http://www.esri.com/about-esri/contact/"></a>
        </section>
      </nav>
      <small class="footer-legal">© Copyright 2013 Environmental Systems Research Institute, Inc. | <a href="http://www.esri.com/legal/privacy">Privacy</a> | <a href="http://www.esri.com/legal/software-license">Legal</a></small>
    </div>

  </div>
</footer>

By default, there is three lines of whitespace between the end of the page's content and the footer. You can clear this by putting a no-space-to-footer class on the last div on your page.

default 
<footer class="footer">
  <div class="container">
    <div class="row">
      <nav class="column-6 tablet-column-24 leader-1">
        <h4>Header 1</h4>
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
      </nav>
      <nav class="column-6 tablet-column-24 leader-1">
        <h4>Header 2</h4>
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
      </nav>
      <nav class="column-6 tablet-column-24 leader-1">
        <h4>Header 3</h4>
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
        </ul>
      </nav>
      <nav class="column-6 tablet-column-24 leader-1">
        <a class="esri-logo-footer" href="http://esri.com">Esri</a>
        <section class="footer-social-nav">
          <a class="icon-twitter" href="https://twitter.com/Esri/"></a>
          <a class="icon-facebook" href="https://www.facebook.com/esrigis/"></a>
          <a class="icon-github" href="http://esri.github.com/"></a>
          <a class="icon-email" href="http://www.esri.com/about-esri/contact/"></a>
        </section>
      </nav>
      <small class="footer-legal column-24 leader-1 trailer-1">© Copyright 2013 Environmental Systems Research Institute, Inc. | <a href="http://www.esri.com/legal/privacy">Privacy</a> | <a href="http://www.esri.com/legal/software-license">Legal</a></small>
    </div>
  </div>
</footer>
4.8 _footer.scss Back To Top

Sticky Footer

Included in the framework is an implementation of http://www.cssstickyfooter.com/. You can implement the sticky footer with the following HTML.

<body>
  <div class="wrapper">
    <div class="page sticky-footer"></div>
  </div>
  <footer class="footer sticky-footer"></footer>
</body>

If you want to change the height of the footer set the $footer-height config variable or include the following in your own CSS.

.page.sticky-footer {
  padding-bottom: 100px;
}

.footer.sticky-footer {
  margin-top: -100px;
  min-height: 100px;
}