Skeleton Navigation: Replacing Bootstrap with Aurelia-Materialize bridge components

This post will guide you through a clean installation of aurelia-skeleton-navigation and changing that example app to use Aurelia-Materialize bridge instead of Bootstrap.

We will use the JSPM version in this guide.

  • Get the skeleton navigation project from here: https://github.com/aurelia/skeleton-navigation/releases
  • Extract the skeleton-esnext directory as this is the one using JSPM. You can also use skeleton-typescript but we’ll discuss esnext here.
  • Change your working directory to the directory you’ve just extracted.

Now you need to install the dependencies for npm and jspm. This might take a while.

Issue the following commands on the console:

$ npm install
$ jspm install

Next, remove Bootstrap:

$ jspm uninstall bootstrap

And remove all references to Bootstrap.
In src/main.js remove the first line:

import 'bootstrap';

In src/app.html remove this line:

<require from="bootstrap/css/bootstrap.css"></require>

Change your package.json and add the following override for jspm (as a child of the “jspm” property):

"overrides": {
  "npm:materialize-css@0.98.2": {
    "main": "dist/js/materialize",
    "format": "global",
    "shim": {
      "dist/js/materialize": {
        "deps": [
          "jquery",
          "../css/materialize.css!"
        ]
      }
    }
  }
}

Remember to adjust Materialize’s version to the one you’re installing – this line:

npm:materialize-css@0.98.2

Now install necessary JSPM plugins, Materialize-CSS and the bridge:

$ jspm install css aurelia-materialize-bridge npm:materialize-css aurelia-event-aggregator

Include a reference to Material Design icons in your index.html:

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

Change your src/main.js to look like this:

