Styling custom tiles and importing custom SCSS

In the previous article, we have set up variables and added custom styling for elements and components. These are lighter customisation tasks, focused on overriding Harmony.

However, some projects and applications will have their own custom tiles and HTML components. This article will show you how to create and import your own custom SCSS stylesheets to your project.

In this demo, we will be added a custom stylesheet to the Codebots Zoo Project. If you want to follow along, you can download the project from the public git repository.

If you have not already, go to clientside/src/app/tiles/custom/chart/chart.tile.component.html and add the following code to create a custom chart tile.

<div class="chart-tile">
    <h2 class="icon-zoo icon-right"> Zoo Chart </h2>
    <p> Welcome to the chart of the stats of our zoo animals. To quickly navigate you've got the following buttons below.
    </p>
    <cb-button-group>
        <button class="btn-zoo" cb-button>Zoo</button>
        <button cb-button>Animals</button>
        <button cb-button>Statistics</button>
        <button cb-button>View Chart</button>
    </cb-button-group>
</div>

Create a new file inside your target application’s scss/pages/ folder, and name it chart.scss. This is where we will add all styles specific to our chart page.
Add the following styles:

.chart-tile {
    height: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    h2 {
        align-items: center;
        justify-content: center;
        align-content: center;
        display: flex;
        margin-bottom: $space-xl;

        &:after {
            font-size: 2rem;
        }
    }

    p {
        text-align: center;
    }

    .btn-group {
        justify-content: center;

        .btn {
            min-width: 40%;
        }
    }
}

In order to see your changes, we will need to import our newly created stylesheet. This will tell the bots to compile the SCSS in our charts.scss file.

Custom import

Each sub-folder includes an import file, where you can add your stylesheet.

Open scss/pages/import-pages and turn on the protected region. Add the following code to import your custom stylesheet.

@import 'chart.scss'