? Welcome back! Didn't catch Part 1? No worries, you can start at the beginning, or just plunge in here!

Introducing: The PictureFrame Component

Our task in this tutorial will be to build a picture frame component, for styling photographs on a web app. Last time we ended with a snippet a little like the one below. However, in this tutorial, we've changed the "Template" to show instead a pink/salmon "picture frame" of a hippo with a caption below it. To begin this tutorial, copy and paste the following into a new file, and open in your browser:

<template Modulo>
    <Component name="PictureFrame">
        <Template>
            <div style="display: inline-block; border: 10px inset salmon; padding: 10px; margin: 10px; width: 100px; background: pink;">
                <img
                    style="width: 50px;"
                    src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg"
                />
                <p>Photograph: <em>The Return of the Hippo</em></p>
            </div>
        </Template>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-PictureFrame></x-PictureFrame>

Introducing Part 2

In this tutorial, we'll add a Style to plain HTML components, along with a discussion on the first core concept in the Modulo framework: Component Parts, before finally peeking at one more important component part: Props.

First, you might notice something messy about the above code. All the style is rammed into a style= attribute! When coding CSS, placing all our styles in inline style= attributes is often hard to maintain. Modulo supports the "Style" Component Part to let us write CSS code more naturally. What's a Component Part? Well, we'll get to that as well. First, let's get stylish!

Step 1: Creating a Style Component Part

<Template>
    <div class="salmon-frame">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg" />
        <p>Photograph: <em>The Return of the Hippo</em></p>
    </div>
</Template>
<Style>
    img {
        width: 50px;
    }
    .salmon-frame {
        display: inline-block;
        border: 10px inset salmon;
        padding: 10px;
        margin: 10px;
        width: 100px;
        background: pink;
    }
</Style>

Much better! This will look and behave much like a "Style" tag in HTML, allowing you to create classes and selectors to your heart's content.

Step 2: Styling the host component itself

Often, you'll want to style the Web Component itself (in this case, the tag). We can use the special :host selector for this:

<Style>
    :host {
        text-align: center;
    }
    /* ... etc ... */
</Style>

Introducing Component Parts

The central concept to Modulo is that of Component Parts. All component definitions consist of some number of Component Parts. Thus, a component definition is really just a collection of Component Part definitions. "Under the hood" of your component, each Component Part will have a different role to contribute to the functionality of your component.

We've already learned the two most basic Component Part:

1. Template -

   Learn Modulo.js: Part 2

   Style and Props

   <x-PictureFrame image="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hippo_walking.jpg/320px-Hippo_walking.jpg" caption="Hippopotamus out of water" photographer="Lee R. Berger" ></x-PictureFrame>
   Copy after login