susy-sassgoogle-web-starter-kit

Susy with Google Web Starter Kit

Wondering where I went wrong? Trying to get Susy working with Google Web Starter Kit.

1.Cloned GWSK into new directory.

2.Ran yarn to install dependencies.

3.Installed Susy:

yarn add susy --dev

4.Added to gulplfile:

/* gulpfile.babel.js */
.pipe($.sass({
  precision: 10,
  includePaths: ['node_modules/susy/sass'] // Added this

5.In my styles file:

/* main.scss */
@import 'susy';
.content {
  @include container;
}
.col {
  @include span(4);
}

6.In the barebones html file:

/* basic.html */
<div class="container">
  <div class="col">Lorem.</div>
  <div class="col">Ab.</div>
  <div class="col">Earum?</div>
</div>

7.Then gulp serve it up.

Yet when basic.html loads the divs are not aligned and there are no errors.

Solution

  • Apparently, I needed to add of 12

    .col {
  @include span(4 of 12);
}

    That and the fact my css select was .content not .container. Duh.