Simulation Development

Styles

Hammer supports the style and link tag within a h:slide. The difference between a regular browser style and link tag is that Hammer will automatically pre-parse the styles and scope them to the slide.

Let's take the following example. If you had the following style declared in your slide...

<style>
    .button {
        ...
    }
</style>

Hammer will change the style to something like this:

<style>
    .slide0 .button {
        ...
    }
</style>

Hammer provides each h:slide with a unique ID. That ID is used to scope styles, therefore ensuring no bleed-over will occur between slides. Now, it should be mentioned that if you have a h:slide contained with another h:slide, the child h:slide will inherit the styles of its parent h:slide.

Typically your mixins will exist in the mixins folder.

timer Exercise: Style a button

Hammer widgets by default do not have any visual styles. The only styles that Hammer provides are ones that help with layout. In this exercise, you will style a button. We will use the style tag, but in cases where you would are styling a common widget, you would use either the link tag or a theme. Styles are really designed for isolated cases or widget that are not going to be used in other parts of the exam.

Launch in your browser http://localhost:8080/sandbox/#/tutorials/mixins/mixins_start. It should open a page with "Styles Tutorial" displayed.

Open sandbox/slides/tutorials/styles/styles_start.html in seed-exam in your editor.

Add the following CSS to this h:slide. This will give h:button a button-like style.

<style>
    .button {
        background: dodgerblue;
        color: white;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 3px;
    }
</style>

Once you refresh, you your browser will display the following: