The goal is to learn more about Google Material, more about mixins, and find a way to hide and display divs so as to make better use of available real estate.

The Latest Materials

My layout.pug has been changed to support the latest material code:

doctype html
        meta(name='viewport', content='width=device-width, initial-scale=1')
        title= title


        // Material
        link(rel="stylesheet", href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css")
        link(rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Material+Icons')

        // Firebase
        script(defer='', src='https://www.gstatic.com/firebasejs/4.6.2/firebase-app.js')
        script(defer='', src='https://www.gstatic.com/firebasejs/4.6.2/firebase-auth.js')
        script(defer='', src='https://www.gstatic.com/firebasejs/4.6.2/firebase-database.js')

        // Elvenware
        //link(rel='stylesheet', href='/stylesheets/style.css')
        block content

At the bottom of index.pug I link in the JavaScript:


Mixin Base Elements

Material and Bootstrap components often end up with fairly complex CSS implemented by multiple classes with long names. For instance:

<button type="submit" class="mdc-button
           mdc-ripple-surface" data-mdc-auto-init="MDCRipple">
    Print Greeting

There are two problems with this:

  • The components are hard to understand, take up lots of room, and often look ugly on the page
  • We keep applying the same styles to multiple components of the same type. For instance, we end up with multiple buttons like the one above that have the same set of classes applied to them yet differ in only minor ways.

The solution is to declare base mixins for the types we use most often. Consider this baseButton mixin which we might place in a file called base-mixins.pug:

mixin baseButton(id, text)
    button(id=id).mdc-button.mdc-button--raised.mdc-ripple-surface(data-mdc-auto-init='MDCRipple') #{text}

To use it, we can write this:

include base-mixins

  +baseButton('pres-toggle', 'Presidents')

Base Mixins

Here are set of base mixins that we can add to as needed:

mixin baseButton(id, text)
    button(id=id).mdc-button.mdc-button--raised.mdc-ripple-surface(data-mdc-auto-init='MDCRipple') #{text}

mixin baseButton2(id, text)
    button(id=id).mdl-button.mdl-js-button.mdl-button--raised #{elfDatabasePush}

mixin baseInput(id, text)
            | #{text}

Elf Fire Materials

Get the elf-fire-materials.pug file:

wget https://s3.amazonaws.com/bucket01.elvenware.com/mixins/elf-fire-materials.pug

This is similar too, but not identical too, elf-fire-view-mixins.pug.


Material cards are nice ways to display data. Here is an example of how to wrap the Login section in a card. We should do the same for the other sections:

mixin signInCard(title, subTitle, text)
                h1.mdc-card__title.mdc-card__title--large #{title}
                h2.mdc-card__subtitle #{subTitle}
                //+baseButton('elf-sign-in', 'Sign in with Google')

                p#load Firebase SDK Loading…

                p Firebase sign-in status:
                    span#elf-sign-in-status Unknown

                h1 User Details

                    code#elf-user unknown
                    code#elf-details unknown
                    code#elf-oauthtoken unknown

                img#elfPhoto(src='favicon.png', alt='', width="10%", min-width="120px")
                button#elf-sign-in.mdc-button.mdc-button--compact.mdc-card__action Sign In

Save this in a file called card-mixins.pug.

You might use it like this:

include card-mixins
  +signInCard('Google Login', 'Status')

Hide Div

We are out of real estate on our main screen. As a result, we need to find some way to toggle chunks of our screen on and off. The first step is to divide our code up into a series of DIVs, perhaps a bit like what is seen in this version of index.pug:

extends layout
include material-mixins
include elf-fire-materials
include card-mixins

block content


            +signInCard('Google Login', 'Status')


And here is the code to toggle the DIVs. There are just a few lines that I want you to write:

function runToggle() {
    function toggle(id) {
        const div = document.getElementById(id);
        if (div.style.display !== 'none') {
            div.style.display = 'none';
        else {
            div.style.display = 'block';

    const buttonPres = document.getElementById('pres-toggle');
    const buttonUser = document.getElementById('user-toggle');
    const buttonSignIn = document.getElementById('sign-in-toggle');

    buttonPres.onclick = function() {

    // Define Two more on click methods.
    // One for user-toggle and one for sign-in-toggle


onload = function() {

Note that this code, as shown, would allow a user to display all three sections at once. It does not hide any visible sections automatically when a new section is displayed. We probably want that feature, but not yet.

Turn it In

I’m looking for something like this on EC2: