hatefulcrawdad

<div id="featuredContent">
  <div data-caption="#captionOne">
    <h4>This is a content slider.</h4>
    <p>Each slide holds arbitrary content, like text or actions.</p>
  </div>
  <div data-caption="#captionTwo">
    <h4>We can include text and buttons, like this!</h4>
    <p>We take no responsibility for what happens if you click this button.</p>
    <p><a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button" target="_blank">Rock My World!</a></p>
  </div>

hatefulcrawdad

/* SCSS */

.orbit-wrapper {
  .slider-nav span { @include opacity(0); @include single-transition(opacity, 400ms); }
  &:hover .slider-nav span { @include opacity(1); }
}

/* CSS */

.orbit-wrapper .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; -o-transition: opacity 400ms; transition: opacity 400ms; }

hatefulcrawdad

// Top Bar Settings

$topBarBgColor: #222;
$topBarHeight: 45px;
$topBarBtmMargin: 30px;
$topBarTitleWeight: bold;
$topBarTitleSize: ms(1);
$topBarLinkColor: #fff;
$topBarLinkWeight: bold;
$topBarLinkSize: ms(0) - 1;

hatefulcrawdad

<li class="divider"></li>

<li class="search">
  <form class="collapse">
    <input type="text">
    <button type="submit" class="secondary radius button">Search</button>
  </form>
</li>

<li class="search">

hatefulcrawdad

<section>
  <ul class="left">
    <li><a href="#">Link</a></li>

    <li class="has-dropdown">
      <a href="#">Link</a>

      <ul class="dropdown">
        <li><a href="#">Dropdown Link</a></li>
      </ul>

hatefulcrawdad

<div class="fixed contain-to-grid">
  <!-- <nav> goes here -->
</div>

hatefulcrawdad

<nav class="top-bar">
  <ul>
    <li class="name"><h1><a href="#">Title</a></h1></li>
    <li class="toggle-topbar"><a href="#"></a></li>
  </ul>
  <section>
    <ul class="left">
      <li><a href="#">Link</a></li>
    </ul>

hatefulcrawdad

<nav class="top-bar [fixed] [contain-to-grid]">

  <!-- Title Area -->
  <ul>
    <li class="name">
      <h1>
        <a href="#">
          <!-- Include a small logo if you'd like -->
          <img src="http://placehold.it/25x25">
          Top Bar Title

hatefulcrawdad

$(document).foundationTopBar();

hatefulcrawdad

<div id="myModal" class="reveal-modal [expand, xlarge, large, medium, small]">
  <h2>Awesome. I have it.</h2>
  <p class="lead">Your couch.  I it's mine.</p>
  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
  <a class="close-reveal-modal">&#215;</a>
</div>