survivalkit 0.3.2 → 0.3.3

data/templates/drupal/sources/flexie/test/css/demo.css

@@ -0,0 +1,34 @@
+/* Demo Styling. Pay no attention to the CSS behind the box */
+/* (See what I did there?) */
+
+body, html {
+	width: 100%;
+	height: 100%;
+	padding: 0;
+	margin: 0;
+	font: normal 12px Arial, sans-serif;
+}
+
+#box-wrap-vertical, #box-wrap-horizontal {
+	margin: 20px auto;
+	width: 700px;
+	height: 300px;
+	background: #666;
+	position: relative;
+}
+
+#box-wrap-vertical div, #box-wrap-horizontal div {
+	width: 50px;
+	height: 100px;
+	line-height: 100px;
+	text-align: center;
+	background: #999;
+	white-space: nowrap;
+	border: solid pink;
+}
+
+#box-wrap-vertical div {
+	width: auto;
+	height: 20px;
+	line-height: 20px;
+}

data/templates/drupal/sources/flexie/test/css/test.css

@@ -0,0 +1,141 @@
+/*
+Properties to test:
+(via <http://www.html5rocks.com/tutorials/flexbox/quick/>)
+
+Parent properties:
+--------------------------
+
++ display: box
+	- This new value for the display style opts this element and its immediate children into the flexible box model.
+	  The flexbox model works only with immediate children.
+
++ box-orient
+	- How should the box's children be aligned?
+	- Values:
+		+ horizonal (default)
+		- vertical
+		- inherit
+		+ inline-axis (maps to horizontal)
+		- block-axis (maps to vertical)
+
++ box-align
+	- Basically box-pack's brother property.
+	  Sets how the box's children are aligned in the box.
+	  If the orientation is horizontal it will decide the alignment vertically and vice-versa.
+	- Values:
+		+ stretch (default)
+		+ start
+		+ end
+		+ center
+		- baseline
+
++ box-direction
+	- Children within a horizontally oriented box are, by default, displayed from left to right in the same
+	  order as they appear in the source document. Children within a vertically oriented box are displayed
+	  top to bottom in the same order. The box-direction and box-ordinal-group properties may be used to
+	  change this ordering.
+	- Values:
+		+ normal (default)
+		+ reverse
+		- inherit
+
++ box-pack
+	- Sets the alignment of the box along the box-orient axis.
+  	  So if box-orient is horizontal it will chose how the box's children are aligned horizontally, and vice-versa.
+	- Values:
+		+ start (default)
+		+ end
+		+ center
+		+ justify
+
+Child properties:
+--------------------------
++ box-flex
+	- The flexibility ratio for this child.
+	  If a child had 1 and its sibling had 2, any additional space in the parent box would be consumed
+	  twice as much by the sibling. It defaults to 0 which is inflexible.
+	- Values:
+		- 0 (default)
+		- Any integer
+
+box-ordinal-group
+	-
+	- Values:
+		- 1 (default)
+		- Any integer
+
+??? properties:
+--------------------------
+box-flex-group
+box-lines
+
+*/
+
+/* Demo Styling */
+@import url("demo.css");
+
+#box-wrap-horizontal {
+	/* Display Box */
+	display: -moz-box;
+	display: -webkit-box;
+	display: -ms-box;
+	display: box;
+	
+/*	-webkit-box-align: start;
+	-moz-box-align: start;
+	-ms-box-align: start;
+	box-align: start;
+	
+	-webkit-box-align: stretch;
+	-moz-box-align: stretch;
+	-ms-box-align: stretch;
+	box-align: stretch;
+	
+	-webkit-box-pack: justify;
+	-moz-box-pack: justify;
+	-ms-box-pack: justify;
+	box-pack: justify;*/
+}
+
+#box-wrap-horizontal div {
+	margin: 15px 5px 20px 10px;
+	padding: 10px 5px 25px 20px;
+	border-width: 9px 4px 6px 13px;
+}
+
+#box-wrap-horizontal #box-1 {
+	margin-left: 25px;
+}
+
+#box-wrap-horizontal #box-5 {
+	margin-right: 25px;
+}
+
+#box-wrap-vertical {
+	/* Display Box */
+	display: -moz-box;
+	display: -webkit-box;
+	display: -ms-box;
+	display: box;
+	
+	-webkit-box-orient: vertical;
+	-moz-box-orient: vertical;
+	-ms-box-orient: vertical;
+	box-orient: vertical;
+	
+/*	-webkit-box-align: stretch;
+	-moz-box-align: stretch;
+	-ms-box-align: stretch;
+	box-align: stretch;
+	
+	-webkit-box-pack: justify;
+	-moz-box-pack: justify;
+	-ms-box-pack: justify;
+	box-pack: justify;*/
+}
+
+#box-wrap-vertical div {
+	margin: 8px 2px 5px 4px;
+	padding: 5px 4px 3px 2px;
+	border-width: 8px 2px 7px 6px;
+}

