Layout SCSS

Column classes

The base grid is 12 columns with a consistent gutter — $tn-width--gutter — between each; there is no gutter on the outside. Use .tn-col-- with the number of columns to span, e.g., .tn-col--2.

• Must be inside a cleared box like .tn-container. Helper class .tn-has-clearfix is also available.
• A base class .tn-col is NOT required.
• Columns will always stack below s breakpoint, there are no responsive classes (see below for flow options).
• Add .tn-col--shift- with the number of columns to skip, e.g., .tn-col--shift-1 will set margin-left equal to one column.

Examples

Create two columns equal width

<div class="tn-container">
    <div class="tn-col--6"></div>
    <div class="tn-col--6"></div>
</div>

One container indented by the width of two columns

<div class="tn-container">
    <div class="tn-col--10 tn-col--shift-2"></div>
</div>

Flow mixin

A layout mixin powers the classes above and can be used when semantic classes are preferred.

@mixin
@include tn-flow-box	Applies clearfix to the wrapper container
@include tn-flow($span: 12, $cols: 12)	Applies width and gutter to a column
@include tn-flow-shift($span, $cols: 12)	Applies addt'l margin-left to a column

The default column number is 12 but any number can be calculated by passing the second argument. For example, @include tn-flow(6) === @include tn-flow(1, 2) === @include tn-flow(3, 6). The gutter — $tn-width--gutter — is fixed with all calculations.

Examples

Create two columns equal width

<div class="tn-page">
    <div class="tn-page__section"></div>
    <div class="tn-page__section"></div>
</div>

.tn-page {
  @include tn-flow-box;
  &__section {
    @include tn-flow(6);
  }
}

One container indented by the width of two columns

<div class="tn-section">
    <div class="tn-section__quote"></div>
</div>

.tn-section {
  @include tn-flow-box;
  &__quote {
    @include tn-flow(10);
    @include tn-flow-shift(2);
  }
}

When combined with the @at-media mixin, responsive behaviors can be attached to containers.

One container indented by the width of two columns on desktop

.tn-section {
  @include tn-flow-box;
  &__quote {
    @include tn-flow();
    @include tn-at-media(m) {
      @include tn-flow(10);
      @include tn-flow-shift(2);
    }
  }
}

Helpers

Layout helpers classes are available when necessary. Most often, helpers take the form of .tn-has-{property}-{value}. As always, these should be used sparingly and should NEVER be scripted. These are purely presentational and distinct from scriptable classes which use the .is- prefix.

Helper
.tn-has-clearfix	Clears container when children are floated
.tn-has-display-flex	Sets container to flex
.tn-has-display-block	Sets container to block
.tn-has-align-items-center	Vertically center flexed child containers