RubyGems - wrgem - Versions diffs - 0.0.1 - Mend

wrgem 0.0.1

Files changed (1423) hide show

data/lib/generators/wrstart/template/vendor/assets/components/Slidebars/examples/custom-widths.html ADDED Viewed

@@ -0,0 +1,65 @@
+<!doctype html>
+<html>
+	<head>
+		<title>Slidebars Custom Width Example</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+		<!-- Slidebars CSS -->
+		<link rel="stylesheet" href="slidebars/slidebars.css">
+		<!-- Example Styles -->
+		<link rel="stylesheet" href="example-styles.css">
+	</head>
+	<body>
+		<div id="sb-site">
+			<h1>Slidebars Custom Width Example</h1>
+			<p>In this example both Slidebars have custom widths. You can set these by adding the modifier class '.sb-width-custom' to your Slidebar, and pass the width as a data attribute 'data-sb-width'. This can be a px or % value.</p>
+			<p>The left Slidebar has a width of 50%, and the right Slidebar has a width of 100px, no matter what the screen size.</p>
+			<ul>
+				<li class="sb-toggle-left">Toggle left Slidebar</li>
+				<li class="sb-toggle-right">Toggle right Slidebar</li>
+				<li class="sb-open-left">Open left Slidebar</li>
+				<li class="sb-open-right">Open right Slidebar</li>
+				<li class="sb-close">Close either Slidebar</li>
+			</ul>
+			<h2>More Examples</h2>
+			<ul>
+				<li><a href="control-classes.html">Control Classes</a></li>
+				<li><a href="api-usage.html">API Usage</a></li>
+				<li><a href="mobile-only.html">Mobile Only</a></li>
+				<li><a href="animation-styles.html">Animation Styles</a></li>
+				<li><a href="optional-widths.html">Optional Widths</a></li>
+				<li><a href="custom-widths.html">Custom Widths</a></li>
+				<li><a href="scroll-lock.html">Scroll Lock</a></li>
+				<li><a href="slidebar-links.html">Slidebar Links</a></li>
+				<li><a href="static-slidebars.html">Static Slidebars</a></li>
+				<li><a href="momentum-scrolling.html">Momentum Scrolling</a></li>
+				<li><a href="left-slidebar-only.html">Left Slidebar Only</a></li>
+				<li><a href="right-slidebar-only.html">Right Slidebar Only</a></li>
+			</ul>
+		</div>
+		<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="50%">
+			<!-- Your left Slidebar content. -->
+		</div>
+		<div class="sb-slidebar sb-right sb-width-custom" data-sb-width="100px">
+			<!-- Your right Slidebar content. -->
+		</div>
+		<!-- jQuery -->
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- Slidebars -->
+		<script src="slidebars/slidebars.js"></script>
+		<script>
+			(function($) {
+				$(document).ready(function() {
+					$.slidebars();
+				});
+			}) (jQuery);
+		</script>
+	</body>
+</html>

data/lib/generators/wrstart/template/vendor/assets/components/Slidebars/examples/example-styles.css ADDED Viewed

@@ -0,0 +1,46 @@
+html {
+	font-family: sans-serif;
+}
+body {
+	background-color: #222222;
+}
+#sb-site, .sb-site-container {
+	padding: 14px;
+}
+.sb-slidebar {
+	padding: 14px;
+	color: #fff;
+}
+html.sb-active #sb-site, .sb-toggle-left, .sb-toggle-right, .sb-open-left, .sb-open-right, .sb-close {
+	cursor: pointer;
+}
+/* Fixed position examples */
+#sb-site.top-padding {
+	padding-top: 50px;
+}
+#fixed-top {
+	position: fixed;
+	top: 0;
+	width: 100%;
+	height: 50px;
+	background-color: red;
+	z-index: 4;
+}
+#fixed-top span.sb-toggle-left {
+	float: left;
+	color: white;
+	padding: 10px;
+}
+#fixed-top span.sb-toggle-right {
+	float: right;
+	color: white;
+	padding: 10px;
+}

data/lib/generators/wrstart/template/vendor/assets/components/Slidebars/examples/fixed-positions.html ADDED Viewed

