Skip to main content

Module: Layout

The layout module provides mixins for setting the display property in combination with line-height and vertical-alignment. Setting them all makes working with the baseline rhythm easier. You'll find it in src/modules/_layout.scss.

  • Mixin display-block is for creating blocks and applies line-height: inherit by default. Inheriting the line height ensures that any inline element with line-height: 0 that is converted to a block will display properly.
  • Mixin display-inline-block is for creating inline blocks and it applies line-height: inherit just like the block mixin. It will also set vertical-align: bottom by default, and this is for making sure an inline block (that already handles it's own vertical sizing) doesn't break the vertical rhythm of its container. If the inline block had a differently sized font than the container, vertical-align: baseline would have shifted the parent element out of vertical rhythm.
  • Mixin display-inline is for creating inline elements and it applies line-height: 0 and vertical-align: baseline by default to make sure inline elements can have a differently sized font compared to their parents without affecting the parent's line-height.