Differences from the original version
Last updated
Last updated
Creating new application | GitHub | CM tutorial - Materialize edition
This document is not a tutorial on Materialize bridge base application development - check to learn more. Similarly this document does not teach you about . Instead it will show you how to manually enhance the to use Materialize bridge and render its view using Aurelia Materialize components, instead of using Bootstrap.
The source code for for the Contact Manager tutorial - Materialize edition is , and this article will describe the details of changes applied to the application configuration files.
Add reference to aurelia-materialize-bridge and add three npm scripts (see below for a copy&paste source).
Copy the script lines from here:
These scripts create an AMD-compatible version of Materialize and copy fonts to your app root. See step 2 on how to obtain these scripts.
Why is this necessary? - The original Materialize doesn't play well with AMD loaders. As Aurelia-CLI uses requirejs
(an AMD loader), the sources have to be adopted to be able to run in an AMD environment.
Create a folder tools
in your project root:
Why is this necessary? - Aurelia-CLI doesn't support bundling fonts at the time of writing this article. When running the app without this change, you will get a bunch of 404 - not found
errors when the loads css from Materialize.
These css files contain references to the Roboto font. If not copied, these fonts are still in node_modules
which is not accessible by the application.
Open the folder aurelia_project/tasks
and create a file prepare-materialize.js
Add the following content to this file:
load the copied materialize.min.css
from index.html
:
Here is what happens:
the prepare-materialize task copies fonts to /fonts and css to /styles
in materialize.css fonts are referenced by ../fonts/roboto-something.woff
index.html should now reference the materialize.css from point 1
Set "stub: false
in the loader section:
Add a new bundle materialize-bundle.js
to aurelia.json
:
Note: the rest of the changes required to change the application rendering are of course specific to Aurelia Materialize components. Check the following files for details:
In the former two files the original content is still present for direct comparison.
Instead of using a fork, to create an AMD package of Materialize "on the fly". Someone else .
Copy the two files and into that folder.
Image 2
replaced the original bootstrap list with a Materialize collection.
replaced the contact detail panel with a Materialize card
replaced bootstrap's nav-bar with a Materialize version