@@ -0,0 +1,97 @@
+<!doctype html>
+<html>
+	<head>
+		<title>Using Fixed Positions with Slidebars Example</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+		<!-- Slidebars CSS -->
+		<link rel="stylesheet" href="slidebars/slidebars.css">
+		<!-- Example Styles -->
+		<link rel="stylesheet" href="example-styles.css">
+	</head>
+	<body>
+		<div id="fixed-top" class="sb-slide">
+			<span class="sb-toggle-left">Toggle left Slidebar</span>
+			<span class="sb-toggle-right">Toggle right Slidebar</span>
+		</div>
+		<div id="sb-site" class="top-padding">
+			<h1>Using Fixed Positions with Slidebars Example</h1>
+			<p>If you have elements with a fixed position (for example a top navigation bar), there are a few steps you need to take to make them work properly. Firstly, your fixed element must be outside of your '#sb-site' container. Next, give your fixed element an additional class '.sb-slide'. The plugin will pick up on this class, and animate it alongside your Slidebars.</p>
+			<ul>
+				<li class="sb-toggle-left">Toggle left Slidebar</li>
+				<li class="sb-toggle-right">Toggle right Slidebar</li>
+				<li class="sb-open-left">Open left Slidebar</li>
+				<li class="sb-open-right">Open right Slidebar</li>
+				<li class="sb-close">Close either Slidebar</li>
+			</ul>
+			<h2>More Examples</h2>
+			<ul>
+				<li><a href="control-classes.html">Control Classes</a></li>
+				<li><a href="api-usage.html">API Usage</a></li>
+				<li><a href="mobile-only.html">Mobile Only</a></li>
+				<li><a href="animation-styles.html">Animation Styles</a></li>
+				<li><a href="optional-widths.html">Optional Widths</a></li>
+				<li><a href="custom-widths.html">Custom Widths</a></li>
+				<li><a href="scroll-lock.html">Scroll Lock</a></li>
+				<li><a href="slidebar-links.html">Slidebar Links</a></li>
+				<li><a href="static-slidebars.html">Static Slidebars</a></li>
+				<li><a href="momentum-scrolling.html">Momentum Scrolling</a></li>
+				<li><a href="left-slidebar-only.html">Left Slidebar Only</a></li>
+				<li><a href="right-slidebar-only.html">Right Slidebar Only</a></li>
+			</ul>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et nisl eget tellus dignissim commodo. Donec euismod malesuada dolor, eu euismod massa fermentum non. Morbi eleifend lorem vel nisi scelerisque iaculis. Etiam feugiat nibh in leo porttitor, non tempor felis varius. Vivamus feugiat lobortis justo vel pharetra. Donec varius convallis metus ac venenatis. Nulla facilisi. Morbi bibendum eget mi eu bibendum. Vestibulum et augue dapibus, pharetra neque in, semper nisl. Morbi arcu lacus, suscipit sit amet tincidunt eget, mattis eget nunc. Cras eu elit at mauris consequat ullamcorper a in diam. Donec dapibus sed magna sed malesuada. Maecenas quis eleifend purus. Maecenas condimentum arcu quis purus luctus ultrices. Aliquam dictum pellentesque nisi nec placerat. Donec interdum magna eget purus dictum, nec venenatis odio posuere.</p>
+			<p>Nunc tincidunt libero eu velit accumsan, sit amet vulputate turpis lacinia. Aenean quis tincidunt velit. Proin ultricies risus nec lectus cursus ultrices. Nulla a tincidunt neque. Aliquam commodo metus euismod mauris tincidunt facilisis. Quisque a congue lorem. Curabitur condimentum turpis urna, vitae dignissim risus tincidunt non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum varius odio in mi elementum pharetra. Aenean condimentum ultricies velit, vitae bibendum turpis vehicula vulputate. Phasellus posuere, dolor sit amet tempus scelerisque, ligula nisi egestas lectus, nec cursus nunc risus varius lorem. Sed non ipsum at erat mollis cursus vitae ac est. Cras nec mauris metus. Aliquam euismod velit eros, et adipiscing leo gravida vitae.</p>
+			<p>Mauris eu dui commodo, ultrices arcu sed, fringilla ante. Praesent pellentesque erat sed sodales viverra. Vestibulum molestie, augue non egestas vestibulum, velit sapien viverra augue, quis tempus odio augue quis massa. Integer id ultricies sapien, a bibendum turpis. Praesent facilisis eros orci, eu rhoncus risus feugiat in. Curabitur euismod auctor tincidunt. Duis laoreet ligula id elit pretium accumsan. Ut aliquam sapien nulla, nec feugiat lacus sollicitudin non.</p>
+			<p>Aliquam nec lectus urna. Morbi sit amet enim sem. Phasellus fringilla sem a nibh dignissim scelerisque. Sed a elementum dolor, vel pharetra enim. In posuere convallis odio, a luctus risus euismod a. Ut in mauris eget massa consequat interdum. Cras tempor, magna id rutrum tincidunt, augue eros molestie diam, varius gravida urna nulla in nunc. Maecenas sapien orci, malesuada ac ligula sed, consectetur ullamcorper massa. Donec purus risus, dignissim ornare adipiscing vel, sollicitudin in lorem. Donec tristique ut diam at interdum. Maecenas iaculis massa dolor, pellentesque vehicula augue elementum et. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi congue elementum eros, vitae placerat augue posuere pulvinar. Etiam sit amet gravida arcu. Nullam eget risus sapien. Pellentesque in velit in felis laoreet tincidunt sit amet non libero.</p>
+			<p>Nulla commodo ornare metus id posuere. Aenean fringilla nisi id massa dictum, et lobortis sem scelerisque. Donec vulputate, nibh a consectetur tincidunt, tellus lectus fringilla risus, id ullamcorper ligula metus sit amet mauris. Pellentesque ornare mauris sit amet elit fermentum, quis congue ipsum interdum. Nulla malesuada libero nisl, sed accumsan justo feugiat in. Sed tincidunt, lectus ac convallis blandit, lorem mauris dictum risus, sed iaculis libero felis ut orci. Aliquam erat volutpat. Etiam porta velit tincidunt enim dignissim aliquet. Ut blandit eget lacus nec ullamcorper. Vestibulum malesuada rhoncus commodo. Suspendisse faucibus ipsum eget posuere iaculis. Mauris eu purus a leo aliquam consectetur a non ipsum. Sed eget hendrerit neque. Vestibulum aliquet leo ut nisi elementum luctus.</p>
+			<p>Sed neque metus, ullamcorper eget ante eget, volutpat vehicula elit. Morbi tempor, est et lobortis feugiat, turpis augue suscipit odio, et porta leo tortor id magna. In pulvinar turpis non condimentum varius. In in tortor tortor. Vivamus lacinia iaculis scelerisque. Duis commodo, urna sed porta laoreet, enim tortor venenatis ante, in commodo dui lacus ut tortor. Morbi a mi vel mauris luctus luctus vitae a felis. Maecenas interdum lorem purus, in dapibus leo dictum nec. Morbi convallis neque eget dui eleifend dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+			<p>Ut odio dui, viverra ac velit sed, accumsan tempus diam. Integer varius, massa vitae vestibulum imperdiet, erat libero suscipit lorem, nec consectetur sem libero a magna. Suspendisse elementum orci in odio varius aliquam. Quisque lacinia massa vitae arcu fringilla gravida. Ut quis facilisis nunc. Pellentesque ornare ornare urna vel dignissim. Mauris venenatis ante erat, et volutpat metus adipiscing vel. Donec vitae sapien rhoncus, aliquam nisl sit amet, mattis nunc.</p>
+			<p>Sed nec libero ac est rutrum faucibus in quis risus. Ut accumsan et tellus posuere venenatis. Aliquam vitae lacus ac quam placerat volutpat. Cras mauris nulla, ultricies vel aliquet vel, bibendum non felis. Integer non ornare justo, nec ornare orci. Nullam bibendum velit non dignissim auctor. Mauris condimentum orci nec libero fermentum, vitae placerat magna convallis.</p>
+			<p>Morbi vel enim vitae lectus pharetra pharetra consectetur id enim. Cras in nisl condimentum, porttitor ante quis, malesuada nisl. Nulla molestie quam in sapien tempus, in pharetra purus consectetur. Nam venenatis dapibus turpis id vulputate. Etiam tortor odio, vestibulum ac adipiscing vitae, vestibulum id enim. Donec non consequat velit. Donec elementum imperdiet tortor, non facilisis mi vestibulum et. Proin vehicula sollicitudin risus vitae elementum. Curabitur justo justo, suscipit sit amet laoreet eu, dictum a diam. Donec neque justo, rutrum in velit nec, tempus congue nisl. Donec pulvinar tempus ante, semper mollis neque vulputate vestibulum. Sed suscipit, magna fermentum ornare pellentesque, eros quam elementum sem, vehicula venenatis nulla nulla sit amet quam. In tincidunt, ante et scelerisque iaculis, massa ante tempor nunc, ut sollicitudin magna metus in sapien.</p>
+			<p>Morbi mattis bibendum interdum. Nulla sed dolor faucibus, euismod diam vel, blandit magna. Ut eu mauris posuere, mattis leo id, venenatis augue. In ut auctor felis. Morbi congue pulvinar convallis. Pellentesque blandit leo vitae auctor posuere. Fusce sodales vel tortor eu vestibulum. Suspendisse condimentum nunc nec turpis semper, quis rutrum sapien suscipit. Cras lacus orci, elementum vitae suscipit sit amet, tincidunt ut ipsum. Quisque vestibulum, nunc vitae vehicula ultricies, lorem enim gravida tortor, et tempus leo risus id tellus. Quisque non sem risus. Curabitur sed lorem ac turpis feugiat adipiscing a vel neque. Nunc in lectus est. Fusce hendrerit, lacus a ullamcorper bibendum, ligula ante lacinia dolor, sollicitudin porta lectus nulla nec enim. Nam at convallis metus, a facilisis sem. Mauris vehicula placerat lorem, et consectetur leo sollicitudin consectetur.</p>
+		</div>
+		<div class="sb-slidebar sb-left">
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae lorem eleifend, ultricies nisi tempor, dapibus dui. Ut iaculis adipiscing mi, at lacinia augue pulvinar in. Pellentesque et nunc a libero cursus posuere. Fusce semper metus id nunc laoreet vulputate. Maecenas sit amet augue ornare, tempus augue eget, scelerisque arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quis diam ac est ultricies vestibulum. Aenean nec rhoncus lorem. Nam velit elit, mollis in blandit vel, pellentesque id augue. In hac habitasse platea dictumst. Nunc placerat est eget vulputate tristique. Sed turpis libero, aliquam at dolor eu, consectetur tincidunt est. Nulla vel semper dui, porttitor gravida lacus. Mauris lacinia pharetra tincidunt. Nunc varius mattis molestie.</p>
+			<p>Sed quis velit leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam malesuada lobortis commodo. Maecenas egestas augue diam, eget semper massa sodales nec. Nunc fermentum suscipit augue, at sagittis mauris. Vestibulum in turpis elementum, facilisis ipsum vitae, fermentum erat. Integer sodales at dolor vitae porttitor. Pellentesque tempus in eros eu elementum. Phasellus molestie, ligula et elementum feugiat, libero purus mollis metus, quis semper tellus velit ut risus. Nullam adipiscing erat ac tortor rutrum, eu laoreet libero sollicitudin. Nunc auctor et sem quis fringilla. In erat lacus, rutrum in erat id, lacinia cursus velit. Pellentesque consequat sit amet justo non aliquet. Donec ligula eros, convallis sit amet vehicula et, dignissim id velit.</p>
+			<p>Suspendisse sodales ornare dui sed tincidunt. Praesent bibendum nisl ac neque posuere ultrices. Sed ac nisl id augue lobortis venenatis. Morbi eros urna, sollicitudin tristique justo ac, sodales feugiat sem. Donec auctor placerat leo, quis auctor lorem laoreet vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra nulla ac fringilla dictum. Maecenas sed dapibus arcu. Morbi nec feugiat tellus. Donec rutrum, tellus vitae sollicitudin tincidunt, ligula elit feugiat ligula, eget sollicitudin libero felis vel augue. Duis et massa fringilla, vehicula arcu sed, ultricies ligula. Praesent porttitor gravida posuere.</p>
+		</div>
+		<div class="sb-slidebar sb-right">
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae lorem eleifend, ultricies nisi tempor, dapibus dui. Ut iaculis adipiscing mi, at lacinia augue pulvinar in. Pellentesque et nunc a libero cursus posuere. Fusce semper metus id nunc laoreet vulputate. Maecenas sit amet augue ornare, tempus augue eget, scelerisque arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quis diam ac est ultricies vestibulum. Aenean nec rhoncus lorem. Nam velit elit, mollis in blandit vel, pellentesque id augue. In hac habitasse platea dictumst. Nunc placerat est eget vulputate tristique. Sed turpis libero, aliquam at dolor eu, consectetur tincidunt est. Nulla vel semper dui, porttitor gravida lacus. Mauris lacinia pharetra tincidunt. Nunc varius mattis molestie.</p>
+			<p>Sed quis velit leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam malesuada lobortis commodo. Maecenas egestas augue diam, eget semper massa sodales nec. Nunc fermentum suscipit augue, at sagittis mauris. Vestibulum in turpis elementum, facilisis ipsum vitae, fermentum erat. Integer sodales at dolor vitae porttitor. Pellentesque tempus in eros eu elementum. Phasellus molestie, ligula et elementum feugiat, libero purus mollis metus, quis semper tellus velit ut risus. Nullam adipiscing erat ac tortor rutrum, eu laoreet libero sollicitudin. Nunc auctor et sem quis fringilla. In erat lacus, rutrum in erat id, lacinia cursus velit. Pellentesque consequat sit amet justo non aliquet. Donec ligula eros, convallis sit amet vehicula et, dignissim id velit.</p>
+			<p>Suspendisse sodales ornare dui sed tincidunt. Praesent bibendum nisl ac neque posuere ultrices. Sed ac nisl id augue lobortis venenatis. Morbi eros urna, sollicitudin tristique justo ac, sodales feugiat sem. Donec auctor placerat leo, quis auctor lorem laoreet vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra nulla ac fringilla dictum. Maecenas sed dapibus arcu. Morbi nec feugiat tellus. Donec rutrum, tellus vitae sollicitudin tincidunt, ligula elit feugiat ligula, eget sollicitudin libero felis vel augue. Duis et massa fringilla, vehicula arcu sed, ultricies ligula. Praesent porttitor gravida posuere.</p>
+		</div>
+		<!-- jQuery -->
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- Slidebars -->
+		<script src="slidebars/slidebars.js"></script>
+		<script>
+			(function($) {
+				$(document).ready(function() {
+					$.slidebars();
+				});
+			}) (jQuery);
+		</script>
+	</body>
+</html>

