I'm having a hard time trying get foundation orbit to style - it does operate though.
I'm compiling the SASS (downloaded via bower) with grunt. Most things seem to be working okay. So if I try the Content Sliders example here:
http://foundation.zurb.com/docs/components/orbit.html
I get:
I just don't see what I've done wrong. :(
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation 5</title>
<link rel="stylesheet" href="/css/app.css">
<script src="scripts/libs/modernizr.js"></script>
<script data-main="scripts/index.js" src="scripts/libs/require.js"></script>
</head>
<body>
<nav data-topbar class="top-bar">
<ul class="title-area">
<li class="name">
<h1><a href="#">My App</a></h1>
</li>
<li class="toggle-topbar menu-icon"> <a href="#"><span>Menu</span></a></li>
</ul>
</nav>
<div class="row">
<div class="large-12 columns">
<ul data-orbit class="example-orbit-content">
<li data-orbit-slide="headline-1">
<div>
<h2>Headline 1</h2>
<h3>Subheadline</h3>
</div>
</li>
<li data-orbit-slide="headline-2">
<div>
<h2>Headline 2</h2>
<h3>Subheadline</h3>
</div>
</li>
<li data-orbit-slide="headline-3">
<div>
<h2>Headline 3</h2>
<h3>Subheadline</h3>
</div>
</li>
</ul>
</div>
</div>
<script src="/scripts/libs/jquery.js"></script>
<script src="/scripts/libs/foundation.js"></script>
<script>$(document).foundation();</script>
</body>
</html>
Me or a bug with orbit?
Update: grunt compile of sass
sass: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed',
sourceMap: true,
},
files: {
'build/public/css/app.css': 'styles/app.scss'
}
}
},