Marketers Delight Style Guide

Blocks

This box has 2 units of spacing applied to all sides.

Block classes are premade classes that you can use to easily add padding to your custom elements.

Block classes, like Spacer classes, are measured relative to your website's line height as set in Appearance > Customize > Site Design > Fonts & Typography and scale to the most proportional value as you increase/decrease your site's font size.

Even better, once you apply a block class to an element you can assure it will scale down responsively to best match the spacing required for different devices.

Using these classes will save you a ton of time writing your own CSS and keep your design perfectly proportional across all devices!

The best way to calculate each unit is to first know your site's line height. MD's single (default) line height is 26px, which is one unit. So half of that is 13px, double that is 52px, so on and so forth.

As a note, suffixes like tb, lr translate to top/bottom and left/right, so any block classes with those letters will add the designated unit of spacing to those sides only.

Half Blocks

  • .block-half
  • .block-half-bot

Single Blocks

  • .block-single
  • .block-single-tb
  • .block-single-lr
  • .block-single-top
  • .block-single-bot

Middle Blocks

  • .block-mid
  • .block-mid-top
  • .block-mid-bot

Double Blocks

  • .block-double
  • .block-double-tb
  • .block-double-lr
  • .block-double-top
  • .block-double-bot

Triple Blocks

  • .block-triple
  • .block-triple-tb
  • .block-triple-lr
  • .block-triple-top
  • .block-triple-bot

Quadruple Blocks

  • .block-quad
  • .block-quad-tb
  • .block-quad-lr
  • .block-quad-top
  • .block-quad-bot

Full Blocks

Uses these blocks to center the content on a full-width layout.

  • .block-full
  • .block-full-lr

Examples

<div class="box-sec block-double shadow">
	<p class="small-title">This box has 2 units of spacing applied to all sides.</p>
</div>

You can also use different block classes in combination to space opposing sides of a block differently:

<div class="block-double-tb block-single-lr">
	<p class="small-title">This box has 2 units of spacing applied to to top and bottom, and 1 unit of space on the left and right.</p>
</div>

Spacers

Spacer classes are premade classes that you can use to easily add spacing (margin) in between your custom elements.

Spacer classes, like Block classes, are measured relative to your website's line height as set in Appearance > Customize > Site Design > Fonts & Typography and scale to the most proportional value as you increase/decrease your site's font size.

Even better, once you apply a spacer class to an element you can assure it will scale down responsively to best match the spacing required for different devices.

Using these classes will save you a ton of time writing your own CSS and keep your design perfectly proportional across all devices!

To keep the vertical rhythm as consistent as possible, most Spacer classes only add margin to the bottom of an element. As your reader's eyes move down the page, you should design your content to also push downwards and these Spacer classes help you do that.

The two prefixes to look out for here are mb- and mt- which respectively mean margin-bottom and margin-top.

Margin Bottom

  • .mb-small
  • .mb-half
  • .mb-single
  • .mb-mid
  • .mb-double
  • .mb-triple
  • .mb-quad

Margin Top

  • .mt-small
  • .mt-half
  • .mt-single
  • .mt-double

Margin Right

  • .mr-small
  • .mr-half