data/lib/generators/wrstart/template/vendor/assets/components/Slidebars/examples/left-slidebar-only.html ADDED Viewed

@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+	<head>
+		<title>Left Slidebar Only Example</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+		<!-- Slidebars CSS -->
+		<link rel="stylesheet" href="slidebars/slidebars.css">
+		<!-- Example Styles -->
+		<link rel="stylesheet" href="example-styles.css">
+	</head>
+	<body>
+		<div id="sb-site">
+			<h1>Left Slidebar Only Example</h1>
+			<p>This example only uses the left Slidebar. The usual control classes are here for testing purposes.</p>
+			<ul>
+				<li class="sb-toggle-left">Toggle left Slidebar</li>
+				<li class="sb-toggle-right">Toggle right Slidebar</li>
+				<li class="sb-open-left">Open left Slidebar</li>
+				<li class="sb-open-right">Open right Slidebar</li>
+				<li class="sb-close">Close either Slidebar</li>
+			</ul>
+			<h2>More Examples</h2>
+			<ul>
+				<li><a href="control-classes.html">Control Classes</a></li>
+				<li><a href="api-usage.html">API Usage</a></li>
+				<li><a href="mobile-only.html">Mobile Only</a></li>
+				<li><a href="animation-styles.html">Animation Styles</a></li>
+				<li><a href="optional-widths.html">Optional Widths</a></li>
+				<li><a href="custom-widths.html">Custom Widths</a></li>
+				<li><a href="scroll-lock.html">Scroll Lock</a></li>
+				<li><a href="slidebar-links.html">Slidebar Links</a></li>
+				<li><a href="static-slidebars.html">Static Slidebars</a></li>
+				<li><a href="momentum-scrolling.html">Momentum Scrolling</a></li>
+				<li><a href="left-slidebar-only.html">Left Slidebar Only</a></li>
+				<li><a href="right-slidebar-only.html">Right Slidebar Only</a></li>
+			</ul>
+		</div>
+		<div class="sb-slidebar sb-left">
+			<!-- Your left Slidebar content. -->
+		</div>
+		<!-- jQuery -->
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- Slidebars -->
+		<script src="slidebars/slidebars.js"></script>
+		<script>
+			(function($) {
+				$(document).ready(function() {
+					$.slidebars();
+				});
+			}) (jQuery);
+		</script>
+	</body>
+</html>

