Apply CSS to a content app

This builds on the following intros:

Steps

Script

Let’s apply some CSS to this content app.

Open the IDE and navigate inside our hello-world app. We find the .Inline file with some JavaScript code in it.

var p = ''
p += '<div>'
    p += 'hello world'
p += '</div>'

response.body(p)

Let’s add the class -div to the HTML output. Notice the dash (-). Boomla will prefix it with a unique namespace to avoid conflicts.

Let’s create another file named .InlineStyle, and set its type to css-1. Use the same -div class selector to make our text red.

.-div {
    color: red;
}

Ignore these errors. Let’s see the resulting CSS code. You can see the injected namespace.

Let’s see the website as well.

Looking at the source, you can verify the namespace that was also injected in the HTML code.

Let’s duplicate this app, and change the color in one of them. As you can verify, the namespaces are different, there is no collision.

Let’s apply a background image to one of the contents. Going a level up, a blue background pattern is provided on this filesystem. You can open it through this link. Let’s move this image into the .InlineStyle file. Verify it’s there. Okay. Going back to the .InlineStyle file, let’s reference the image by its name.

.-div {
    color: red;
    background: url(pattern.png);
}

The css-1 interpreter will expand the path for you. Let’s verify it. And the final result.

Please make sure you notice that in Boomla, files may contain other files. This allows us to create self-contained applications. For example, you could move this single file to a different website, and it would work out of the box. To the web, this is something totally new!