The styleguide does not impose any grid system so you can use your favorite.
To display your grid in the styleguide you can use <div class="sg-cell">your text</div> as cell filler inside your cols. (see example below)
When adding new colors, you can find the name of the color by hexadecimal code
If you use web fonts for your site, don't forget to call them as well in the header of the styleguide.
Lorem ipsum dolor sit amet, strong text adipisicing elit. Linked text ratione eum nihil quos earum laudantium, eaque ullam omnis ut odio vero illum vel atque nisi iste tempora. Eius excepturi iste repellat, placeat esse aspernatur obcaecati voluptatem dolorum sapiente doloremque magnam.
Deleniti sapiente blanditiis ipsa quod architecto aliquam asperiores eveniet fugit harum perspiciatis omnis voluptas nam et error itaque impedit, ratione iste accusamus unde, reiciendis quia fuga consequuntur exercitationem dolorem voluptatum. Voluptatibus qui voluptate fuga neque illo debitis corporis cumque. Exercitationem similique, quas obcaecati minima, animi, tenetur ad, quibusdam voluptatum quasi deserunt dolor officia beatae totam odio non? Quam cumque laborum, atque.
<h1 class="title1">H1 code source different from the snippet</h1>
<h2 class="title2">H2 code source different from the snippet</h2>
.class {
display: block;
color: #333;
background: #fff;
}
myFunction() {
console.log('hello world');
}