data/lib/generators/wrstart/template/vendor/assets/components/Slidebars/examples/mobile-only.html ADDED Viewed

@@ -0,0 +1,68 @@
+<!doctype html>
+<html>
+	<head>
+		<title>Slidebars Mobile Only Example</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+		<!-- Slidebars CSS -->
+		<link rel="stylesheet" href="slidebars/slidebars.css">
+		<!-- Example Styles -->
+		<link rel="stylesheet" href="example-styles.css">
+	</head>
+	<body>
+		<div id="sb-site">
+			<h1>Slidebars Mobile Only Example</h1>
+			<p>There is text below to control the Slidebars, only visible on screens smaller than 480px. Should the screen width expand past 480px (or your set width) when a Slidebar is open, the Slidebar will be closed. Try it now, resize your window.</p>
+			<h2>Control Classes</h2>
+			<ul>
+				<li class="sb-toggle-left">Toggle left Slidebar</li>
+				<li class="sb-toggle-right">Toggle right Slidebar</li>
+				<li class="sb-open-left">Open left Slidebar</li>
+				<li class="sb-open-right">Open right Slidebar</li>
+				<li class="sb-close">Close either Slidebar</li>
+			</ul>
+			<h2>More Examples</h2>
+			<ul>
+				<li><a href="control-classes.html">Control Classes</a></li>
+				<li><a href="api-usage.html">API Usage</a></li>
+				<li><a href="mobile-only.html">Mobile Only</a></li>
+				<li><a href="animation-styles.html">Animation Styles</a></li>
+				<li><a href="optional-widths.html">Optional Widths</a></li>
+				<li><a href="custom-widths.html">Custom Widths</a></li>
+				<li><a href="scroll-lock.html">Scroll Lock</a></li>
+				<li><a href="slidebar-links.html">Slidebar Links</a></li>
+				<li><a href="static-slidebars.html">Static Slidebars</a></li>
+				<li><a href="momentum-scrolling.html">Momentum Scrolling</a></li>
+				<li><a href="left-slidebar-only.html">Left Slidebar Only</a></li>
+				<li><a href="right-slidebar-only.html">Right Slidebar Only</a></li>
+			</ul>
+		</div>
+		<div class="sb-slidebar sb-left">
+			<!-- Your left Slidebar content. -->
+		</div>
+		<div class="sb-slidebar sb-right">
+			<!-- Your right Slidebar content. -->
+		</div>
+		<!-- jQuery -->
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- Slidebars -->
+		<script src="slidebars/slidebars.js"></script>
+		<script>
+			(function($) {
+				$(document).ready(function() {
+					$.slidebars({
+						disableOver: 480,
+						hideControlClasses: true
+					});
+				});
+			}) (jQuery);
+		</script>
+	</body>
+</html>

