SASS: Replace Foundation grid classes with semantic classes

_layout.scss

@import "foundation/components/grid";

.layout {
  // `layout` container functions as a row
  @include grid-row();
}

.layout-content {
  // Mobile-first: make `layout-container` full-width
  @include grid-column(12);

  // On medium-up size, make `layout-container` 9 columns wide
  @media #{$medium-up} {
    @include grid-column(9);
  }
}
  
.layout-sidebar {
  // Mobile-first: make `layout-sidebar` full-width
  @include grid-column(12);

  // On medium-up size, make `layout-sidebar` 3 columns wide
  @media #{$medium-up} {
    @include grid-column(3);
  }
}

_settings.scss

// b. Grid
// - - - - - - - - - - - - - - - - - - - - - - - - -

$include-html-grid-classes: false;

foundation-grid-classes.html

<div class="row">
  <main class="medium-9 columns">
    <p>Main content</p>
  </main>
  <aside class="medium-3 columns">
    <p>Sidebar</p>
  </aside>
</div>

semantic-layout-classes.html

<div class="layout">
  <main class="layout-content">
    <p>Main content</p>
  </main>
  <aside class="layout-sidebar">
    <p>Sidebar</p>
  </aside>
</div>