Grid

The standard 12-column grid provided by Bootstrap is alive & well and empowers us to easily create mobile-first layouts with sensible defaults across many different device-sizes. Please refer to the documentation for the finer points of manipulating columns and grid sizes.

Rather than use the clunky, non-semantic grid selectors like .col-xs-*, etc. to manipulate your columns, it is preferable to encapsulate this logic in your scss files using the provided mixins.

DON’T do this…

<div class="row">
  <div class="col-md-6">...</div>
  <div class="col-md-6">...</div>
</div>

Do this, instead…

<section>
  <article>...</article>
  <aside>...</aside>
</section>

@import 'crds-styles/assets/stylesheets/bootstrap';

section {
  @include make-row;
}

article, aside {
  @include make-md-column(6);
}

The above, recommended approach decouples the presentational markup from the page structure, which allows for more flexibility across breakpoints and easier long-term maintenance. The entire list of grid-specific mixins provided by crds-styles can be viewed on Github.