data/lib/generators/wrstart/template/vendor/assets/components/Slidebars/examples/momentum-scrolling.html ADDED Viewed

@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+	<head>
+		<title>Slidebars Momentum Scrolling Example</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+		<!-- Slidebars CSS -->
+		<link rel="stylesheet" href="slidebars/slidebars.css">
+		<!-- Example Styles -->
+		<link rel="stylesheet" href="example-styles.css">
+	</head>
+	<body>
+		<div id="sb-site">
+			<h1>Slidebars Momentum Scrolling Example</h1>
+			<p>iOS offers a special webkit property to allow native style momentum scrolling on overflowing elements. You can add the class '.sb-momentum-scrolling' to your Slidebars to achieve this. In this example, the <a class="sb-open-left" href="#">left</a> Slidebar has smooth scrolling enabled whereas the <a class="sb-open-right" href="#">right</a> does not. You'll need to view this page on an iOS device/simulator to see it working.</p>
+			<ul>
+				<li class="sb-toggle-left">Toggle left Slidebar</li>
+				<li class="sb-toggle-right">Toggle right Slidebar</li>
+				<li class="sb-open-left">Open left Slidebar</li>
+				<li class="sb-open-right">Open right Slidebar</li>
+				<li class="sb-close">Close either Slidebar</li>
+			</ul>
+			<h2>More Examples</h2>
+			<ul>
+				<li><a href="control-classes.html">Control Classes</a></li>
+				<li><a href="api-usage.html">API Usage</a></li>
+				<li><a href="mobile-only.html">Mobile Only</a></li>
+				<li><a href="animation-styles.html">Animation Styles</a></li>
+				<li><a href="optional-widths.html">Optional Widths</a></li>
+				<li><a href="custom-widths.html">Custom Widths</a></li>
+				<li><a href="scroll-lock.html">Scroll Lock</a></li>
+				<li><a href="slidebar-links.html">Slidebar Links</a></li>
+				<li><a href="static-slidebars.html">Static Slidebars</a></li>
+				<li><a href="momentum-scrolling.html">Momentum Scrolling</a></li>
+				<li><a href="left-slidebar-only.html">Left Slidebar Only</a></li>
+				<li><a href="right-slidebar-only.html">Right Slidebar Only</a></li>
+			</ul>
+		</div>
+		<div class="sb-slidebar sb-left sb-momentum-scrolling">
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae lorem eleifend, ultricies nisi tempor, dapibus dui. Ut iaculis adipiscing mi, at lacinia augue pulvinar in. Pellentesque et nunc a libero cursus posuere. Fusce semper metus id nunc laoreet vulputate. Maecenas sit amet augue ornare, tempus augue eget, scelerisque arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quis diam ac est ultricies vestibulum. Aenean nec rhoncus lorem. Nam velit elit, mollis in blandit vel, pellentesque id augue. In hac habitasse platea dictumst. Nunc placerat est eget vulputate tristique. Sed turpis libero, aliquam at dolor eu, consectetur tincidunt est. Nulla vel semper dui, porttitor gravida lacus. Mauris lacinia pharetra tincidunt. Nunc varius mattis molestie.</p>
+			<p>Sed quis velit leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam malesuada lobortis commodo. Maecenas egestas augue diam, eget semper massa sodales nec. Nunc fermentum suscipit augue, at sagittis mauris. Vestibulum in turpis elementum, facilisis ipsum vitae, fermentum erat. Integer sodales at dolor vitae porttitor. Pellentesque tempus in eros eu elementum. Phasellus molestie, ligula et elementum feugiat, libero purus mollis metus, quis semper tellus velit ut risus. Nullam adipiscing erat ac tortor rutrum, eu laoreet libero sollicitudin. Nunc auctor et sem quis fringilla. In erat lacus, rutrum in erat id, lacinia cursus velit. Pellentesque consequat sit amet justo non aliquet. Donec ligula eros, convallis sit amet vehicula et, dignissim id velit.</p>
+			<p>Suspendisse sodales ornare dui sed tincidunt. Praesent bibendum nisl ac neque posuere ultrices. Sed ac nisl id augue lobortis venenatis. Morbi eros urna, sollicitudin tristique justo ac, sodales feugiat sem. Donec auctor placerat leo, quis auctor lorem laoreet vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra nulla ac fringilla dictum. Maecenas sed dapibus arcu. Morbi nec feugiat tellus. Donec rutrum, tellus vitae sollicitudin tincidunt, ligula elit feugiat ligula, eget sollicitudin libero felis vel augue. Duis et massa fringilla, vehicula arcu sed, ultricies ligula. Praesent porttitor gravida posuere.</p>
+		</div>
+		<div class="sb-slidebar sb-right">
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae lorem eleifend, ultricies nisi tempor, dapibus dui. Ut iaculis adipiscing mi, at lacinia augue pulvinar in. Pellentesque et nunc a libero cursus posuere. Fusce semper metus id nunc laoreet vulputate. Maecenas sit amet augue ornare, tempus augue eget, scelerisque arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec quis diam ac est ultricies vestibulum. Aenean nec rhoncus lorem. Nam velit elit, mollis in blandit vel, pellentesque id augue. In hac habitasse platea dictumst. Nunc placerat est eget vulputate tristique. Sed turpis libero, aliquam at dolor eu, consectetur tincidunt est. Nulla vel semper dui, porttitor gravida lacus. Mauris lacinia pharetra tincidunt. Nunc varius mattis molestie.</p>
+			<p>Sed quis velit leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam malesuada lobortis commodo. Maecenas egestas augue diam, eget semper massa sodales nec. Nunc fermentum suscipit augue, at sagittis mauris. Vestibulum in turpis elementum, facilisis ipsum vitae, fermentum erat. Integer sodales at dolor vitae porttitor. Pellentesque tempus in eros eu elementum. Phasellus molestie, ligula et elementum feugiat, libero purus mollis metus, quis semper tellus velit ut risus. Nullam adipiscing erat ac tortor rutrum, eu laoreet libero sollicitudin. Nunc auctor et sem quis fringilla. In erat lacus, rutrum in erat id, lacinia cursus velit. Pellentesque consequat sit amet justo non aliquet. Donec ligula eros, convallis sit amet vehicula et, dignissim id velit.</p>
+			<p>Suspendisse sodales ornare dui sed tincidunt. Praesent bibendum nisl ac neque posuere ultrices. Sed ac nisl id augue lobortis venenatis. Morbi eros urna, sollicitudin tristique justo ac, sodales feugiat sem. Donec auctor placerat leo, quis auctor lorem laoreet vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra nulla ac fringilla dictum. Maecenas sed dapibus arcu. Morbi nec feugiat tellus. Donec rutrum, tellus vitae sollicitudin tincidunt, ligula elit feugiat ligula, eget sollicitudin libero felis vel augue. Duis et massa fringilla, vehicula arcu sed, ultricies ligula. Praesent porttitor gravida posuere.</p>
+		</div>
+		<!-- jQuery -->
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- Slidebars -->
+		<script src="slidebars/slidebars.js"></script>
+		<script>
+			(function($) {
+				$(document).ready(function() {
+					$.slidebars();
+				});
+			}) (jQuery);
+		</script>
+	</body>
+</html>

