Customizing a template

As described at the beginning of this chapter, any additional CSS should be included in the files contained in the theme/ folder.

theme/ has the same structure of core/, and it’s the place where you can override the core style or extend it by adding custom CSS.

Let’s suppose you want to replace the default color of the <h2> tag only preserving the color of the other headings. Open the theme/base/_typography.scss file and type 👇

h2, .h2 {
  color: get-color(primary, 1);
}

Now, let’s suppose you want to add some shadow to the buttons. Open the theme/elements/_buttons.scss file and type 👇

.button {
  box-shadow: 0 8px 20px rgba(get-color(dark, 1), .1);
}

For the cascading priorities of CSS, all changes made in the theme/ folder will override the core/ style.