Google Launches Web Starter Kit: A Multi-Device Boilerplate and Toolkit

By Syed Fazle Rahman
We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now

Google announced a big surprise just a few days ahead of the Google I/O Conference in San Francisco. They have launched a brand new tool called Web Starter Kit, a boilerplate with powerful tools to quickly start your web development projects.

Maybe Google wants the Google I/O attendees to familiarize themselves with the tool before the event starts. Whatever the case, the Web Starter Kit is a powerful tool packed with many modern third-party tools to help you start writing powerful code in minutes.

Google Web Starter Kit

Google has previously released many web foundation tutorials showcasing some of the best practices in modern web development. With this release, they have given away a set of boilerplate templates and tools that focuses more on performance issues and multi-screen development. Google seems to fill the void that most of today’s front-end frameworks have long ignored — web app performance and optimization!

Web Starter Kit, though in beta, comes with features that include:

  • Multi-device responsive boilerplate
  • Cross-device synchronisation
  • Live browser reload
  • Code minification
  • Built-in HTTP Server
  • PageSpeed Insights
  • Sass support

… and more. To make the kit work, your system should have NodeJS, Ruby, and Ruby Sass Gem installed. Installing Gulp is optional.

The kit also includes a multi-screen grid system inspired by frameworks like Bootstrap and Zurb’s Foundation. But unlike such frameworks, this kit doesn’t offer any UI elements and components. Google engineer Addy Osmani said on Hacker news that they don’t intend to compete with Bootstrap in terms of UI components.

The kit comes with two basic templates: index.html and basic.html. The first one, index.html, is the default starting point for the app. It contains responsive design and a slide-out navigation bar.

Responsive Web Starter Kit

The second template, basic.html, can be used as a basic starting point with no slide-out menu. You have to replace this with index.html if you want to keep this as a starting point.

Working with Google’s Web Starter Kit becomes even easier when Gulp is integrated. All Gulp tasks are pre-configured inside the gulpfile.js file found in the root directory. Running the command gulp inside the project folder will generate a distribution-ready folder called /dist. This folder contains minified CSS, JS files, optimized images, and compressed HTML files.

Distribution-ready Folder

Running gulp serve loads the build version of the app in the browser. It uses Live Browser Reloading to refresh the browser when you make any changes to the code.

The Gulp tool also comes pre-configured for the PageSpeed feature too. Once you have started developing applications using the kit, running gulp pagespeed will show the particular page’s performance score.

PageSpeed Feature

One of the best features of the Web Starter Kit is the out-of-the-box, UX Style Guide. It shows basic typography styles, font icons, and CSS classes for the grid system.

Style Guide Feature

Web Starter Kit looks like a promising boilerplate starter kit for any developers of all skill levels. Checking performance, on-the-go optimization, and a responsive grid system are some of the best features it offers.

Be sure to check it out and let us know your views. Will you try Google Starter Kit in your next project?

We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now
  • M S

    Thats *a lot* of dependencies.
    Shouldn’t this be in the Ruby-section?

    • LouisLazaris

      No. You don’t need to know Ruby to use this. I put it under “Web” because it’s not really specific to any technology or language.

      • M S

        But: “To make the kit work, your system should have NodeJS, Ruby, and Ruby Sass Gem installed.”

        So if im using php or java or something else, can i use this or not?
        I don’t need Ruby?


        • LouisLazaris

          Installing those things is usually pretty simple. You don’t need any knowledge of Node or Ruby. I have them both installed and I don’t know the first thing about those technologies. ;)

          And note that, if I’m not mistaken, those dependencies do not require that your app/site be built in those technologies. Those are just needed to get everything built and ready to go. After that, AFAIK, you can build your project using whatever language/technology/platform you want.

          • M S

            So I only need them on the dev-box, not on the live server?

          • LouisLazaris

            Yes, that’s right. Now that being said, I don’t know if you could create a .NET app using this set up. That might be a bit of a stretch.

  • Guest


  • Kevin Vandenborne

    I expected more from Google, when i look at the style guide source code – the first thing i notice is that the indenting isn’t correct everywhere. Take a look at this

    If that is really the style guide, I do not want to use it. That said, I do think there’s various things to learn from the code even if you don’t want to use the whole kit.

  • I am surprised Google hosted the code on GitHub and not Google Code.

  • Tom

    “NodeJS, Ruby, and Ruby Sass Gem installed. Installing Gulp is optional.”

    As usual, Google makes things unnecessarily complicated with dependencies on all these third-party applications, none of which I use on my server. No, I won’t be using it in any projects.

    • I decided to start using SASS, since it is better to add a mixin in page/_sidebar.scss than editing the lines 3510 and 2453 and 4339 of combined-12-10-2012.css
      Well, gulp is a nice tool for front end developers too.

    • Node.js and Ruby will remain in your computer, you don’t need to install them on production.

  • Well maybe their default ident is different from your’s, also if you use PHP Storm or other advanced IDE, you can do auto format thing, to tailor your coding standarts

  • I think it’s very minimal and shows only main principle of where google is going with this. It needs time for some maturity to be really good boilerplate, but I think in short time it will develop into one of best frameworks in line with foundation and bootstrap

  • Olav Alexander Mjelde

    not 2 years ago though