Navigation

Wirefy uses the Responsive Nav library by Viljami Salminen as it's default mode. However, you can implement any library you want by either connecting it in the footer scripts or adding it to plugins.js. You will need to run Grunt to rebuild the full javascript file.

HTML

<nav role="navigation" class="nav-collapse">
  <ul>
    <><a href="#">Home<a></li> 
    <><a href="#">About<a></li> 
    <><a href="#">Work<a></li> 
    <><a href="#">Contact<a></li> 
  </ul> 
</nav>

To see a rendered version of this code, resize your browser window to see how this site changes across different screen sizes.

Slideshow

The use of slideshows and galleries can be very important in creating a solid user experience. With the help of FlexSlider.js by Woothemes, you can create a basic slideshow. However, like the menu options, please use what you are comfortable with. The options shown here are just the default built in options.

HTML

<div class="flexslider">
  <ul class="slides">
    <><img src="//cdn.getwirefy.com/placeholder/blank.png"></li> 
    <><img src="//cdn.getwirefy.com/placeholder/blank2.png"></li> 
    <><img src="//cdn.getwirefy.com/placeholder/blank3.png"></li> 
  </ul> 
</div>

Rendered HTML

Pager

A set of links for simple pagination implementations with light markup and even lighter styles.

<ul class="pager">
  <li class="previous"><a href="#"><span class="icon-arrow-left2"></span> Older</a></li>
  <li class="next"><a href="#">Newer <span class="icon-arrow-right2"></span></a></li>
</ul>

Pagination

Simplistic and minimally styled pagination that is easily scalable and provides larger click areas.

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

Breadcrumbs

Breadcrumbs can be used as a way to show users where they are within an app or a site. They should not be used for primary navigation.

<ul class="breadcrumb">  
  <li>
    <a href="#">Home</a> <span class="divider">/</span>
  </li>
  <li>
    <a href="#">Library</a> <span class="divider">/</span>
  </li>
  <li class="active">Data</li>
</ul>

Tabs

Tabs that have dead simple jQuery that will hook them up to their corresponding content.

HTML

<ul class="tabs">
  <li><a class="active" href="#simple">Simple</a></li>
  <li><a href="#lightweight">Light</a></li>
  <li><a href="#mobileFriendly">Mobile</a></li>
</ul>
<ul class="tabs-content">
  <li class="active" id="simple">The tabs are clean and simple unordered-list markup and basic CSS.</li>
  <li id="lightweight">The tabs are cross-browser, but don't need a ton of hacky CSS or markup.</li>
  <li id="mobileFriendly">The tabs work like a charm even on mobile devices. If there are too many they will stack (it's not completely awesome, but still retains functionality).</li>
</ul>

Rendered HTML

• Simple
• Light
• Mobile

• The tabs are clean and simple unordered-list markup and basic CSS.
• The tabs are cross-browser, but don't need a ton of hacky CSS or markup.
• The tabs work like a charm even on mobile devices. If there are too many they will stack (it's not completely awesome, but still retains functionality).

Media

HTML

<figure>
  <img src="http://bit.ly/1nzAeLT">
  <figcaption>Camera on a table. Courtesy of <a href="http://unsplash.com">Unsplash</a></figcaption>
</figure>

Rendered HTML

Video

HTML

<dl>
  <dt>Definition Title</dt>
  <dd>Defines a description list.</dd>
</dl>

Rendered HTML