data/lib/generators/wrstart/template/vendor/assets/components/Slidebars/examples/optional-widths.html ADDED Viewed

@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+	<head>
+		<title>Slidebars Widths Example</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+		<!-- Slidebars CSS -->
+		<link rel="stylesheet" href="slidebars/slidebars.css">
+		<!-- Example Styles -->
+		<link rel="stylesheet" href="example-styles.css">
+	</head>
+	<body>
+		<div id="sb-site">
+			<h1>Slidebars Widths Example</h1>
+			<p>You can set different widths to your Slidebars by adding modifier classes '.sb-width-thin' or '.sb-width-wide'. The left Slidebar has class '.sb-width-thin' which is 15% narrower than the standard width. The right Slidebar has class '.sb-width-wide' which is 15% wider than the standard. Unlike custom widths, these adapt to the screen size.</p>
+			<ul>
+				<li class="sb-toggle-left">Toggle left Slidebar</li>
+				<li class="sb-toggle-right">Toggle right Slidebar</li>
+				<li class="sb-open-left">Open left Slidebar</li>
+				<li class="sb-open-right">Open right Slidebar</li>
+				<li class="sb-close">Close either Slidebar</li>
+			</ul>
+			<h2>More Examples</h2>
+			<ul>
+				<li><a href="control-classes.html">Control Classes</a></li>
+				<li><a href="api-usage.html">API Usage</a></li>
+				<li><a href="mobile-only.html">Mobile Only</a></li>
+				<li><a href="animation-styles.html">Animation Styles</a></li>
+				<li><a href="optional-widths.html">Optional Widths</a></li>
+				<li><a href="custom-widths.html">Custom Widths</a></li>
+				<li><a href="scroll-lock.html">Scroll Lock</a></li>
+				<li><a href="slidebar-links.html">Slidebar Links</a></li>
+				<li><a href="static-slidebars.html">Static Slidebars</a></li>
+				<li><a href="momentum-scrolling.html">Momentum Scrolling</a></li>
+				<li><a href="left-slidebar-only.html">Left Slidebar Only</a></li>
+				<li><a href="right-slidebar-only.html">Right Slidebar Only</a></li>
+			</ul>
+		</div>
+		<div class="sb-slidebar sb-left sb-width-thin">
+			<!-- Your left Slidebar content. -->
+		</div>
+		<div class="sb-slidebar sb-right sb-width-wide">
+			<!-- Your right Slidebar content. -->
+		</div>
+		<!-- jQuery -->
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- Slidebars -->
+		<script src="slidebars/slidebars.js"></script>
+		<script>
+			(function($) {
+				$(document).ready(function() {
+					$.slidebars();
+				});
+			}) (jQuery);
+		</script>
+	</body>
+</html>