data/templates/drupal/sources/flexie/test/index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+		<title>Flexie | Unit Tests</title>
+		
+		<link rel="stylesheet" href="css/test.css" type="text/css" />
+	</head>
+	<body>
+		<div id="box-wrap-horizontal">
+			<div id="box-1">Box 1</div>
+			<div id="box-2">Box 2</div>
+			<div id="box-3">Box 3</div>
+			<div id="box-4">Box 4</div>
+			<div id="box-5">Box 5</div>
+		</div>
+		
+		<div id="box-wrap-vertical">
+			<div id="box-6">Box 6</div>
+			<div id="box-7">Box 7</div>
+			<div id="box-8">Box 8</div>
+			<div id="box-9">Box 9</div>
+			<div id="box-10">Box 10</div>
+		</div>
+		
+		<!-- DOMAssistant -->
+		<!-- <script src="http://domassistant.googlecode.com/svn/branches/2.8/DOMAssistantCompressed.js" type="text/javascript"></script> -->
+		
+		<!-- NWMatcher -->
+		<!-- <script src="http://nwevents.googlecode.com/svn/trunk/nwmatcher.js" type="text/javascript"></script> -->
+		
+		<!-- jQuery -->
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
+		
+		<!-- Sizzle -->
+		<!-- <script src="http://github.com/jeresig/sizzle/raw/master/sizzle.js" type="text/javascript"></script> -->
+		
+		<!-- MooTools -->
+		<!-- <script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js" type="text/javascript"></script> -->
+		
+		<!-- YUI -->
+		<!-- <script src="http://yui.yahooapis.com/2.8.1/build/yahoo/yahoo-min.js"></script> -->
+		<!-- <script src="http://yui.yahooapis.com/2.8.1/build/event/event-min.js"></script> -->
+		<!-- <script src="http://yui.yahooapis.com/2.8.1/build/selector/selector-min.js"></script> -->
+		
+		<!-- Prototype -->
+		<!-- <script src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script> -->
+		
+		<!-- Dojo -->
+		<!-- <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript"></script> -->
+		
+		<script src="../src/flexie.js" type="text/javascript"></script>
+	</body>
+</html>

data/templates/drupal/sources/flickrbomb/css/app.css

