Created
May 18, 2016 14:55
-
-
Save ielcoro/63611202f625954a91589fb30fe93441 to your computer and use it in GitHub Desktop.
Aurelia Base Gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class App { | |
configureRouter(config, router) { | |
config.title = 'Aurelia'; | |
config.map([ | |
{ route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome' } | |
]); | |
this.router = router; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function configure(aurelia) { | |
aurelia.use | |
.standardConfiguration() | |
.developmentLogging(); | |
aurelia.use.plugin('aurelia-animator-css'); | |
aurelia.start().then(() => aurelia.setRoot()); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<p>Hola</p> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class Welcome { | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment