m.ratio

Create set ratios for content. This module needs to be used with caution, because content that appears within the ratio needs to scale with it’s parent, or it runs the risk of overflowing it’s container.

Block

.ratio

Sets the position to relative, so the content within it can be positioned.

If no modifiers are present on this block, it won’t have a set ratio size, but the inner content will be positioned absolutely.

  • Content to appear within the box.

Elements

    • .ratio__body

    • Required

    Fills the ratio parent space.

Modifiers

    • .ratio--square

    • Enabled

    Forces a square.

    • Inner Content

    • .ratio--video

    • Enabled

    Forces a standard Youtube video ratio.