Add CSS

We want to install 3rd party apps from the Boomla Store, so we want to avoid using the same class names as any other app on the same page. The easiest way to achieve this is to automatically namespace all our class names by adding a unique prefix to them. That's what CSS modules do.

Create a style.css file next to our .Request file and set its type to css-2:

/apps/page/style.css           [css-2]

Then add some CSS code to its body, for example:

body {
    background: #6DCCF5;
    margin: 0;
}
.wrapper {
    padding: 15px;
}
.paper {
    margin: 0 auto;
    background: white;
    width: 900px;
    max-width: 100%;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.menu {
}
.contents {
    min-height: 100px;
    padding: 15px;
}

Note that we added declarations for the body tag, which is fine as we are writing a theme. Do not modify the style of the html and body elements if your are writing a content app.

Visit the style.css file in your browser and notice how the class names are namespaced.

Importing a CSS module

To import our CSS file as a CSS module, its type has to be css-2, which is already set.

Then add the following code to the top of the .Request file:

<?
    var css = response.addCssModule(source.select('../style.css'));
?>
  • source points to the file holding the source code of the script, in our case, the /apps/page/.Request file.

  • source.select('../style.css') selects the CSS file and returns a File object. Note the ../, that's because Boomla resolves the path relative to the .Request file. A path like style.css would identify a child of the .Request file (.Request/style.css) but we want its sibling.

  • response.addCssModule():

    • adds a link to the response <head> to load the stylesheet (which will be namespaced upon serving), and

    • returns an object mapping the original class names to the namespaced (prefixed) equivalents.

Using the namespaced class names

We can use the namespaced class names as follows:

<div class="<?== css.wrapper ?>">
    <div class="<?== css.paper ?>">
        <div class="<?== css.menu ?>">
            menu
        </div>
        <div class="<?== css.contents ?>">
            contents
        </div>
    </div>
</div>

For example, <?== css.wrapper ?> will inject the namespaced class name wrapper into the template.

Making it responsive

Let's make our little theme responsive by adding the meta viewport tag to the <head>.

<?
    response.attrStr('head', '<meta name="viewport" content="width=device-width, initial-scale=1">');
    var css = response.addCssModule(source.select('../style.css'));
?>

Note that this will set the value of the head section, so anything in there will be replaced. That's why you should add it before the response.addCssModule() call.

Full code

Here is the full we have so far:

<?
    response.attrStr('head', '<meta name="viewport" content="width=device-width, initial-scale=1">');
    var css = response.addCssModule(source.select('../style.css'));
?>
<div class="<?== css.wrapper ?>">
    <div class="<?== css.paper ?>">
        <div class="<?== css.menu ?>">
            menu
        </div>
        <div class="<?== css.contents ?>">
            contents
        </div>
    </div>
</div>

Reload your website in the browser to see the applied CSS!

Next, we will add a menu.

Subscribe to our newsletter!