npm install rdmkit-cpl rdmkit-mzr rdmkit-vrt --save-dev

npm install rdmkit-rdm --save

index.js

import rdm from "rdmkit-rdm";
rdm(".resize");

if (process.env.NODE_ENV === "development") {
  var cpl = require("rdmkit-cpl");
  var mzr = require("rdmkit-mzr");
  var vrt = require("rdmkit-vrt");
  var runVRT = vrt({ belowColor: "#ccc" });
  cpl();
  mzr();

  // Turn on grid after page (re)load
  setTimeout(() => {
    runVRT.belowGrid();
  }, 500);
}

style.css

/* Set baseline height on root */
:root {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 20px;
  line-height: 1.5;
}

/* Reset everything that effects layout height */
* {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: normal;
  border: none;
}

/* Setup box sizing */
*,
*:before,
*:after {
  box-sizing: inherit;
}

/* Fix tables for baseline rhythm */
table {
  border-spacing: 0;
}
td,
th {
  outline: 2px solid #000;
  outline-offset: -1px;
  padding: 0 0.75rem;
}

/* Fix sup and sub for baseline rhythm */
sup {
  display: inline-block;
  transform: translateY(-5px);
  vertical-align: baseline;
}
sub {
  display: inline-block;
  transform: translateY(5px);
  vertical-align: baseline;
}

/* Fix special inputs for baseline rhythm */
input[type='date'],
input[type='month'],
input[type='week'],
input[type='datetime'],
input[type='datetime-local'] {
  line-height: 1;
}

/* Fix kbd for baseline rhythm */
kbd {
  background-color: #ccc;
  border-radius: 3px;
  outline: 1px solid #333;
  box-shadow: 0 1px 1px rgba(0,0,0,0.2), 0 2px 0 0 rgba(255,255,255,0.7) inset;
  color: #333;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 100;
  padding: 0 0.5rem;
  white-space: nowrap;
}

/* optional Resize class for RDM */
.resize {
  overflow: hidden;
  width: 100%;
}

.resize canvas,
.resize iframe,
.resize img,
.resize svg,
.resize textarea {
  width: 100%;
}

.resize img {
  object-fit: cover;
  object-position: 50% 50%;
}

.resize img.gallery {
  height: 100%; 
}