ielcoro/app.html

## app.html
<template>
  <require from="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></require>

  <div class="page-host" style="margin-top:50px">
    <router-view ></router-view>
  </div>
</template>

## app.js
export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'welcome'], name: 'welcome',      moduleId: 'welcome',      nav: true, title: 'Welcome' }
    ]);

    this.router = router;
  }
}

## eventSource.html
<template>
  <button click.delegate="send()">Send</button>
</template>

## eventSource.js
import { customElement, inject } from 'aurelia-framework';

@customElement('event-source')
@inject(Element)
export class EventSource {
  element;

  constructor(element) {
    this.element = element;
  }

  send() {
    var sourceEvent = new CustomEvent('sourceEvent', {
            bubbles: true
        });

    this.element.dispatchEvent(sourceEvent);
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></link>
    <link rel="stylesheet" href="styles.css"></link>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.15/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.html
<template>
  <section  class="au-animate">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-3">
          <content select="#navigation"></content>
        </div>
        <div class="col-xs-9">
          <content select="#content"></content>
        </div>
      </div>
    </div>
  </section>
</template>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.use.globalResources('eventSource');
  aurelia.use.plugin('aurelia-animator-css');

  aurelia.start().then(() => aurelia.setRoot());
}

## styles.css
body {
  margin: 0;
}

.splash {
  text-align: center;
  margin: 10% 0 0 0;
  box-sizing: border-box;
}

.splash .message {
  font-size: 72px;
  line-height: 72px;
  text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
  text-transform: uppercase;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.splash .fa-spinner {
  text-align: center;
  display: inline-block;
  font-size: 72px;
  margin-top: 50px;
}

.page-host {
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

@media print {
  .page-host {
    position: absolute;
    left: 10px;
    right: 0;
    top: 50px;
    bottom: 0;
    overflow-y: inherit;
    overflow-x: inherit;
  }
}

section {
  margin: 0 20px;
}

.navbar-nav li.loader {
  margin: 12px 24px 0 6px;
}

.pictureDetail {
  max-width: 425px;
}

/* animate page transitions */
section.au-enter-active {
  -webkit-animation: fadeInRight 1s;
  animation: fadeInRight 1s;
}

div.au-stagger {
  /* 50ms will be applied between each successive enter operation */
  -webkit-animation-delay: 50ms;
  animation-delay: 50ms;
}

.card-container.au-enter {
  opacity: 0;
}

.card-container.au-enter-active {
  -webkit-animation: fadeIn 2s;
  animation: fadeIn 2s;
}

.card {
  overflow: hidden;
  position: relative;
  border: 1px solid #CCC;
  border-radius: 8px;
  text-align: center;
  padding: 0;
  background-color: #337ab7;
  color: rgb(136, 172, 217);
  margin-bottom: 32px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

.card .content {
  margin-top: 10px;
}

.card .content .name {
  color: white;
  text-shadow: 0 0 6px rgba(0, 0, 0, .5);
  font-size: 18px;
}

.card .header-bg {
  /* This stretches the canvas across the entire hero unit */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  border-bottom: 1px #FFF solid;
  border-radius: 6px 6px 0 0;
}

.card .avatar {
  position: relative;
  margin-top: 15px;
  z-index: 100;
}

.card .avatar img {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 2px #FFF solid;
}

/* animation definitions */
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

## welcome.html
<template>
  <p>Hola</p>
  <div>
    <event-source sourceEvent.delegate="eventReceived()"></event-source>
  </div>
</template>

## welcome.js
export class Welcome {
  eventReceived() {
   console.log('Click!');
  }
}
	<template>
	<require from="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></require>

	<div class="page-host" style="margin-top:50px">
	<router-view ></router-view>
	</div>
	</template>
	export class App {
	configureRouter(config, router) {
	config.title = 'Aurelia';
	config.map([
	{ route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome' }
	]);

	this.router = router;
	}
	}
	<template>
	<button click.delegate="send()">Send</button>
	</template>
	import { customElement, inject } from 'aurelia-framework';

	@customElement('event-source')
	@inject(Element)
	export class EventSource {
	element;

	constructor(element) {
	this.element = element;
	}

	send() {
	var sourceEvent = new CustomEvent('sourceEvent', {
	bubbles: true
	});

	this.element.dispatchEvent(sourceEvent);
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></link>
	<link rel="stylesheet" href="styles.css"></link>
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.15/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	<template>
	<section class="au-animate">
	<div class="container-fluid">
	<div class="row">
	<div class="col-xs-3">
	<content select="#navigation"></content>
	</div>
	<div class="col-xs-9">
	<content select="#content"></content>
	</div>
	</div>
	</div>
	</section>
	</template>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging();

	aurelia.use.globalResources('eventSource');
	aurelia.use.plugin('aurelia-animator-css');

	aurelia.start().then(() => aurelia.setRoot());
	}
	body {
	margin: 0;
	}

	.splash {
	text-align: center;
	margin: 10% 0 0 0;
	box-sizing: border-box;
	}

	.splash .message {
	font-size: 72px;
	line-height: 72px;
	text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
	text-transform: uppercase;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	.splash .fa-spinner {
	text-align: center;
	display: inline-block;
	font-size: 72px;
	margin-top: 50px;
	}

	.page-host {
	position: absolute;
	left: 0;
	right: 0;
	top: 50px;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
	}

	@media print {
	.page-host {
	position: absolute;
	left: 10px;
	right: 0;
	top: 50px;
	bottom: 0;
	overflow-y: inherit;
	overflow-x: inherit;
	}
	}

	section {
	margin: 0 20px;
	}

	.navbar-nav li.loader {
	margin: 12px 24px 0 6px;
	}

	.pictureDetail {
	max-width: 425px;
	}

	/* animate page transitions */
	section.au-enter-active {
	-webkit-animation: fadeInRight 1s;
	animation: fadeInRight 1s;
	}

	div.au-stagger {
	/* 50ms will be applied between each successive enter operation */
	-webkit-animation-delay: 50ms;
	animation-delay: 50ms;
	}

	.card-container.au-enter {
	opacity: 0;
	}

	.card-container.au-enter-active {
	-webkit-animation: fadeIn 2s;
	animation: fadeIn 2s;
	}

	.card {
	overflow: hidden;
	position: relative;
	border: 1px solid #CCC;
	border-radius: 8px;
	text-align: center;
	padding: 0;
	background-color: #337ab7;
	color: rgb(136, 172, 217);
	margin-bottom: 32px;
	box-shadow: 0 0 5px rgba(0, 0, 0, .5);
	}

	.card .content {
	margin-top: 10px;
	}

	.card .content .name {
	color: white;
	text-shadow: 0 0 6px rgba(0, 0, 0, .5);
	font-size: 18px;
	}

	.card .header-bg {
	/* This stretches the canvas across the entire hero unit */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	border-bottom: 1px #FFF solid;
	border-radius: 6px 6px 0 0;
	}

	.card .avatar {
	position: relative;
	margin-top: 15px;
	z-index: 100;
	}

	.card .avatar img {
	width: 100px;
	height: 100px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 2px #FFF solid;
	}

	/* animation definitions */
	@-webkit-keyframes fadeInRight {
	0% {
	opacity: 0;
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0)
	}
	100% {
	opacity: 1;
	-webkit-transform: none;
	transform: none
	}
	}

	@keyframes fadeInRight {
	0% {
	opacity: 0;
	-webkit-transform: translate3d(100%, 0, 0);
	-ms-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0)
	}
	100% {
	opacity: 1;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none
	}
	}

	@-webkit-keyframes fadeIn {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	}

	@keyframes fadeIn {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	}
	<template>
	<p>Hola</p>
	<div>
	<event-source sourceEvent.delegate="eventReceived()"></event-source>
	</div>
	</template>
	export class Welcome {
	eventReceived() {
	console.log('Click!');
	}
	}