Grid and Spacing

The styles defined in this repo uphold consistent vertical and horizontal spacing. The layout does not conform to a strict grid in the horizontal direction, but strives to do so in the vertical direction.

To achieve vertical rhythm, the total height of any element should add up to a multiple of the $verticalBase parameter. To achieve consistent shapes of negative space, horizontal margins and paddings follows the same regime. Horizontal widths, on the other hand, should be of variable size. This way the layout will adapt to different screen sizes fluidly.

Our style work adheres to a mobile first strategy, and our code reflects that by specifying media queries operating with min-width rather than max-width tests.

Implementation guidelines

There are several possible strategies to achieve a vertical rhythm. Some of these strategies involve using automatically calculated spacings to adjust for differences between the desired height of an element and a height that fits in the grid. In order to do this in a way that is both human readable and maintainable, we conform to the following guidelines:

• Inline elements have a line-height that is a multiple of $verticalBase.
• Block-level elements are laid out with the border-box box sizing model.
• Block-level elements have vertical margins that add up to a multiple of $verticalBase.
• Block-level elements have vertical paddings that add up to a multiple of $verticalBase.
• Horizontal margins and paddings add up to a multiple of $horizontalBase.

Exceptions

• Elements that are absolutely positions can deviate from these guidelines if absolutely necessary.
• Dynamic images are (for now) allowed to skew the vertical grid.

Examples

A basic element

.example {
    height: 5*verticalBase;
    margin: $verticalBase $horizontalBase;
    padding: $verticalBase $horizontalBase;

    // Since we use the border-box box-sizing model, borders can be set freely
    border: $1px solid $borderColor;
}
                

An element with special typography

.semantic-classname {
    font-size: 3.3rem;
    line-height: 2*$verticalBase;

     // vertical margins or paddings add up to a multiple of $verticalBase,
     // maintaining the vertical flow
     padding-top: 1/3*$verticalBase;
     padding-bottom: 2/3*$verticalBase;
}
                

Moving elements around

.semantic-classname {
    font-size: 3.3rem;
    line-height: 2*$verticalBase;

     // The line-height guideline is pretty strict. To get around some of the
     // restrictions it imposes, it is possible to move elements around with
     // negative margins
     margin-top: -1/3*$verticalBase;
     margin-bottom: 4/3*$verticalBase;
     // Still adding up to a total that is a multiple of $verticalbase
}