Google Web Starter Kit





Get started building multi-device sites the Google way

Christopher Bloom, Phase2
cbloom@phase2technology.com


Why I care


  • I collect development frameworks as a hobby. Apparently.
  • Examining frameworks teaches us a little more about how to do it right
  • I teach. New frameworks make my job easier
  • Shiny things are fun

    Google's Web Fundamentals


    1. Multi-device tools*
    2. Multi-device layouts
    3. Forms and user input
    4. Images, audio, and video
    5. Optimizing performance
    6. Device access


    Foundation? Ionic? Angular?




    Not really.

    "Web fundamentals" - and "Web starter kit" in particular - are a set of best practices, guides, and tools to make multi-device, responsive websites.

    Web starter kit starts you off with a lot of annoying code prewritten.

    Sound familiar?




    Web starter kit is much much more

    We're going to talk about




    Tooling

    Architecture

    Getting started


    Tools required

    1. Git
    git clone https://github.com/google/web-starter-kit.git
cd web-starter-kit/app
    2. Node
    3. Ruby 
    4. Sass
    5. Gulp 
    sudo npm install --global gulp
cd web-starter-kit
npm install

    Do not resist the modern web toolchain!

    Gulp Goodies on `npm install`


    1. Imagemin
    2. Uglify
    3. Jshint
    4. Browser sync
    5. Many more

    Pick a layout


    /app/index.html = kitchen sink
    /app/basic.html = stripped down

    We'll use index.html. Delete basic.html.


    Build

    Notice no "dist" folder at root of the project:

    Run "gulp" at the root of the project

    comes with its own web server


    gulp serve

    Pagespeed Insights Reporter

    gulp serve
(control+c)
gulp pagespeed

    Serve results to external devices


    gulp serve


    Multi-device debugging!

    So what about the Sass?


    1. Watching/compiling is integrated into the `gulp` and `gulp serve` commands
    2. The file structure is SMACSS-ish, markup/styles are BEM-ish
    3. THREE css files are included by default:

    Yep, that's HTML5 Boilerplate css for some default css.
    Then all of our components (including normalize.css).
    Then a bunch of custom styles to give us the default styles and responsiveness.

    All default editable settings in _utils.scss

    Sass continued


    Modules vs Components, in Google terms:
    Modules = specific, unique, custom site pieces (_page-header.scss)
    Components = generic web structures (_link.scss)

    General goodies

    • Mobile-first
    • Viewport meta
    • Decent robots.txt
    • Icons
    • "Make this site an app on my phone":  mobile-web-app-capable 
    • Footer js scripts
    • Six column grid - very simple with predefined behavior
    • Media queries: small, medium, wide, huge

    Thanks!


    Go try it: 

    https://developers.google.com/web/fundamentals

    Google Web starter kit

    By Christopher Bloom

    Made with Slides.com

    Google Web starter kit

    A quick runthrough of Google's web starter kit

    • 3,672

    More from Christopher Bloom