Aurelia TypeScript Materialize Template for Plunker

README.md

Aurelia TypeScript Materialize Template

A template just for sharing code, production apps should build js bundles.

This template can be used at [https://plnkr.co/edit/2q0jeg?p=info]

app.html

<template>
    <header>
        <nav>
            <div class="nav-wrapper container">
                <div class="col s12">
                    <a href="#" class="brand-logo">Logo</a>
                    <ul id="nav-mobile" class="right hide-on-med-and-down">
                        <li>
                            <a href="sass.html">Sass</a>
                        </li>
                        <li>
                            <a href="badges.html">Components</a>
                        </li>
                        <li>
                            <a href="collapsible.html">JavaScript</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main>
        <div class="section no-pad-bot">
            <div class="container">
                <br />
                <br />
                <h1 class="header center">Starter Template: ${message}</h1>
                <div class="row center">
                    <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
                </div>
                <div class="row center">
                    
                    <!-- Modal Trigger -->
                    <a class="btn-large waves-effect waves-light modal-trigger" href="#modal1">Open Modal Using Trigger</a>
                    <a class="btn-large waves-effect waves-light" click.delegate="openModal()" >Open Modal Programatically</a>

                    <!-- Modal Structure -->
                    <div id="modal1" class="modal">
                        <div class="modal-content">
                            <h4>Modal Header</h4>
                            <p>A bunch of text</p>
                        </div>
                        <div class="modal-footer">
                            <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
                        </div>
                    </div>
                    
                </div>
                <br />
                <br />
            </div>
        </div>
        <div class="container">
            <!-- Example Promotion Table -->
            <div class="row">
                <div class="col s4">
                    <div class="center promo promo-example">
                        <i class="material-icons">flash_on</i>
                        <p class="promo-caption">Speeds up development</p>
                        <p class="light center">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components.</p>
                    </div>
                </div>
                <div class="col s4">
                    <div class="center promo promo-example">
                        <i class="material-icons">group</i>
                        <p class="promo-caption">User Experience Focused</p>
                        <p class="light center">By utilizing elements and principles of Material Design, we were able to create a framework that focuses on User Experience.</p>
                    </div>
                </div>
                <div class="col s4">
                    <div class="center promo promo-example">
                        <i class="material-icons">settings</i>
                        <p class="promo-caption">Easy to work with</p>
                        <p class="light center">We have provided detailed documentation as well as specific code examples to help new users get started.</p>
                    </div>
                </div>
            </div>
            <!-- /Example Promotion Table -->
        </div>
    </main>
    <footer class="page-footer">
        <div class="container">
            <div class="row">
                <div class="col l6 s12">
                    <h5 class="white-text">Footer Content</h5>
                    <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
                </div>
                <div class="col l4 offset-l2 s12">
                    <h5 class="white-text">Links</h5>
                    <ul>
                        <li>
                            <a class="grey-text text-lighten-3" href="#!">Link 1</a>
                        </li>
                        <li>
                            <a class="grey-text text-lighten-3" href="#!">Link 2</a>
                        </li>
                        <li>
                            <a class="grey-text text-lighten-3" href="#!">Link 3</a>
                        </li>
                        <li>
                            <a class="grey-text text-lighten-3" href="#!">Link 4</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-copyright">
            <div class="container">
                © 2014 Copyright Text
                <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
            </div>
        </div>
    </footer>
</template>

app.ts

export class App {
    message = 'Hello World';
    myModal = null;
    
    attached() {
        this.myModal = $('#modal1');
        this.myModal.modal();
    }
    
    openModal() {
        this.myModal.modal('open');
    }
}

index.html

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Aurelia TypeScript Template</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
    <link rel="stylesheet" href="style.css" />
</head>

<body aurelia-app="main">
    <h1>Loading...</h1>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.19/system.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('aurelia-bootstrapper');
    </script>
</body>

</html>

main.ts

export function configure(aurelia) {
  aurelia.use.basicConfiguration();
  aurelia.start().then(() => aurelia.setRoot());
}

style.css

/* Sticky Footer */
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }
/* /Sticky Footer */

