Follow me if you want to grow your full-stack JavaScript skills with my screencasts and courses.

Google WSK - episode 1

Setting up the environment

We clone the Google Web Starter Kit project

  $ git clone

We install the dependencies

  $ npm install

We run the staging server

  $ gulp serve

Getting our icon webfont

We head over to and select the icons we want, and download the web font.

We copy the generated web font files to ./app/images/tticons.

Integrating the new font

And make the following changes to the icons sass file in order to introduce the webfont, and add classes we can use from html:

  @font-face {
    src:url("../../images/tticons/icomoon.eot?#iefix") format("embedded-opentype"),
      url("../../images/tticons/icomoon.woff") format("woff"),
      url("../../images/tticons/icomoon.ttf") format("truetype"),
      url("../../images/tticons/icomoon.svg?#icons") format("svg");

  .tt-icon {

  $icon-camera: "\e600";
  .icon-camera:before {
    content: "\e600";

  $icon-clock: "\e601";
  .icon-clock:before {
    content: "\e601";

  $icon-calendar: "\e602";
  .icon-calendar:before {
    content: "\e602";

Add samples to style guide

We duplicate some of the existing icons and create these for our icons:

    <div class="g--third">
      <p><div class="code-sample"><i class="icon tt-icon icon-camera"></i></div></p>
    <div class="g--third">
      <p><div class="code-sample"><i class="icon tt-icon icon-clock"></i></div></p>
    <div class="g--third g--last">
      <p><div class="code-sample"><i class="icon tt-icon icon-calendar"></i></div></p>

Wrap up

The web starter kit is beautiful out of the box, but it's meant to be customized. I know the team is working hard on the documentation and guides to show you how to do stuff like this, but in the meanwhile I thought it might be useful to share how to get started on extending the default styles.