jacksonp/index.html

## index.html
<!DOCTYPE html>

<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
<style>
.app {
  width: 300px;
  margin: 0 auto;
}
button {
  width: 260px;
}
</style>
<title>Scotch</title>

<div class="app"></div>

<script src="http://yui.yahooapis.com/3.16.0/build/yui/yui-min.js"></script>
<script>
YUI().use('app', function (Y) {
  'use strict';

  // Initial view:
  Y.HomeView = Y.Base.create('homeView', Y.View, [], {
    render : function () {
      var html = '<h1>Scotch Regions</h1>';
      html += '<p><button class="pure-button">Cambletown</button>';
      html += '<p><button class="pure-button pure-button-disabled">Highland</button>';
      html += '<p><button class="pure-button pure-button-disabled">Islands</button>';
      html += '<p><button class="pure-button pure-button-disabled">Islay</button>';
      html += '<p><button class="pure-button pure-button-disabled">Lowland</button>';
      html += '<p><button class="pure-button pure-button-disabled">Speyside</button>';
      this.get('container').setHTML(html);
      return this;
    },
    events : {
      'button' : {
        click : function (e) {
          app.showView('cambletown');
        }
      }
    }
  });

  // A sample view we can go to and back from:
  Y.CambletownView = Y.Base.create('cambletownView', Y.View, [], {
    render : function () {
      var html = '<h1>Cambletown</h1>';
      html += '<p><button class="pure-button">Home</button>';
      html += '<p>At one point Cambletown had over 30 distilleries and ' +
      'proclaimed itself "the whisky capital of the world". However, a focus ' +
      'on quantity rather than quality, and the combination of prohibition ' +
      'and the Great Depression in the United States, led to most ' +
      'distilleries going out of business. Today only three active ' +
      'distilleries remain in Campbeltown: Glen Scotia, Glengyle, and ' +
      'Springbank.<br>- Wikipedia';
      this.get('container').setHTML(html);
      return this;
    },
    events : {
      'button' : {
        click : function (e) {
          app.showView('home');
        }
      }
    }
  });

  var app = new Y.App({
    transitions : true,
    viewContainer : '.app',
    views: {
      home: {
        type     : 'HomeView',
        preserve : true
      },
      cambletown: {
        type   : 'CambletownView',
        parent : 'home'
      }
    }
  });

  app.render();
  app.showView('home');

});
</script>

## snippet1.html
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">

<script src="http://yui.yahooapis.com/3.16.0/build/yui/yui-min.js"></script>

## snippet2.html
<script>
YUI().use('app', function (Y) {

  // Initial view:
  Y.HomeView = Y.Base.create('homeView', Y.View, [], {
    render : function () {
      var html = '<h1>Scotch Regions</h1>';
      html += '<p><button class="pure-button">Cambletown</button>';
      // more html content
      this.get('container').setHTML(html);
      return this;
    },
    events : {
      'button' : {
        click : function (e) {
          app.showView('cambletown');
        }
      }
    }
  });

  // A sample view we can go to and back from:
  Y.CambletownView = Y.Base.create('cambletownView', Y.View, [], {
    render : function () {
      var html = '<h1>Cambletown</h1>';
      html += '<p><button class="pure-button">Home</button>';
      html += '<p>At one point Cambletown [...snip...]';
      this.get('container').setHTML(html);
      return this;
    },
    events : {
      'button' : {
        click : function (e) {
          app.showView('home');
        }
      }
    }
  });

  // Initialize and render the app.
  var app = new Y.App({
    transitions : true,
    viewContainer : '.app',
    views: {
      home: {
        type     : 'HomeView',
        preserve : true
      },
      cambletown: {
        type   : 'CambletownView',
        parent : 'home'
      }
    }
  });

  app.render();
  app.showView('home');

});
</script>
	<!DOCTYPE html>

	<meta charset="utf-8">
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
	<style>
	.app {
	width: 300px;
	margin: 0 auto;
	}
	button {
	width: 260px;
	}
	</style>
	<title>Scotch</title>

	<div class="app"></div>

	<script src="http://yui.yahooapis.com/3.16.0/build/yui/yui-min.js"></script>
	<script>
	YUI().use('app', function (Y) {
	'use strict';

	// Initial view:
	Y.HomeView = Y.Base.create('homeView', Y.View, [], {
	render : function () {
	var html = '<h1>Scotch Regions</h1>';
	html += '<p><button class="pure-button">Cambletown</button>';
	html += '<p><button class="pure-button pure-button-disabled">Highland</button>';
	html += '<p><button class="pure-button pure-button-disabled">Islands</button>';
	html += '<p><button class="pure-button pure-button-disabled">Islay</button>';
	html += '<p><button class="pure-button pure-button-disabled">Lowland</button>';
	html += '<p><button class="pure-button pure-button-disabled">Speyside</button>';
	this.get('container').setHTML(html);
	return this;
	},
	events : {
	'button' : {
	click : function (e) {
	app.showView('cambletown');
	}
	}
	}
	});

	// A sample view we can go to and back from:
	Y.CambletownView = Y.Base.create('cambletownView', Y.View, [], {
	render : function () {
	var html = '<h1>Cambletown</h1>';
	html += '<p><button class="pure-button">Home</button>';
	html += '<p>At one point Cambletown had over 30 distilleries and ' +
	'proclaimed itself "the whisky capital of the world". However, a focus ' +
	'on quantity rather than quality, and the combination of prohibition ' +
	'and the Great Depression in the United States, led to most ' +
	'distilleries going out of business. Today only three active ' +
	'distilleries remain in Campbeltown: Glen Scotia, Glengyle, and ' +
	'Springbank.<br>- Wikipedia';
	this.get('container').setHTML(html);
	return this;
	},
	events : {
	'button' : {
	click : function (e) {
	app.showView('home');
	}
	}
	}
	});

	var app = new Y.App({
	transitions : true,
	viewContainer : '.app',
	views: {
	home: {
	type : 'HomeView',
	preserve : true
	},
	cambletown: {
	type : 'CambletownView',
	parent : 'home'
	}
	}
	});

	app.render();
	app.showView('home');

	});
	</script>