Create the SCSS

Here we will setup the initial styles for the graphic and position it on screen.

Let's begin by taking a look at our current lower-third.1.scss file in the scss folder.

/* SCSS File - lower-third.1.scss */

body {
    background-color: transparent;
    display: flex;
    margin: 0;
}

Now that we have some SCSS, we can start up the sass package with the command defined in the Using SCSS portion of this guide. Setting up SCSS is covered in the Development Setup section. Now let's add our first bit of code to our SCSS file.

The first thing we will add to the file is some additional properties to the body declaration.

body {
    background-color: transparent;
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    height: 100vh;
    width: 100vw;
}

The font-family property will set all the fonts for each child element of the body. In this case, our h1 and p elements. Then the width and height properties are set to 100vw and 100vh so our body element will always cover the entire screen, regardless of the CasparCG's resolution.

Next we will style the main element that has the class .lt-style-one.

.lt-style-one {
    align-self: flex-end;
    display: inherit;
    padding: 4vh 4vw;
}

Since this is a lower third graphic, we will align the main element to the flex-end, or more simply the bottom, of the parent ( body ) element. We want the graphic to be on the bottom portion of the screen, not the absolute bottom so, we will add some padding and give it a value of 4vh 4vw. This states that the top and bottom with have a padding of 4vh while the left and right have a padding of 4vw. Feel free to play around with the values till you find a distance you like.

Next we will style the container for the graphics's contents. That is the div with the class of .graphic.

.lt-style-one {
/* main style definitions */

    .graphic {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr min-content;
        max-width: 33vw;
        position: relative;
        text-align: center;
        overflow: hidden;
    }
}

This div element will have a grid display with only 1 column and 2 rows. The overflow property is hidden so we can animate the child elements from below this element. Let's style the svg next.

.lt-style-one {
/* main style definitions */
    .graphic { /* div container style definitions */ }

    svg {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 5;
    }
}

Our svg element has a position of absolute so it may cover the entire size of the .graphic container. This is also why we set the .graphic's position to relative. Then the z-index insures it will be above all the other elements.

svg {
/* svg element style definitions */

    path {
        fill: none;
        stroke: lightblue;
        stroke-linecap: round;
        stroke-width: .5vw;
    }
}

Then we give the SVG's path some default values so it appears correctly. Increase the stroke-width if you want a thicker border.

.lt-style-one {
/* main style definitions */
    .graphic { /* div container style definitions */ }

    svg { /* svg container style definitions */ }
    
    h1 {
        margin: 0;
        font-size: 2.5vw;
        padding: 1vh 3vw;
    }
    p {
        font-size: 1.5vw;
        margin: 0;
    }
    .subtitle {
        background-color: lightblue;
        padding: .25vw 0;
    }
}

Finally, we will style the h1 and p elements. The .subtitle class is the div that contains our p element. Our graphic should now look something like this.

Graphic after being styled with SASS

We will be settings the colors for the graphic in the JavaScript file so don't worry if they do not match the style you are looking for. That is all we have to do with our SCSS file, time to write some JavaScript!

Resources

• Stroke Line Cap on MDN's website.

• Z Index on MDN's website.