npm install rdmkit-rdm --save

This will install RDM as a dependency.

Now import this along with your frontend code and call the rdm funtion with any selector you would like.

Select all instances of a single DOM element

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

Select all instances of multiple DOM elements

import rdm from "rdmkit-rdm";
rdm("figure, div.boxes, [rel='hero']");

Additional CSS setup

You will need to specify a line-height and font-size on the :root selector in order for this to work. This grid is configured to work on a site that is correctly configured for good typography.

:root {
  line-height: 1.5;
  font-size: 20px;
}

Usage

When the page loads, all elements passed into the rdm() function will be resized to a height closest to a multiple of the baseline unit. This function will also be fired off again on a resize event. This function is debounced, so it wont fire until the user stops resizing the window.

Again, setting type online to a strict baseline rhythm is tough. If you do manage to massage all of your type in to a perfect baseline rhythm, then images and responsive challenges will end up throwing all of your baseline efforts away. rdm() takes care of that.

Warning

Please don't use rdm() on stuff that doesn't need it, like text. Just use it on elements that only hold an image, video, iframe, textarea, canvas or other element that auto resizes their height in a responsive website. Example:

Good usage

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

<div class='resize'>
	<iframe></iframe>
</div>

<figure class='resize'>
	<img src='' alt='' />
</figure>

<div class='resize'>
	<textarea rows=3 placeholder='Text here...'></textarea>
</div>

Notice how I'm not directly resizing the problem element. Rather, I am resizing the wrapper element holding the problem element. When elements like images, iframes, textareas and svgs are set to a width of 100%, they auto-scale to fit their parent's width. As a result, if we resize the height of the parent, these images, iframes, textareas and svgs will scale to fit perfectly inside their parent.

Bad uasge

import rdm from "rdmkit-rdm";
rdm("h3, p");

<h3>Mega heading</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non doloremque aperiam fugit autem nostrum, eum accusantium deserunt rerum nisi corrupti qui vero, voluptas beatae ad, fuga suscipit molestias explicabo iste.</p>

If your text is breaking your baseline, then you either have your text settings messed up, or there is something like an image, iframe, textarea or svg that's throwing things off. Use the inspector to hunt these issue down.