Overriding Mod Styles

Managing specificity

Before you begin overriding Mod's styles, it's important to consider the order in which you've loaded Mod relative to the rest of your app's CSS. For example, if you're building a Joystick app, you'd want to load Mod before your app's index.css file. This would allow you to write your overrides inside of index.css and ensure they'd work as those styles are loaded after Mod's CSS files.

Once you've confirmed this, the preferred method for overriding Mod's styles is to copy the selector you'd like to modify exactly as it appears in the browser and then write your modified version. For example:

.mod-navigation-bar-marketing-style-1 > .mod-navigation-bar-items > ul > li > a {
  color: rebeccapurple;
}

While this should cover the majority of override needs, in some cases, usage of !important may be required.

Using !important

In some cases, Mod's CSS may prove difficult to override due to its internal specificity. To get around this, it's recommended that—when necessary—you utilize the CSS !important flag on individual styles. For example:

.mod-dropdown {
  background: green !important;
}

Container styles

In addition to individual component styles, Mod's container styles require special attention. Specifically, Mod defines a global CSS variable --mod-container-max-width which is utilized both by Mod's .mod-container class as well as a few other components (e.g., Mod's navigation bar component). To override these styles, it's recommended that you modify:

1. The --mod-container-max-width variable, setting it to whatever value you prefer.
2. The --mod-container-padding-mobile variable (sets container padding up to a screen width of 1040px), setting it to whatever value you prefer.
3. The --mod-container-padding variable (sets container padding from a screen width of 1040px and up), setting it to whatever value you prefer.

In addition to these, you will want to inspect the styles of certain components like the navigation bar component and write overrides for these. These components reference the variables above, but also, include media queries at certain breakpoints to ensure they play nice with other components wrapped with a <div class="mod-container"></div> tag. These breakpoints are hardcoded to a value that's 80px above Mod's default --mod-container-max-width value of 1300px (i.e., 1380px).

As an example, if you wanted to adjust the max container width to be 1200px, you'd need to adjust these breakpoints to be at 1280px.