data/lib/generators/wrstart/template/vendor/assets/components/Slidebars/examples/right-slidebar-only.html ADDED Viewed

@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+	<head>
+		<title>Right Slidebar Only Example</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+		<!-- Slidebars CSS -->
+		<link rel="stylesheet" href="slidebars/slidebars.css">
+		<!-- Example Styles -->
+		<link rel="stylesheet" href="example-styles.css">
+	</head>
+	<body>
+		<div id="sb-site">
+			<h1>Right Slidebar Only Example</h1>
+			<p>This example only uses the right Slidebar. The usual control classes are here for testing purposes.</p>
+			<ul>
+				<li class="sb-toggle-left">Toggle left Slidebar</li>
+				<li class="sb-toggle-right">Toggle right Slidebar</li>
+				<li class="sb-open-left">Open left Slidebar</li>
+				<li class="sb-open-right">Open right Slidebar</li>
+				<li class="sb-close">Close either Slidebar</li>
+			</ul>
+			<h2>More Examples</h2>
+			<ul>
+				<li><a href="control-classes.html">Control Classes</a></li>
+				<li><a href="api-usage.html">API Usage</a></li>
+				<li><a href="mobile-only.html">Mobile Only</a></li>
+				<li><a href="animation-styles.html">Animation Styles</a></li>
+				<li><a href="optional-widths.html">Optional Widths</a></li>
+				<li><a href="custom-widths.html">Custom Widths</a></li>
+				<li><a href="scroll-lock.html">Scroll Lock</a></li>
+				<li><a href="slidebar-links.html">Slidebar Links</a></li>
+				<li><a href="static-slidebars.html">Static Slidebars</a></li>
+				<li><a href="momentum-scrolling.html">Momentum Scrolling</a></li>
+				<li><a href="left-slidebar-only.html">Left Slidebar Only</a></li>
+				<li><a href="right-slidebar-only.html">Right Slidebar Only</a></li>
+			</ul>
+		</div>
+		<div class="sb-slidebar sb-right">
+			<!-- Your right Slidebar content. -->
+		</div>
+		<!-- jQuery -->
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+		<!-- Slidebars -->
+		<script src="slidebars/slidebars.js"></script>
+		<script>
+			(function($) {
+				$(document).ready(function() {
+					$.slidebars();
+				});
+			}) (jQuery);
+		</script>
+	</body>
+</html>