Getting Started
Content & Layout
Components
Utilities

Customization

Learn how to create your own style without changing the theme’s core files so you can take advantage of future updates.

SASS

SASS offers powerful customization features to change theme’s entire color scheme or type system by swapping a few SASS variable values. While you can edit a theme’s source files directly, to take advantage of future upgrades, utilize following files to extend and override the theme’s source files with your own custom ones. These files are at ./src/scss/merit/user/

  • _custom-variables.scss - This is variable file for customizing or overriding Bootstrap and merit elements or components.
  • _styles.scss - Create a new style in this file.

merit makes use of SASS !default flag for every SASS variables. This means you can override the variable's default value in your own SASS without modifying either Bootstrap or merit's source code. Define variables as needed with new values, if a variable has already been assigned then it won't be re-assigned by the default values in merit.

Customize Variables

Follwing example illustrates how to utilize /user/_custom-variables.scss to customize primary and secondary colors.

  • open the merit/_variables.scss, look for the $primary and $secondary variable and copy it
  • open the /user/_custom-variables.scss and paste the variable with its value
  • update the value and remove the !default flag
  • make sure you are running Gulp watch tasks described in the build tools page 
$primary:   #0041c2;
$secondary: #6dc4f7;
Create Components

Many of Bootstrap and merit's components are built with a base-modifier class approach. It follows $component-state-property-size naming convention.

  • component is the component name corresponding to the given class name (e.g btn)
  • state is the pseudo-class used to define a state of an element (e.g: hover, active etc.)
  • property is the CSS property being modifed (e.g: color, background etc.)
  • modifier is used to define additional information for the current property (e.g btn-sm)
Customize Maps

Bootstrap and merit utilizes SASS Maps that holds pairs of keys and values, and make it easy to look up a value by its corresponding key. Just like SASS variables, all SASS maps include the !default flag and can be overridden or extended.

To modify an existing color in our $theme-colors map, add the following to /user/_custom-variables.scss. 

$theme-colors: (
"primary": #0041c2,
"danger":  #6dc4f7
);

To add a new color to $theme-colors, add the new key and value, as shown below. 

$theme-colors: (
"brand-color": #0041c2
);

CSS

If you plan on using merit "as is", or only need limited customization, feel free to simply attach the compiled merit.css file to an HTML page.

For similar reasons outlined earlier, you’ll want to add additional CSS files instead of editing merit’s CSS files to make future upgrades easier.

One way to override merit styles is to use a css selector with higher specificity. More specific selectors will take precedence over less specific selectors. We are awlays working on achieving the lowest possible level of style specificity in our components. Following example shows how .custom-card overrides .card. 

.custom-card.card .card-title {
  color: #f5f7f9;
}