Adding MaterializeCSS to the Aurelia skeleton project

This article still seems to get some visitors, so I have updated it to today's solution.

Get the aurelia-navigation-skeleton. In this blog post I will be using the skeleton-typescript

Open up the folder in your console and type:

jspm i aurelia-materialize-css  

This will install the Aurelia materialize css plugin with jspm. Register the plugin with Aurelia by opening up src/main.ts and add the following .plugin("aurelia-materialize-css"):

export function configure(aurelia: Aurelia) {  
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
+    .plugin("aurelia-materialize-css");

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

Modify bootstrap style to materialze

Open src/nav-bar.html and change it to:

<template bindable="router">  
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">${router.title}</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse">
        <m:icon>menu</m:icon>
      </a>

      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li repeat.for="route of router.navigation" class="${route.isActive ? 'active' : ''}"><a href.bind="route.href">${route.title}</a></li>
      </ul>

      <ul class="side-nav" id="mobile-demo">
        <li repeat.for="route of router.navigation"><a href.bind="route.href">${route.title}</a></li>
      </ul>

    </div>
  </nav>
</template>  

Open src\child-router.html and change it to:

<template>  
  <section class="au-animate row">
      <h2>${heading}</h2>
      <div>
        <div class="col m2">
          <m:link-collection>
            <m:link-collection-item 
               repeat.for="row of router.navigation"
               href.bind="row.href" 
               class="${row.isActive ? 'active' : ''}"></m:link-collection-item>
          </m:link-collection>
        </div>
        <div class="col md10" style="padding: 0">
          <router-view></router-view>
        </div>
      </div>
  </section>
</template>  

Open src\welcome.html and change it to:

<template>  
  <section class="au-animate">
    <h2>${heading}</h2>
    <form role="form" submit.delegate="submit()">     

        <div class="input-field">
          <input id="first_name" type="text" class="validate" value.bind="firstName">
          <label class="${firstName.length > 0 ? 'active' : ''}" for="first_name">First Name</label>
        </div>
        <div class="input-field">
          <input id="last_name" type="text" class="validate" value.bind="lastName">
          <label class="${lastName.length > 0 ? 'active' : ''}" for="last_name">Last Name</label>
        </div>

      <div class="row">
        Full name: ${fullName | upper}
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </section>
</template>  

--Warning--

The instructions below are old and used to be required to install materialize css in some of the pre-beta bits of aurelia.

Installing

Create a new file named materialize-override.json in the root

{
  "files": [
    "dist"
  ],
  "main": "dist/js/materialize",
  "shim": {
    "dist/js/materialize": {
      "deps": [
        "jquery",
        "../css/materialize.css!"
      ],
      "exports": "$"
    }
  },
  "dependencies": {
    "jquery": "github:components/jquery",
    "css": "github:systemjs/plugin-css"
  }
}

Install MaterializeCss with jspm:

jspm install github:Dogfalo/materialize@0.97.0 -o materialize-override.json  

The latest version 0.97.1 is not working, this will only install empty folders, when this is fixed running jspm install materialize might also work.

Open index.html and add a reference to the google font for material icons

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  

Open src/main.ts and replace import 'bootstrap' with import "Dogfalo/materialize"; to load the scripts. This will load the materialize javascript and css assets and add jquery (required by materializeCss)

Run gulp watch everything should work now, but the HTML/CSS still look a bit weird.

Open src/app.html and remove the reference to the bootstrap css <require from="bootstrap/css/bootstrap.css"></require>.

Modify bootstrap style to materialze

Open src/nav-bar.html and change it to:

<template bindable="router">  
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">${router.title}</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>

      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li repeat.for="route of router.navigation" class="${route.isActive ? 'active' : ''}"><a href.bind="route.href">${route.title}</a></li>
      </ul>

      <ul class="side-nav" id="mobile-demo">
        <li repeat.for="route of router.navigation"><a href.bind="route.href">${route.title}</a></li>
      </ul>

    </div>
  </nav>
</template>  

Open src\child-router.html and change it to:

<template>  
  <section class="au-animate row">
      <h2>${heading}</h2>
      <div>
        <div class="col m2">
          <ul class="collection">
            <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
              <a class="collection-item" href.bind="row.href">${row.title}</a>
            </li>
          </ul>
        </div>
        <div class="col md10" style="padding: 0">
          <router-view></router-view>
        </div>
      </div>
  </section>
</template>  

Steps

  • add row to section class
  • modify class names for grid system col-md-2 to col m2 and col-md-10 to col m10
  • modify class well nav nav-pills nav-stacked to class collection
  • add class collection-item to the a element inside the li item

Open src\welcome.html and change it to:

<template>  
  <section class="au-animate">
    <h2>${heading}</h2>
    <form role="form" submit.delegate="submit()">     

        <div class="input-field">
          <input id="first_name" type="text" class="validate" value.bind="firstName">
          <label class="${firstName.length > 0 ? 'active' : ''}" for="first_name">First Name</label>
        </div>
        <div class="input-field">
          <input id="last_name" type="text" class="validate" value.bind="lastName">
          <label class="${lastName.length > 0 ? 'active' : ''}" for="last_name">Last Name</label>
        </div>

      <div class="row">
        Full name: ${fullName | upper}
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </section>
</template>  

Open src\users.html and in the line <div class="col-sm-6 col-md-3 card-container au-animate" repeat.for="user of users"> change col-sm-6 col-md-3 to col s6 m3.