<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
- <link href="../assets/css/foundation.css" rel="stylesheet" />
-
+ <link href="../assets/css/foundation-float.css" rel="stylesheet" />
+
<style>
.container {
background-color: rgba(255,0,0,0.7);
}
-
+
.fail {
color: red;
font-weight: bold;
</div>
</div>
-
+
<div class="row test-container">
-
+
<div class="small-12 medium-6 columns">
<div id="foo1" class="foo">
<h1>#foo1</h1>
$(document).foundation();
</script>
</body>
-</html>
\ No newline at end of file
+</html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
- <link href="../assets/css/foundation.css" rel="stylesheet" />
+ <link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
body {
background-color: darkgrey;
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
- <link href="../assets/css/foundation.css" rel="stylesheet" />
+ <link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
.sticky-container {
background-color: #f00;
#root {
margin-top: 2em;
}
-
-
+
+
.foo {
height: 30rem;
}
<h3>Sticky navbar height transition</h3>
<p>The content should follow the nav-bar resizing without red flashing (sticky-container background)</p>
</div>
-
+
<div class="row">
<div class="small-12 medium-2 columns">
<div class="container" data-sticky-container>
<div class="callout sticky" data-sticky data-sticky-on="small" data-margin-top="0" data-anchor="foo1">
<h5>Test 1</h5>
<p>I should stick to the top and bottom of #foo1. I'm not a child of any #foo's.</p>
- <a href="http://foundation.zurb.com/sites/docs/stick.html" class="small button">Go to Sticky Docs</a>
+ <a href="http://foundation.zurb.com/sites/docs/stick.html" class="small button">Go to Sticky Docs</a>
</div>
</div>
</div>
-
+
<div class="small-12 medium-10 columns">
<div id="foo1" class="foo">
<h1>#foo1</h1>
</div>
</div>
</div>
-
+
<div class="row">
<div class="small-6 columns">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consequat pellentesque ligula a tincidunt. Pellentesque fermentum orci leo, quis hendrerit urna rutrum eu. Fusce eu ex id ipsum fermentum scelerisque in non nulla. In quis maximus urna. Sed in est in risus tempor malesuada. Integer sed felis nunc. Mauris sit amet turpis quam. Aliquam nisi felis, suscipit et ex in, mattis mattis dui. Ut id ullamcorper nunc. Nunc quis lacinia turpis, tempor faucibus eros. Vestibulum ex dui, accumsan nec ex eget, scelerisque euismod ligula. In congue venenatis tellus, vitae lobortis felis imperdiet ut. Pellentesque pharetra dignissim felis. Praesent posuere lacus vitae ex tempus tincidunt.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
- <link href="../assets/css/foundation.css" rel="stylesheet" />
+ <link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
- <link href="../assets/css/foundation.css" rel="stylesheet" />
+ <link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
.menue {
padding-bottom: 8px;
width: 100%
}
-
+
.is-stuck {
width: 100%;
}
-
+
.row {
background: gray;
}
</script>
</body>
-</html>
\ No newline at end of file
+</html>