title: Using materializecss with aurelia
body: <p>I would like to ask if there's a step by step way to use or configure materializecss with Aurelia. I'm currently able to run my Aurelia app up to the point in the tutorials where my index.html looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
     &lt;meta charset="utf-8" /&gt;
     &lt;link href="jspm_packages/github/dogfalo/materialize@0.97.0/dist/css/materialize.css" rel="stylesheet" /&gt;
     &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
     &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body aurelia-app&gt;
     &lt;script src="jspm_packages/system.js"&gt;&lt;/script&gt;
     &lt;script src="config.js"&gt;&lt;/script&gt;
     &lt;script&gt;
        System.import('aurelia-bootstrapper');
     &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm currently using the ASP .NET 5 Preview empty template and jspm to install Aurelia. I have installed materializecss with<code>jspm install github:dogfalo/materialize</code> and copied some html code from <a href="http://materializecss.com/collapsible.html" rel="nofollow">this link</a> to test if it works.</p>
  
  <p>This code went into my app.html file</p>
  
  <pre><code>&lt;template&gt;
  &lt;ul class="collapsible" data-collapsible="accordion"&gt;
      &lt;li&gt;
          &lt;div class="collapsible-header"&gt;&lt;i class="material-icons"&gt;filter_drama&lt;/i&gt;First&lt;/div&gt;
          &lt;div class="collapsible-body"&gt;&lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="collapsible-header"&gt;&lt;i class="material-icons"&gt;place&lt;/i&gt;Second&lt;/div&gt;
          &lt;div class="collapsible-body"&gt;&lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="collapsible-header"&gt;&lt;i class="material-icons"&gt;whatshot&lt;/i&gt;Third&lt;/div&gt;
          &lt;div class="collapsible-body"&gt;&lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>while my app.html file has this for the test</p>
  
  <pre><code>export class App {
      constructor() {
         this.message = 'test app';
      }
  }
  </code></pre>
  
  <p>and my package.json currently contains these</p>
  
  <pre><code>{
   "jspm": {
     "directories": {
     "baseURL": "wwwroot"
   },
   "dependencies": {
     "aurelia-bootstrapper": "github:aurelia/bootstrapper@^0.16.0",
     "aurelia-framework": "github:aurelia/framework@^0.15.0",
     "dogfalo/materialize": "github:dogfalo/materialize@^0.97.0"
   },
   "devDependencies": {
     "babel": "npm:babel-core@^5.8.22",
     "babel-runtime": "npm:babel-runtime@^5.8.20",
     "core-js": "npm:core-js@^1.1.0"
    }
   }
  }
  </code></pre>
  
  <p>When I browse the index.html file in Chrome, I can see the nicely formatted collapsible but when I click on any of the headers the body would not expand. It seems that the js file is not referenced or was not configured correctly by jspm.</p>