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

terminal
  
  $ git clone https://github.com/google/web-starter-kit.git
  

We install the dependencies

terminal
  
  $ npm install
  

We run the staging server

terminal
  
  $ gulp serve
  

Getting our icon webfont

We head over to http://icomoon.io/app/#/select 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:

/app/styles/components/_components/_icons.scss
  
  @font-face {
    font-family:"tticons";
    src:url("../../images/tticons/icomoon.eot");
    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");
    font-weight:normal;
    font-style:normal;
  }

  .tt-icon {
    font-family:"tticons";
  }

  //tt-icons
  $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:

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

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.