Using a baseline grid for text only is pretty easy. But once you venture into images, videos, textareas and some other elemens, you will need a little css to keep everything lined up.

Responsive iframe, textarea, canvas, and svg

The best way to handle iframe textarea canvas svg (or any other challenging element) responsively is to give them a width of 100% and then wrap them inside a parent element to be resized with RDM. Example below:

HTML

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

CSS

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

JS

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

This is all we need to handle these elements.

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.

Also never set cols on a textarea if you want them to be responsive. You can set rows.

Textarea

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

Images

I never use images without putting them inside a figure tag. You are free to use a div as well.

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

Then I style it like this:

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

I do this because I want to use object-fit: cover; on the images. This way I can have the figure resize any way I want, and the img will always stretch proportionately to cover it.

Background Images

Elements with a background image need to be set to display: grid; and given a grid-template-rows height. Otherwise, the resizing wont work correctly.

.feature {
  background-image: url("coolness.jpg");
  background-position: center;
  background-size: cover;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50vh;
}

Here is a list of things to watch out for to prevent unwanted heights from disrupting your baseline rhythm.

Fonts

Believe it or not, different fonts have different settings. Sometimes the various fonts you use can throw off your text-box heights by a pixel or so. The solution is simply to find a font that doesn't do that. For example, Roboto Condensed adds 1px to the height of the text-box when placed next to Roboto Slab in the same line. Go figure?

Borders

Borders effect layout height. Use outline or box-shadow instead.

Buttons

Buttons have default borders and font-sizes. These need to be reset.

Not using box-sizing

Use it to make the box-model behave as expected. Read more here.

Margin-collapsing

This isn't bad, it's just something to understand. Sometimes padding is a better option.

Sup/Sub

These elements effect layout too. Reset these.

Tables

Table borders effect layout. Use outline instead.

Using a crap ton of differing font-sizes and line-heights is going to kill the maintainability of your site. Strive to keep it as straight forward as possible. That's it! Stay awesome!

Here's a link to Report issues and questions.