Add popover with framework description and link to website

index.html

@@ -38,6 +38,7 @@
 				<div class="span5" id="demos">
 					<h2>Demos</h2>
 					<ul class="nav nav-pills">
+<<<<<<< HEAD
 						<li><a href="architecture-examples/backbone/index.html">Backbone.js</a></li>
 						<li><a href="dependency-examples/backbone_require/index.html">Backbone.js + RequireJS</a></li>
 						<li><a href="architecture-examples/emberjs/index.html">Ember.js</a></li>
@@ -60,6 +61,63 @@
 						<li><a href="architecture-examples/fidel/index.html">Fidel.js</a></li>
 						<li><a href="architecture-examples/jquery/index.html">jQuery</a></li>
 						<li><a href="reference-examples/vanillajs/index.html">Vanilla JS</a></li>
+=======
+						<li>
+							<a href="architecture-examples/backbone/index.html" data-source="http://documentcloud.github.com/backbone/" data-content="Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.">Backbone.js</a>
+						</li>
+						<li>
+							<a href="dependency-examples/backbone_require/index.html" data-source="http://requirejs.org/" data-content="RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.">Backbone.js + RequireJS</a>
+						</li>
+						<li>
+							<a href="architecture-examples/emberjs/index.html" data-source="http://emberjs.com/" data-content="Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.">Ember.js</a>
+						</li>
+						<li>
+							<a href="architecture-examples/javascriptmvc/todo/todo/index.html" data-source="http://javascriptmvc.com/" data-content="JavaScriptMVC is an open-source framework containing the best ideas in jQuery development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.">JavaScriptMVC</a>
+						</li>
+						<li>
+							<a href="architecture-examples/spine/index.html" data-source="http://spinejs.com/" data-content="Spine is a lightweight framework for building JavaScript web applications. Spine gives you an MVC structure and then gets out of your way, allowing you to concentrate on the fun stuff, building awesome web applications.">Spine.js</a>
+						</li>
+						<li>
+							<a href="architecture-examples/sammyjs/index.html" data-source="http://sammyjs.org/" data-content="Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications.">Sammy.js</a>
+						</li>
+					</ul>
+					<ul class="nav nav-pills">
+						<li>
+							<a href="architecture-examples/knockoutjs/index.html" data-source="http://knockoutjs.com/" data-content="Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern">Knockout (MVVM)</a>
+						</li>
+						<li>
+							<a href="architecture-examples/knockback/index.html" data-source="http://kmalakoff.github.com/knockback/" data-content="Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.">Knockback.js</a>
+						</li>
+						<li>
+							<a href="architecture-examples/dojo/index.html" data-source="http://dojotoolkit.org/" data-content="Dojo saves you time and scales with your development process, using web standards as its platform. It’s the toolkit experienced developers turn to for building high quality desktop and mobile web applications.">Dojo</a>
+						</li>
+						<li>
+							<a href="architecture-examples/yuilibrary/index.html" data-source="http://yuilibrary.com/" data-content="YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.">YUILibrary</a>
+						</li>
+						<li>
+							<a href="architecture-examples/angularjs/index.html" data-source="http://angularjs.org/" data-content="What HTML would have been
+had it been designed for web apps">AngularJS</a>
+						</li>
+						<li>
+							<a href="architecture-examples/angularjs_persistencejs/index.html" data-source="http://persistencejs.org/" data-content="persistence.js is an asynchronous Javascript object-database mapper. It has database-independent abstractions and can therefore easily be ported to new databases.">Angular + PersistenceJS</a>
+						</li>
+					</ul>
+					<ul class="nav nav-pills">
+						<li>
+							<a href="architecture-examples/extjs/index.html" data-source="http://www.sencha.com/products/extjs" data-content="Ext JS 4 is the next major advancement in our JavaScript framework. Featuring expanded functionality, plugin-free charting, and a new MVC architecture it's the best Ext JS yet. Create incredible web apps for every browser.">Ext.js</a>
+						</li>
+						<li>
+							<a href="architecture-examples/broke/index.html" data-source="https://github.com/brokenseal/broke-client" data-content="The Broke Javascript Framework is a porting of the fantastic Django Web Framework on Javascript. It summarizes all the best concepts present in Django like url resolving, decoupling, DRY principle, project-specific settings and a pretty simple template engine. It could be put in the big Javascript MVC frameworks group outside there, but, as Django is, this is more a MTV (Model-Template-View) framework.">Broke.js</a>
+						</li>
+						<li>
+							<a href="architecture-examples/fidel/index.html" data-source="http://jga.me/blog/2011/06/10/fidel" data-content="Fidel is a small library for building out ui components (widgets, modules, plugins, whatever you want to call them). It looks very similar to backbone.js and spine.js's controller.">Fidel.js</a>
+						</li>
+						<li>
+							<a href="architecture-examples/closure/index.html" data-source="http://code.google.com/closure/library/" data-content="The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. You can pull just what you need from a large set of reusable UI widgets and controls, and from lower-level utilities for DOM manipulation, server communication, animation, data structures, unit testing, rich-text editing, and more.">Closure</a>
+						</li>
+						<li><a href="architecture-examples/jquery/index.html" data-source="http://jquery.com/" data-content="jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.">jQuery</a></li>
+						<li><a href="reference-examples/vanillajs/index.html" data-source="https://developer.mozilla.org/en/JavaScript" data-content="You know JavaScript right? :P">Vanilla JS</a></li>
+>>>>>>> Add popover with framework description and link to website
 					</ul>
 				</div>
 				<div class="span3">
@@ -105,5 +163,8 @@
 				<p>© TodoMVC. Brought to you by <a href="http://github.com/addyosmani">Addy Osmani</a> (lead), <a href="https://github.com/boushley">Aaron Boushley</a> and <a href="https://github.com/sindresorhus">Sindre Sorhus</a>.</p>
 			</footer>
 		</div>
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+		<script src="site/js/bootstrap.min.js"></script>
+		<script src="site/js/main.js"></script>
 	</body>
 </html>
\ No newline at end of file

site/css/main.css

@@ -73,6 +73,28 @@ h2 {
 	float: none;
 }
 
+#demos ul li a {
+	position: relative;
+}
+
+#demos .popover {
+	margin: 0;
+	cursor: default;
+	color: #333;
+}
+
+#demos .popover-title {
+	padding: 9px 70px 9px 15px;
+}
+
+#demos .popover-title a {
+	font-size: 13px;
+	line-height: 18px;
+	position: absolute;
+	top: 16px;
+	right: 20px;
+}
+
 @media (max-width: 480px) {
 	#demos ul {
 		float: none;

site/js/main.js

+(function() {
+
+	// Demos popover
+	$('#demos li a').popover({
+		placement: 'in right',
+		title: function() {
+			return $(this).text() + '<a href="' + $(this).data('source') + '">Go to site</a>';
+		}
+	}).on('click', '.popover', function(e) {
+		// Prevent click on the popover, but allow links inside
+		if ( e.target.nodeName !== 'A' ) {
+			e.preventDefault();
+		}
+	});
+
+})();
\ No newline at end of file