Markup & Templates
Some examples to get you up and running quickly.
HTML
The following code will create an empty template with the Sonos top bar and default footer.
<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en-us"><![endif]-->
<!--[if gt IE 9]><!-->
<html class="no-js" lang="en-us">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sonos Suit</title>
<!--[if IE 9]><link rel="stylesheet" href="//suit.sonos.com/2.7.15/styles/min/ie/suit.css"><![endif]-->
<!--[if gt IE 9]><!--><link rel="stylesheet" href="//suit.sonos.com/2.7.15/styles/min/suit.css"><!--<![endif]-->
<link rel="stylesheet" href="//fast.fonts.net/cssapi/f0598f02-6b8c-4ebc-8e0b-da61573232cf.css">
</head>
<body class="antialiased" data-init>
<div class="contain-to-grid" data-move>
<div class="direct-buy-bar">
<nav data-topbar data-options="is_hover: false; back_text: <span class='icon-left-dir'></span> Back;" class="top-bar sonos-bar">
<section class="top-bar-section">
<ul class="left">
<li>
<div class="row">
<div class="columns small-12">
<p class="message">Free two-day delivery, free extended holiday returns, expert support</p>
</div>
</div>
</li>
</ul>
<ul class="right show-for-large-up" data-move-from>
<li class="has-dropdown" data-move-element>
<a>Sales Help</a>
<ul class="dropdown">
<li class="label">
<label>Speak with someone</label>
</li>
<li class="hide-for-touch"><a>Live chat</a></li>
<li><a>Call us</a></li>
<li class="label">
<label>General info</label>
</li>
<li><a>Top pre-purchase questions</a></li>
<li><a>Video demo</a></li>
<li class="label">
<label>Order information</label>
</li>
<li><a>Returns & policies</a></li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
<nav data-topbar data-options="is_hover: false; back_text: <span class='icon-left-dir'></span> Back; scrolltop: false;" class="top-bar sonos-bar">
<ul class="title-area">
<li class="name">
<h1><a>Sonos</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">
<a>What Is Sonos</a>
<ul class="dropdown">
<li><a>System</a></li>
<li><a>Music</a></li>
<li><a>App</a></li>
</ul>
</li>
<li class="has-dropdown">
<a>Products Overview</a>
<ul class="dropdown">
<li><a>Speakers</a></li>
<li><a>Home Theater</a></li>
<li><a>Components</a></li>
</ul>
</li>
<li class="has-dropdown">
<a>Shop</a>
<ul class="dropdown">
<li class="label">
<label>Wireless Speakers</label>
</li>
<li><a>PLAY:1</a></li>
<li><a>PLAY:3</a></li>
<li><a>PLAY:5</a></li>
<li class="label">
<label>Wireless Home Theater</label>
</li>
<li><a>PLAYBAR</a></li>
<li><a>SUB</a></li>
<li class="label">
<label>Add Existing Equipment</label>
</li>
<li><a>CONNECT:AMP</a></li>
<li><a>CONNECT</a></li>
<li class="sep"></li>
<li><a>All Products <span class="icon-right-dir"></span></a></li>
</ul>
</li>
<li><a>Support</a></li>
</ul>
<ul class="right stack">
<li data-move-to><a><span class="icon-basket"></span> 0</a></li>
<li><a><span class="icon-location"></span> Find A Store</a></li>
<li><a>Language</a></li>
<li><a>Sign In</a></li>
</ul>
</section>
</nav>
</div>
<div class="main">
<!-- Page content goes here -->
</div>
<div class="footer section">
<div class="row">
<div class="columns large-6 medium-6 small-12">
<div class="row">
<div class="small-12 columns">
<ul class="social-block">
<li><a href="http://www.sonos-studio.com/" title="Sonos Studio" class="button sonos-studio"><span>Sonos<br/>studio</span></a></li>
<li><a href="https://www.twitter.com/sonos" target="_blank" title="Twitter" class="button"><span class="icon icon-twitter"></span></a></li>
<li><a href="http://www.facebook.com/sonos" target="_blank" title="Facebook" class="button"><span class="icon icon-facebook"></span></a></li>
<li><a href="http://www.instagram.com/sonos" target="_blank" title="Instagram" class="button"><span class="icon icon-instagram"></span></a></li>
</ul>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<ul class="social-block">
<li><a href="https://plus.google.com/107670103958760496596" target="_blank" title="Google+" class="button"><span class="icon icon-gplus"></span></a></li>
<li><a href="http://www.pinterest.com/sonos/" target="_blank" title="Pinterest" class="button"><span class="icon icon-pinterest"></span></a></li>
<li><a href="http://www.linkedin.com/company/sonos-inc." target="_blank" title="LinkedIn" class="button"><span class="icon icon-linkedin"></span></a></li>
<li><a href="http://www.youtube.com/sonos" target="_blank" title="YouTube" class="button"><span class="icon icon-youtube-play"></span></a></li>
<li><a href="http://blog.sonos.com/" title="Sonos Blog" class="button blog"><span>Blog</span></a></li>
</ul>
</div>
</div>
</div>
<div class="large-6 medium-6 small-12 columns">
<div class="row">
<div class="small-12 columns">
<form data-abide="data-abide" data-options="validate_on_blur: false;" data-newsletter="data-newsletter">
<div class="row collapse">
<div class="small-10 columns">
<input type="email" placeholder="Enter Email Address" required="required"/><small class="error"></small>
</div>
<div class="small-2 columns">
<button type="submit" data-reveal-id="newsletterModal" class="prefix">Go</button>
</div>
</div>
<div id="newsletterModal" data-reveal="data-reveal" class="reveal-modal medium">
<h2></h2><a class="close-reveal-modal">×</a>
</div>
</form>
<h6 class="primary">Exclusive announcements and events. Not spam.</h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 small-6 columns">
<ul class="inline-list light sonos-links">
<li><a href="#">About</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Media Center</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Dealer Store</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="large-12 small-6 columns">
<ul class="inline-list site-links">
<li><a href="#">Site Map</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Legal</a></li>
</ul>
</div>
</div>
</div>
<script src="//suit.sonos.com/2.7.15/scripts/min/suit.js"></script>
</body>
</html>About JavaScript Initialization
The Suit JavaScript libraries are initialized automatically with the data-init attribute on the body tag. If you remove it, you'll need to initialize the libraries manually. The following code is the JavaScript you need to call to initalize those libraries. It is preferred that you keep it in a file called common.js or something similar.
$(document).foundation({
tooltip: {
additional_inheritable_classes:['alt', 'play1', 'play3', 'play5', 'playbar', 'sub', 'connect-amp', 'connect', 'light', 'dark', 'amber']
}
})
.foundation('joyride', 'start');