/* Example Promotion Table */
.promo i {
    margin: 40px 0;
    color: #ee6e73;
    font-size: 7rem;
    display: block;
}
/* /Example Promotion Table */

systemjs.config.js

System.config({
  map: {
    'i18next': 'https://unpkg.com/i18next/i18next.min',
    
    'aurelia-binding': 'https://unpkg.com/aurelia-binding/dist/commonjs/aurelia-binding.js',
    'aurelia-bootstrapper': 'https://unpkg.com/aurelia-bootstrapper/dist/commonjs/aurelia-bootstrapper.js',
    'aurelia-dependency-injection': 'https://unpkg.com/aurelia-dependency-injection/dist/commonjs/aurelia-dependency-injection.js',
    'aurelia-dialog': 'https://unpkg.com/aurelia-dialog/dist/commonjs',
    'aurelia-event-aggregator': 'https://unpkg.com/aurelia-event-aggregator/dist/commonjs/aurelia-event-aggregator.js',
    'aurelia-fetch-client': 'https://unpkg.com/aurelia-fetch-client/dist/commonjs/aurelia-fetch-client.js',
    'aurelia-framework': 'https://unpkg.com/aurelia-framework/dist/commonjs/aurelia-framework.js',
    'aurelia-history': 'https://unpkg.com/aurelia-history/dist/commonjs/aurelia-history.js',
    'aurelia-history-browser': 'https://unpkg.com/aurelia-history-browser/dist/commonjs/aurelia-history-browser.js',
    'aurelia-i18n': 'https://unpkg.com/aurelia-i18n/dist/commonjs',
    'aurelia-loader': 'https://unpkg.com/aurelia-loader/dist/commonjs/aurelia-loader.js',
    'aurelia-loader-default': 'https://unpkg.com/aurelia-loader-default/dist/commonjs/aurelia-loader-default.js',
    'aurelia-logging': 'https://unpkg.com/aurelia-logging/dist/commonjs/aurelia-logging.js',
    'aurelia-logging-console': 'https://unpkg.com/aurelia-logging-console/dist/commonjs/aurelia-logging-console.js',
    'aurelia-metadata': 'https://unpkg.com/aurelia-metadata/dist/commonjs/aurelia-metadata.js',
    'aurelia-pal': 'https://unpkg.com/aurelia-pal/dist/commonjs/aurelia-pal.js',
    'aurelia-pal-browser': 'https://unpkg.com/aurelia-pal-browser/dist/commonjs/aurelia-pal-browser.js',
    'aurelia-path': 'https://unpkg.com/aurelia-path/dist/commonjs/aurelia-path.js',
    'aurelia-polyfills': 'https://unpkg.com/aurelia-polyfills/dist/commonjs/aurelia-polyfills.js',
    'aurelia-router': 'https://unpkg.com/aurelia-router/dist/commonjs/aurelia-router.js',
    'aurelia-route-recognizer': 'https://unpkg.com/aurelia-route-recognizer/dist/commonjs/aurelia-route-recognizer.js',
    'aurelia-task-queue': 'https://unpkg.com/aurelia-task-queue/dist/commonjs/aurelia-task-queue.js',
    'aurelia-templating': 'https://unpkg.com/aurelia-templating/dist/commonjs/aurelia-templating.js',
    'aurelia-templating-binding': 'https://unpkg.com/aurelia-templating-binding/dist/commonjs/aurelia-templating-binding.js',
    'aurelia-templating-resources': 'https://unpkg.com/aurelia-templating-resources/dist/commonjs',
    'aurelia-templating-router': 'https://unpkg.com/aurelia-templating-router/dist/commonjs',
    'aurelia-validation': 'https://unpkg.com/aurelia-validation/dist/commonjs',
  },
  packages: {
    '.': {},
    'aurelia-templating-resources': {
      main: 'aurelia-templating-resources.js'
    },
    'aurelia-templating-router': {
      main: 'aurelia-templating-router.js'
    },
    'aurelia-validation': {
      main: 'aurelia-validation.js'
    },
    'aurelia-dialog': {
      main: 'aurelia-dialog.js'
    },
    'aurelia-i18n': {
      main: 'aurelia-i18n.js'
    },
  }
});

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNEXT",
    "module": "commonjs",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}