How to add custom CSS?

Introduction

Monk uses BEM CSS methodology (commonly referred to as BEM) for classes in HTML and CSS. Here’s an example of what a CSS developer writing in the BEM style might write:

/* Block component */
.btn {}

/* Element that depends upon the block */ 
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}

Conventions:

All the monk CSS classes will have a prefix of mr

<!-- sample monk element -->
<div class="mr-button"></button>

Always use class or id selector to apply custom CSS. Don’t use :first-child, :last-child, element selectors (span div) or any other selectors.

Each offer layout is made up of well defined class names for each element (with mr- prefix) and also some auto generated names. Please use the class names with mr prfix for applying CSS.

Every widget has a div with a unique id. If a style has to be applied only specific to a particular widget then this id can be used.

What happens if you don’t follow the correct convention to write CSS?
We keep improving monk by adding more features and fixing bugs. This means that the order of the elements might change, so it is possible that the first child is a different element from the one on which the style should be applied. However, the class names would never change. Thus to ensure that the correct CSS styles are applied even after structural changes please ensure that you use the correct convention and class names.

Examples

Example HTML: In-page embedded

<div id="mr-div-embedded-cp-any-drawer">
   <div>
      <div></div>
      <div class="fZCiTE cZQShK mr-embedded-widget mr-embedded-widget--cross-sell mr-embedded-widget--line-vertical">
         <div class="fsHKzv mr-embedded-widget__offer-header mr-text">People also bought</div>
         </div>
      </div>
   </div>
</div>

Correct convention: If you wish to change font size of the offer header “People also bought” the following CSS can be applied

// correct usage 1: apply to all embedded layout headers
.mr-embedded-widget__offer-header {
 font-size: 24px;
}

//correct usage 2: apply to all embedded cross sell layout headers
.mr-embedded-widget--cross-sell .mr-embedded-widget__offer-header {
 font-size: 24px;
}

//correct usage 3: apply to line vertical embedded cross sell layout headers
.mr-embedded-widget--line-vertical .mr-embedded-widget__offer-header {
 font-size: 24px;
}

Wrong Convention: Avoid using the following CSS

// wrong usage 1
.fsHKzv {
 font-size: 24px;
}

//wrong usage 2
.mr-embedded-widget > div {
 font-size: 24px;
}

//wrong usage 3
.mr-embedded-widget > :first-child {
 font-size: 24px;
}

Example HTML: Popups

<div class="mr-popup-widget mr-popup-widget--cross-sell-popup mr-popup-widget--central-line">
  <div class="mr-popup-widget__products-container">
    <div class="mr-product-item--cross-sell-popup mr-product-item--central-line">
      <div class="mr-product-item__body-wrapper">
        <div class="MBox__Box-np9k8c-0 bhiYIY mr-product-item__body">
          <div class="MBox__Box-np9k8c-0 eaYOPb mr-product-body__details">
            <div class="MText__MTextCon-he5hrr-0 jwVPjT mr-product-details__product-title mr-text">shorts</div>
            <div>
              <div class="MText__MTextCon-he5hrr-0 hQSImg mr-price-con__offer-price mr-text">₹200</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <button type="button" class="MButton__MButtonCon-u1ld7q-0 kfLIEz mr-actions__atc-button  mr-button"
          data-mr-input="true">Add to cart</button>
      </div>
    </div>
  </div>
</div>

Correct convention: If you wish to change the text color of product title, product price, or change the bg of Add to cart button following CSS can be applied

// correct usage 1: apply to all popup layout products
.mr-product-details__product-title {
 color: blue;
}

//correct usage 2: apply to all popup cross sell layout products
.mr-popup-widget--cross-sell-popup .mr-product-details__product-title,
.mr-popup-widget--cross-sell-popup .mr-price-con__offer-price {
 color: blue;
}

//correct usage 3: apply to line pop up cross sell layout headers
.mr-popup-widget--central-line .mr-product-details__product-title,
.mr-popup-widget--central-line .mr-price-con__offer-price {
 color: blue;
}

.mr-actions__atc-button {
	background: red;
}

.mr-popup-widget--cross-sell-popup .mr-actions__atc-button {
	background: red;
}

.mr-popup-widget--central-line .mr-actions__atc-button {
	background: red;
}

Wrong Convention: Avoid using the following CSS

// wrong usage 1
.jwVPjT {
 color: blue;
}

//wrong usage 2
.mr-popup-widget > div {
 color: blue;
}

//wrong usage 3
.mr-popup-widget > :first-child {
 color: blue;
}

Example HTML: Cart Value Progress Bar

<div id="mr-div-embedded-cp-cvb-drawer">
  <div class="mr-progress-bar-con__content">
    <div class="mr-progress-bar-con__item">
      <div class="mr-progress-bar-item__milestone">₹50</div>
      <img width="44px" height="44px" class="indexesm__StyledImg-u07xae-3 iZuUNG mr-cvb-icon" alt="discount"></img>
    </div>
    <div class="mr-progress-bar-con__item">
      <div class="mr-progress-bar-item__milestone">₹100</div>
      <img width="44px" height="44px" class="indexesm__StyledImg-u07xae-3 iZuUNG mr-cvb-icon" alt="discount"></img>
    </div>
  </div>
</div>

Correct convention: If you wish to change the font weight of milestone text or border of milestone icon following CSS can be applied

.mr-progress-bar-item__milestone {
	font-weight: 500;
}

.mr-cvb-icon {
	border: 2px solid red;
}

Wrong Convention: Avoid using the following CSS

// wrong usage 1
.indexesm__StyledImg-u07xae-3 {
 color: blue;
}

//wrong usage 2
.mr-div-embedded-cp-cvb-drawer > div {
 color: blue;
}

//wrong usage 3
.mr-div-embedded-cp-cvb-drawer > :first-child {
 color: blue;
}

Updated on: 05/07/2023