@@ -0,0 +1,41 @@
+body{background:#eaf0f4 url(../images/bg-clouds.jpg) top center repeat-x;}
+.container{overflow:hidden;width:960px !important;}
+.main-content{position:relative;z-index:1;}
+p{font-size:15px;line-height:1.5;}
+a,a:active,a:visited,a:hover,a:link{color:#2b7f9e;font-weight:bold;}
+a:hover{color:#3cb1dc;}
+.flickrbombWrapper{position:relative;z-index:3;}
+.demo-row li{float:left;border:1px solid #ddd;padding:3px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;width:100px;height:100px;margin-right:5px;}
+h1 img{position:absolute;margin-left:-70px;margin-top:-5px;}
+h1{padding-left:70px;padding-top:25px;padding-bottom:10px;text-shadow:1px 2px 2px #FFF;}
+#demo-content{font-size:20px;text-align:center;background:#4da7e6;color:#FFF;padding:15px;overflow:hidden;white-space:nowrap;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;position:relative;z-index:99;height: 28px;}
+#demo-splash{background:#222;position:relative;}
+#demo-splash #uniqueID,#demo-splash .flickrbomb{position:relative;z-index:0;}
+#demo-content span{display:inline-block;outline:none;background:#7dbbe6;color:#0e3c5d;font-weight:300;padding:5px;max-width:250px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin-right:1px;margin-left:1px;position: relative; z-index:100;}
+#demo-content span:focus{background:#a3c7e0;color:;border-bottom:2px dashed #222;}
+#demo-splash{height:250px;/* overflow:hidden;*/}
+#demo-splash span{position:absolute;top:5px;left:10px;font-weight:bold;z-index:0;}
+span{outline:none;}
+#demo-body h2{text-align:center;text-shadow:1px 2px 2px #ddd;padding-top:45px;padding-bottom:45px;}
+.demo{/* demo images */}
+.lead-in{font-size:18px;line-height:1.3;}
+p span{background:#666;padding:3px;color:#FFF;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+h3{padding-top:10px;}
+.setup-icon-small{width:24px;height:24px;position:relative;margin-bottom:-7px;}
+.bomber{background:url('../images/bomber.jpg') 0 75px no-repeat;height:719px;text-align:center;}
+.old-vs-new{position:relative;background:#ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:15px;padding-top:10px;height:120px;border:1px solid #d2d2d2;}
+.old-vs-new li{position:relative;display:block;float:left;height:115px;padding-left:21px;}
+.old-vs-new li.first{border-right:1px solid #c9c8c8;height:100%;padding-right:21px;padding-left:0;}
+.old-vs-new h5{font-size:12px;padding-bottom:5px;}
+.old-vs-new li.no-caption{position:relative;padding-top:20px;}
+.all-black{position:relative;background:#000;width:100%;margin-top:-145px;z-index:0;}
+.all-black h3{color:#eee;margin-top:25px;}
+.all-black h3.first{margin-top:215px;}
+.all-black h5{color:#eee;padding-bottom:5px;}
+.all-black p{color:#ddd;}
+.all-black p span{background:#333;}
+.art-style{position:absolute;background:#eaf0f4 url('../images/bg-ground.jpg') top center no-repeat;width:100%;height:244px;}
+.highlight pre{-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;margin:0;display:block;font:11px Monaco,monospace !important;padding:15px;background-color:#1C1C1C;overflow:auto;color:#D0D0D0;line-height:125%;}
+.button{background:#2B7F9E;color:#eee !important;}
+.button:hover{background:#3CB1DC;}
+#johnstewart{float:right;padding-left:10px;}

data/templates/drupal/sources/flickrbomb/css/flickrbomb.css

@@ -0,0 +1,38 @@
+/* Artfully masterminded by ZURB */
+/* -----------------------------------------
+THIS IS ALL DECLARED IN THE PLUGIN
+----------------------------------------- */
+.flickrbombWrapper{overflow:hidden;display:block;position:relative;}
+.flickrbombContainer{position:relative;}
+.flickrbombWrapper:hover .setupIcon{display:block;}
+.flickrbombWrapper .setupIcon{display:none; z-index:99;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAApdJREFUeNpiZGBgYALidCD2BmJpBvqBb0B8Foi7gfgxI5CIB+IChoEDD4A4DOSQ9UCswDCwIAUULRzUMs3b25vnxo0b6v///zfo7e2VIEErFyhEtgOxBKWOyM3NFZo0aZIciH3z5s3vGhoaN0nQnsdEjZAQFhZmhjkCBLZu3foRWd7S0pJz9+7divjMoIpDsrKyhNCiiB+ZP3/+fDkXFxd+fGawUMMhAgICzMh8dXV1TlBUGRgYcFpbW/OA+ITMoIpDPnz48BddDDmqiAFUiZqVK1d+/PPnz398atauXfuO5g5RVVVlY2FhYcQlD8pF6enpT2nqEFCOmTVrFtZo+PLly9++vr4XwHRy5+3bt39pmkaqqqpEpaSk2JDF9uzZ89HV1fU+KeZQVKCByodjx46po4eCsbHxzVu3bv2iW4E2YcIEjNq6q6vrBYmOoCyN1NbWipqZmfGgJ8rm5ubX5JjHRG4CLSsrw4jOxMTER+R6jCyHzJw5U5qHhwelNJ03b97r48ePfyfXISQnVlBVv2XLFhVksWfPnv3S09O7SSiLUjWxYiszysvLn1LgCOKiBpQeQI2cz58/64IaPOhlxqlTp74sWbLkI6XlEQshRxw9elQFV+358+fPf7GxsY8YqACYCCVKfFU4IxBQq5mJ1yHBwcFC+OTZ2NgYw8PD+anhEKLqGlBBBYyiLz9+/PgPbI2J4WsU0cwh6A1hZ2dnXuTowtYoonrUgGpR9NISFDLI/GnTpr2jeYhgq8pBbVB4KZSX94jS8oOsIh5UnoCiBRRdPj4+dyZPnvyOWrmGah0sCgG4iP/LMPDgN8ghJwbYEaDEfwVUBpwDYi0glhkAR4DqqHIgvodcRAsDsRgdHfEHiG/DOAABBgDwy+4qw3JyZwAAAABJRU5ErkJggg==);width:34px;height:34px;position:absolute;bottom:8px;right:8px;opacity:.7;}
+.setupIcon:hover{opacity:1;}
+img.flickrbomb{position:absolute;left:0;top:0;}
+.flickrbombFlyout{display:none;background:rgba(0,0,0,.9);width:345px;height:230px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid rgba(10,10,10,.95);-moz-box-shadow:1px 1px 9px rgba(0,0,0,.85);-webkit-box-shadow:1px 1px 9px rgba(0,0,0,.85);box-shadow:1px 1px 9px rgba(0,0,0,.85);background:-ms-linear-gradient(left,rgba(29,30,33,1) 0%,rgba(0,0,0,.5) 100%);/* IE10+ */
+filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d1e21',endColorstr='#000000',GradientType=.5 );/* IE6-9 */
+background-image:-webkit-gradient(
+linear,
+left bottom,
+left top,
+color-stop(0.28,rgba(23,23,23,.7)),
+color-stop(1,rgba(48,48,48,.85))
+);background-image:-moz-linear-gradient(
+center bottom,
+rgba(23,23,23,.85) 28%,
+rgba(48,48,48,.85) 100%
+);padding:20px 35px 0px 45px;position:absolute;z-index:9999;}
+.flickrbombFlyout a.photo{display:block;overflow:hidden;width:100px;height:60px;float:left;margin:0 15px 15px 0;position:relative;}
+.flickrbombFlyout a.photo img{width:100%;}
+.flickrbombFlyout a.photo:hover{-moz-box-shadow:0 0 8px rgba(0,0,0,.7);-webkit-box-shadow:0 0 8px rgba(0,0,0,.7);box-shadow:0 0 8px rgba(0,0,0,.7);top:-1px;}
+.flickrbombFlyout a.prev,.flickrbombFlyout a.next{background:rgb(29,30,33);/* Old browsers */
+background:-moz-linear-gradient(left,rgba(29,30,33,.5) 0%,rgba(0,0,0,1) 100%);/* FF3.6+ */
+background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(29,30,33,.5)),color-stop(100%,rgba(0,0,0,.5)));/* Chrome,Safari4+ */
+background:-webkit-linear-gradient(left,rgba(29,30,33,.5) 0%,rgba(0,0,0,.5) 100%);/* Chrome10+,Safari5.1+ */
+background:-o-linear-gradient(left,rgba(29,30,33,1) 0%,rgba(0,0,0,.5) 100%);/* Opera11.10+ */
+background:-ms-linear-gradient(left,rgba(29,30,33,1) 0%,rgba(0,0,0,.5) 100%);/* IE10+ */
+filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d1e21',endColorstr='#000000',GradientType=.5 );/* IE6-9 */
+background:linear-gradient(left,rgba(29,30,33,1) 0%,rgba(0,0,0,.5) 100%);/* W3C */
+border:1px solid #111;padding-top:95px;text-align:center;position:absolute;color:#fff;text-decoration:none;width:25px;overflow:hidden;height:113px;}
+.flickrbombFlyout a.prev:hover,.flickrbombFlyout a.next:hover{color:#666;border-color:#222;}
+.flickrbombFlyout a.prev{left:10px;}
+.flickrbombFlyout a.next{right:10px;}

data/templates/drupal/sources/flickrbomb/demo.html

@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<head>
+	<meta charset="utf-8" />
+	<title>ZURBflickrbomb</title>
+  
+	<!--============== IMPORT EXTERNAL SHEETS ================== -->
+	<link rel="stylesheet" href="css/global.css">
+	<link rel="stylesheet" href="css/app.css">
+	<link rel="stylesheet" href="css/flickrbomb.css">
+
+</head>
+<body>
+<div class="container main-content">
+	<div class="row">
+		<div claass="sixteen columns">
+			<h1>
+				<img src="images/bomb.png">flickrBomb
+			</h1>
+		</div>
+	</div>
+	<div class="row">
+		<div class="sixteen columns">
+			<div id="demo-splash">
+				<img src="flickr://Super Meat Boy" width="940px" height="250px"> <span>Loading New Demo Content</span>
+			</div>
+			<div id="demo-content">
+				&lt;img src="flickr://<span id="keywords" spellcheck="false" contenteditable="true">Super Meat Boy</span>" width="940px" height="250px"&gt;
+			</div>
+			<div id="demo-body">
+				<h2>
+					Build super awesome sites quickly, with super awesome images
+				</h2>
+						</div>
+					</div>
+					<div class="row">
+						<div class="nine columns">
+							<p class="lead-in">
+								Duck! Whew, that bomber almost got you. Lucky for you, you lived.
+							</p>
+							<p>
+								Hopefully you had a chance to play around with the demo above and realized that flickrBomb provides an easy way for you to fill your prototypes with relevant content, and not just dull gray placeholder images. It's quick and easy, so let's dive in!
+							</p>
+							<p><strong>Demo: </strong> Hover over the images below and click the wrench icon <img class="setup-icon-small" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAApdJREFUeNpiZGBgYALidCD2BmJpBvqBb0B8Foi7gfgxI5CIB+IChoEDD4A4DOSQ9UCswDCwIAUULRzUMs3b25vnxo0b6v///zfo7e2VIEErFyhEtgOxBKWOyM3NFZo0aZIciH3z5s3vGhoaN0nQnsdEjZAQFhZmhjkCBLZu3foRWd7S0pJz9+7divjMoIpDsrKyhNCiiB+ZP3/+fDkXFxd+fGawUMMhAgICzMh8dXV1TlBUGRgYcFpbW/OA+ITMoIpDPnz48BddDDmqiAFUiZqVK1d+/PPnz398atauXfuO5g5RVVVlY2FhYcQlD8pF6enpT2nqEFCOmTVrFtZo+PLly9++vr4XwHRy5+3bt39pmkaqqqpEpaSk2JDF9uzZ89HV1fU+KeZQVKCByodjx46po4eCsbHxzVu3bv2iW4E2YcIEjNq6q6vrBYmOoCyN1NbWipqZmfGgJ8rm5ubX5JjHRG4CLSsrw4jOxMTER+R6jCyHzJw5U5qHhwelNJ03b97r48ePfyfXISQnVlBVv2XLFhVksWfPnv3S09O7SSiLUjWxYiszysvLn1LgCOKiBpQeQI2cz58/64IaPOhlxqlTp74sWbLkI6XlEQshRxw9elQFV+358+fPf7GxsY8YqACYCCVKfFU4IxBQq5mJ1yHBwcFC+OTZ2NgYw8PD+anhEKLqGlBBBYyiLz9+/PgPbI2J4WsU0cwh6A1hZ2dnXuTowtYoonrUgGpR9NISFDLI/GnTpr2jeYhgq8pBbVB4KZSX94jS8oOsIh5UnoCiBRRdPj4+dyZPnvyOWrmGah0sCgG4iP/LMPDgN8ghJwbYEaDEfwVUBpwDYi0glhkAR4DqqHIgvodcRAsDsRgdHfEHiG/DOAABBgDwy+4qw3JyZwAAAABJRU5ErkJggg=="> to see flickrBomb in action.</p>
+							<div class="old-vs-new">
+							<ul>
+								<li class="old-method first"><h5>The old way</h5><img src="images/old.gif"></li>
+								<li><h5>The new way</h5><img src="flickr://broadway" width="100px" height="100px"></li>
+								<li class="no-caption"><img src="flickr://ballet" width="100px" height="100px"></li>
+								<li class="no-caption"><img src="flickr://tennis" width="100px" height="100px"></li>
+							</ul>
+							</div>
+							<div style="clear:both"><br></div>
+							<h3>
+								1. Set up
+							</h3>
+							<p>
+								Getting flickrBomb to work on your pages is super simple. Make sure jQuery is loaded into your pages, preferably at the bottom.
+							</p>
+							<div class="highlight" style="background: #202020">
+								<pre><span style="color: #6ab825; font-weight: normal">&lt;script </span><span style="color: #bbbbbb">src=</span><span style="color: #ed9d13">"//code.jquery.com/jquery.min.js"</span><span style="color: #6ab825; font-weight: normal">&gt;&lt;/script&gt;</span></pre>
+							</div><br>
+							<p>
+								We recommend using a CDN to host your jQuery for development environments, there are many: <a href="http://code.google.com/apis/libraries/devguide.html#jquery" title="Google Libraries API" rel="nofollow">Google</a>, <a href="http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery" title="jQuery's CDN" rel="nofollow">jQuery</a>, or <a href="http://www.asp.net/ajaxlibrary/CDN.ashx#jQuery_Releases_on_the_CDN_0" title="Microsoft's CDN" rel="nofollow">Microsoft</a> are all reasonable solutions. However, for live sites, it is best to switch out the CDN with a local copy.
+							</p>
+							<p>
+								Next up is to put the flickrBomb css file in the head section of your page.
+							</p>
+								<div class="highlight" style="background: #202020">
+									<pre><span style="color: #6ab825; font-weight: normal">&lt;link</span> <span style="color: #bbbbbb">rel=</span><span style="color: #ed9d13">"stylesheet"</span> <span style="color: #bbbbbb">href=</span><span style="color: #ed9d13">"css/flickrbomb.css"</span><span style="color: #6ab825; font-weight: normal">&gt;</span></pre>
+								</div><br>
+								<p>
+									After including jQuery and the css in the head of your page, all that is left is to include flickrBomb. Put flickrBomb at the bottom of your page, right <strong>before the closing body tag</strong> so as to insure that your page is loaded before flickrBomb is called.
+								</p>
+									<div class="highlight" style="background: #202020">
+										<pre><span style="color: #6ab825; font-weight: normal">&lt;script </span><span style="color: #bbbbbb">src=</span><span style="color: #ed9d13">"js/jquery.flickrBomb.min.js"</span><span style="color: #6ab825; font-weight: normal">&gt;&lt;/script&gt;</span></pre>
+									</div><br>
+									<p>
+										That's all you have to do for set up!
+									</p>
+								</div>
+								<div class="six columns bomber">
+									<a href="http://zurb.com/playground/flickrbomb/flickrbomb.zip" class="nice button radius large" title="minified version">Download flickrBomb</a><br>
+									or get it on <a href="https://github.com/zurb/flickrbomb" rel="nofollow">GitHub</a>.
+								</div>
+								</div>
+								</div>
+		</div><!-- container -->
+		<div class="all-black">
+			<div class="art-style"></div>
+		<div class="container">
+				<div class="row">
+					<div class="sixteen columns">
+						<h3 class="first">
+							2. Implementing
+						</h3>
+						<p>
+							Using flickrBomb in your prototypes is really quite simple. Let's say you're building a website for one of your clients who happens to be building a Kevin Bacon fan site. All you have to do is drop an image tag into your layout and set the source to <span>flickr://Kevin Bacon</span>, then set the desired dimensions.
+						</p>
+							<div class="highlight" style="background: #202020">
+								<pre><span style="color: #6ab825; font-weight: normal">&lt;img</span> <span style="color: #bbbbbb">src=</span><span style="color: #ed9d13">"flickr://Kevin Bacon"</span> <span style="color: #bbbbbb">width=</span><span style="color: #ed9d13">"175px"</span> <span style="color: #bbbbbb">height=</span><span style="color: #ed9d13">"175px"</span><span style="color: #6ab825; font-weight: normal">&gt;</span></pre>
+							</div><br>
+							<div class="row">
+								<div class="three columns">
+									<img src="flickr://Kevin Bacon" width="175px" height="175px">
+								</div>
+								<div class="twelve columns offset-by-one-half">
+									<p>
+										In return, we get a picture that matches the keywords in the source url.
+									</p>
+									<p>
+										We can choose other related images by clicking on the <img class="setup-icon-small" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAApdJREFUeNpiZGBgYALidCD2BmJpBvqBb0B8Foi7gfgxI5CIB+IChoEDD4A4DOSQ9UCswDCwIAUULRzUMs3b25vnxo0b6v///zfo7e2VIEErFyhEtgOxBKWOyM3NFZo0aZIciH3z5s3vGhoaN0nQnsdEjZAQFhZmhjkCBLZu3foRWd7S0pJz9+7divjMoIpDsrKyhNCiiB+ZP3/+fDkXFxd+fGawUMMhAgICzMh8dXV1TlBUGRgYcFpbW/OA+ITMoIpDPnz48BddDDmqiAFUiZqVK1d+/PPnz398atauXfuO5g5RVVVlY2FhYcQlD8pF6enpT2nqEFCOmTVrFtZo+PLly9++vr4XwHRy5+3bt39pmkaqqqpEpaSk2JDF9uzZ89HV1fU+KeZQVKCByodjx46po4eCsbHxzVu3bv2iW4E2YcIEjNq6q6vrBYmOoCyN1NbWipqZmfGgJ8rm5ubX5JjHRG4CLSsrw4jOxMTER+R6jCyHzJw5U5qHhwelNJ03b97r48ePfyfXISQnVlBVv2XLFhVksWfPnv3S09O7SSiLUjWxYiszysvLn1LgCOKiBpQeQI2cz58/64IaPOhlxqlTp74sWbLkI6XlEQshRxw9elQFV+358+fPf7GxsY8YqACYCCVKfFU4IxBQq5mJ1yHBwcFC+OTZ2NgYw8PD+anhEKLqGlBBBYyiLz9+/PgPbI2J4WsU0cwh6A1hZ2dnXuTowtYoonrUgGpR9NISFDLI/GnTpr2jeYhgq8pBbVB4KZSX94jS8oOsIh5UnoCiBRRdPj4+dyZPnvyOWrmGah0sCgG4iP/LMPDgN8ghJwbYEaDEfwVUBpwDYi0glhkAR4DqqHIgvodcRAsDsRgdHfEHiG/DOAABBgDwy+4qw3JyZwAAAABJRU5ErkJggg=="> set up icon and exploring the gallery. When you select an image in the gallery it will automatically be saved to your browsers <a href="http://diveintohtml5.org/storage.html" title="Local Storage" rel="nofollow">local storage</a> so that the next time you come back and visit the page on your machine, your content will persist.
+									</p>
+									<p>
+										If you change the search terms in your image source URL, then your local storage for that image is replaced.
+									</p>
+								</div>
+								<div style="clear:both"></div>
+								<h3>
+									3. How it works
+								</h3>
+								<p><img id="johnstewart" style="width:175px;height:175px" src="flickr://john stewart">
+									flickrBomb uses <a href="http://jquery.com" title="jQuery" rel="nofollow">jQuery</a>, <a href="http://documentcloud.github.com/underscore/" title="Underscore.js" rel="nofollow">Underscore.js</a>, <a href="http://documentcloud.github.com/backbone/" title="Backbone.js" rel="nofollow">Backbone.js</a>, and your browsers <a href="http://documentcloud.github.com/backbone/docs/backbone-localstorage.html" title="Backbone.js Local Storage Adapter" rel="nofollow">local storage</a> to make the magic happen. The plugin scours your html and finds all the image tags that have a source attribute that starts with <span>flickr://</span> and searches flickr for the terms that follow. If it finds anything, the image tag is replaced with flickrbomb's <span>flickrbombContainer</span> div. It does this for each images pointing to flickr://.
+								</p>
+								<h3>
+									4. Customization<br>
+								</h3>
+								<h5>
+									Dimensions
+								</h5>
+								<p>
+									Not only can you set the dimensions for your flickrBomb images in the image tag itself, but you can set default dimensions by setting the width and height of the class <span>flickrbomb</span>. For images without inline dimensions defined, the pluging will use those set in css.
+								</p>
+								<h5>
+									Different images, same search term
+								</h5>
+								<p>
+									To use the same search term and have different images for each, you need to assign each image a unique id.
+								</p>
+									<div class="highlight" style="background: #202020">
+										<pre><span style="color: #6ab825; font-weight: normal">&lt;img</span> <span style="color: #bbbbbb">id=</span><span style="color: #ed9d13">"kevin-bacon-rocking"</span> <span style="color: #bbbbbb">src=</span><span style="color: #ed9d13">"flickr://Kevin Bacon"</span> <span style="color: #bbbbbb">width=</span><span style="color: #ed9d13">"175px"</span> <span style="color: #bbbbbb">height=</span><span style="color: #ed9d13">"175px"</span><span style="color: #6ab825; font-weight: normal">&gt;</span></pre>
+									</div>
+								</div><br>
+								<h5>
+									Flickr API Key
+								</h5>
+								<p>
+									The demo comes with a flickr API key; however, if you are going to be using the plugin heavily, we ask that you include your own API key. In the uncompressed version you can find it by searching for <span>66b5c17019403c96779e8fe88d5b576d</span>. The minified version has a variable at the top that you can set called <span>flickrbombAPIkey</span>.</p>
+								<h3>
+									5. Download
+								</h3>
+								<p>
+									You can download your copy right here or on <a href="https://github.com/zurb/flickrbomb" title="flickrBomb Github" rel="nofollow">GitHub</a>.
+								</p><a href="http://zurb.com/playground/flickrbomb/flickrbomb.zip" class="nice button radius large" title="minified version" rel="nofollow">Download flickrBomb</a><br>
+								<br>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			</div>
+</div>
+<script src="//code.jquery.com/jquery.min.js"></script>
+<script src="js/underscore.js"></script>
+<script src="js/backbone.js"></script>
+<script src="js/backbone-localstorage.js"></script>
+<script src="js/flickrbomb-demo.js"></script>
+<script src="js/app.js"></script>
+</body>
+</html>