To install MaterialDesignLite on your Pharo image you can just execute the following script:

Metacello new
    repository: 'github://DuneSt/MaterialDesignLite:v2.x.x/src';
    baseline: 'MaterialDesignLite';
    onWarningLog;
    load

Note that you can replace the #v2.x.x tag by a branch as #development or a tag as #v2.0.0. or a commit SHA as 718c34f.

To make your project depend on Material Design for Seaside, just copy the following to your baseline:

spec
    baseline: 'MaterialDesignLite'
    with: [ spec repository: 'github://DuneSt/MaterialDesignLite:master/src' ]

Note that you can replace the #master tag by another branch as #development or a tag as #v1.0.0. or a commit SHA as 718c34f.

We use as a base the files product by Google's Material Design Lite. To have a working Material Design Seaside application we need to add those files. Most of them can be easily added via a file library but one file need to be explicitely added because this file change depending on the colors you wish for your application.

To use MaterialDesign you will need to add JQuery and Material Design library to your application:

(WAAdmin register: self asApplicationAt: 'myApplication')
	addLibrary: JQDeploymentLibrary;
	addLibrary: MDLLibrary

Then you will need to add the css file with the colors. To do so, you will have two options:

• Add it to your file library
• Add it in your #updateRoot:

You can find the files on https://getmdl.io/customize/index.html

They are in the form of: https://storage.googleapis.com/code.getmdl.io/1.3.0/material.XXX-YYY.min.css

• XXX = primary color of the application
• YYY = accent color of the application

As said, the second is to add the right like link in the #updateRoot: methode of your application. (Note that this method will require your application to have an acces to internet to work).

MyApplication>>updateRoot: anHtmlRoot
	    super updateRoot: anHtmlRoot.
	    anHtmlRoot beHtml5.
	    anHtmlRoot stylesheet url: (WAUrl absolute: 'https://storage.googleapis.com/code.getmdl.io/1.3.0/material.XXX-YYY.min.css').

One last step is to define some specific rules in your CSS to make extensions work properly. You should add:

    .mdl-pagination__current{
        box-shadow: inset 0px -4px 0px 0px #XXXXXX !important;
    }

Where `XXXXXX` is the hex code of the accent color of your MDL application. To find your code you can select the #A200 color in the following page: https://www.materialui.co/colors