This example code’s application.json, shown below, configures the application to use
the HTML Frame Mojit and to include CSS assets. The HTMLFrameMojit creates the
HTML skeleton and includes the CSS in the <head> tag because of the "top" property.
To configure Mojito, place the CSS at the bottom, wrap the css array in the “bottom”
property. You can also include JavaScript by including the path to JavaScript files in a
js array. If you do not use the HTMLFrameMojit, you have to explicitly include
assets as static resources in your template.
To learn more about the HTMLFrameMojit, see the code example
Using the HTML Frame Mojit.

The template index.hb.html below uses the asset index.css, but you do not need to
include them in the file. If you use the same name for your CSS file as the name of your
template and place the CSS in the mojit assets directory, HTMLFrameMojit will
automatically include the assets in the <head> tag for you and then inject the
rendered template into the <body> tag.

For example, the mojits/framed/assets/index.css file will automatically be included in
the <head> tag of the rendered mojits/framed/views/index.hb.html template. When the
index.hb.index template below is rendered, it will be embedded in an HTML skeleton
that includes a <html>, <head>, and <body> tags. If the /assets/index.css
file exists, it will automatically be injected into the <head> tag.

<script type="text/javascript">// Changes background color of the header.// Note: JavaScript code should not be hard//coded into the template. It's done// here to simplify the code example.functionsetColor(id,color){document.getElementById(id).style.backgroundColor=color;}</script><divid="{{mojit_view_id}}"class="mojit"><h2id="header">{{title}}</h2><ulclass="toolbar">
{{#colors}}
<li><ahref="#"onClick="setColor('header','{{rgb}}');">{{id}}</a></li>
{{/colors}}
</ul></div>

Note

If you do not use the HTMLFrameMojit or use CSS with a different name than
the template, you will have to explicitly reference your CSS files in the
assets directory. For example, if you have
/mojits/{mojit_name}/assets/simple.css, you can use the HTML
<link> tag to reference the CSS at the following location:
/static/{mojit_name}/assets/simple.css