export function configure(aurelia) {
 return aurelia.loader.loadModule('materialize-css').then(() => {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()
   .plugin('aurelia-materialize-bridge', bridge => bridge.useAll() );

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

When you start gulp watch now, you should already see a “materialized” navigation skeleton app. What you will see immediately is a pretty borked layout, so let’s fix this.

Replace your src/nav-bar.html template with the following content:

<template bindable="router">
  <md-navbar fixed="true">
    <a href="#" class="brand-logo left"><span class="flow-text">${router.title}</span></a>
    <ul class="right hide-on-med-and-down">
      <li md-waves repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
        <a href.bind="row.href">${row.title}</a>
      </li>
    </ul>
  </md-navbar>
</template>

Replace your src/child-router.html template with the following content:

<template>
  <section class="au-animate">
    <h2>${heading}</h2>
    <div class="row">
      <div class="col m2">
        <md-well router.bind="router"></md-well>
      </div>
      <div class="col m10" style="padding: 0">
        <router-view></router-view>
      </div>
    </div>
  </section>
</template>

Replace your src/users.html template with the following content:

<template>
  <require from="blur-image"></require>

  <section class="au-animate">
    <h2>${heading}</h2>
    <div class="row au-stagger">
      <div class="col s6 m3 card-container au-animate" repeat.for="user of users">
        <div class="card">
          <canvas class="header-bg" width="250" height="70" blur-image.bind="image"></canvas>
            <div class="avatar">
              <img src.bind="user.avatar_url" crossorigin ref="image"/>
            </div>
            <div class="content">
              <p class="name">${user.login}</p>
              <p><a target="_blank" class="btn btn-default" href.bind="user.html_url">Contact</a></p>
            </div>
          </div>
      </div>
    </div>
  </section>
</template>

You get the idea here: replace Bootstrap’s css grid with Materialize’s css grid. 🙂

Next, replace the Bootstrap controls of src/welcome.html with Materialize components:

<template>
  <section class="au-animate">
    <h2>${heading}</h2>
    <form role="form" submit.delegate="submit()">
      <md-input md-label="First Name" md-value.bind="firstName"></md-input>
      <md-input md-label="Last Name" md-value.bind="lastName"></md-input>
      <md-card md-title="Full name">
        <p class="help-block">${fullName | upper}</p>
      </md-card>
      <button md-button md-waves="color: light;" type="submit">Submit</button>
    </form>
  </section>
</template>

Now you have a materialized skeleton navigation.

Note: in some cases (it’s not clear to me when this happens), Materialize will not be initialized completely when Aurelia starts. This leads to several global functions or jQuery plugins not being available at the time a component is initialized.

In this case, you would need to wait for Materialize to finish. I’ve created a small brute-force-ish function to deal with this.

function waitForMaterialize() {
  return new Promise((resolve, reject) => {
    let iterations = 0;
    const handler = window.setInterval(() => {
      iterations++;
      let ma = window.Materialize;
      if (
        ma.elementOrParentIsFixed &&
        ma.escapeHash &&
        ma.fadeInImage &&
        ma.guid &&
        ma.scrollFire &&
        ma.showStaggeredList &&
        ma.toast &&
        ma.updateTextFields
      ) {
        console.log(`waited ${iterations} iterations for Materialize to finish loading`);
        window.clearInterval(handler);
        resolve();
      }
    }, 1);
  });
}

Add this function to main.js and call this method from the “configure” function:

export function configure(aurelia) {
 return aurelia.loader.loadModule('materialize-css').then(() => {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()
   .plugin('aurelia-materialize-bridge', bridge => bridge.useAll() );

   return waitForMaterialize().then(() => {
     return aurelia.start().then(() => aurelia.setRoot());
   });
 });
}

Thanks to Steven Boyd for pointing this out!

 

Introducing Aurelia Kendoui Bridge 1.0 Beta

Aurelia-UI-Toolkits team is happy to present the completely re-architected bridge (interface to KendoUI SDK), which addresses a major performance improvement together with more convenient application configuration.

Briefly stated the new bridge supports the concept of user (application developer) installable KendoUI SDK. Instead of supporting just two KendoUI SDK configurations (KendoUI core and KendoUI PRO) this new bridge is completely agnostic to how many KendoUI widgets the application needs to use. This (code-breaking) change allows developers to use the bridge with any module loader – or not to use a module loader at all.

See this (pre)release note for more details about these breaking changes.

As a result, it is perfectly possible to use just a single Aurelia-KendoUI bridge component in your application, and only that component will be loaded at run time. This will result with the significant reduction in application’s load time.

We have added many more samples, rewritten the installation chapter and added the information about building your applications using SystemJS, Webpack and Aurelia-CLI.

Check the beta version of this new bridge catalog application for details on all these new features.

Welcome to Aurelia UI Toolkits team

We are a group of Aurelia Community enthusiasts trying to do our best to help Aurelia framework adoption. While the Aurelia core team is in charge of the Aurelia framework we are working on its “outer ring” where Aurelia meets the rest of the world.

So, far we created several “Aurelia bridges” – software libraries (aka toolkits), all of which allow Aurelia developers to access well respected JavaScript UI libraries as if they are Aurelia Components:

1. Aurelia-KendoUI Bridge, announced and described this January by Rob Eisenberg, author / architect of Aurelia. This component has since received a very solid adoption (based on the number of downloads) and Telerik’s own post on this bridge.

As all our software products, Aurelia-KendoUI-Bridge is an open source development project maintained on GitHub.

Anyone interested in either using or helping with further development should contact us in Aurelia-KendoUI Gitter chat-room.

Visit this Aurelia-KendoUI-Bridge blog category to find out more.

2. Aurelia-Materialize Bridge,

Visit this Aurelia-Materialize Bridge blog category to find out more.

3. Aurelia-Syncfusion Bridge,

Visit this Aurelia-Syncfusion Bridge blog category to find out more.

***

Aurelia-Tools

In addition to bridges, which are all interface toolkits to existing UI toolkits developed in last 3-4 years, also develop our own tools and libraries. You can see more about that in the Aurelia-Tools blog category.