Loving Google’s Web Starter Kit1 min read

For the past few days I have been totally digging Google’s Web Starter Kit. Yes, I have used Yeoman, Slush and other “One Stop – Best Practice” tools, but there is something about WSK that makes you want to use it as a Starter template kit for all your projects.

I have been going through the resources and I would recommend the following way to build a new app. Please feel free to share the way you develop too.

Phase I : What’s out there?

  • First, navigate to Google’s Web Fundamentals. You can find a list of resources on how to build a multi-device web site with a lot of awesome best practices.
  • Next Discover Multi-Device Tools and Install them as needed.

Phase II : Design Needs

Phase III : Development

  • Once you have all the design decisions made, you are ready to begin development. Download a copy of Web Starter kit as mentioned here or you can use slush-webstarterkit to download and install dependencies for you.
  • You can start off the development by picking a layout. Next, follow a good build process and build your project from time to time.
  • When in doubt about the build process, you can always follow this example.

Phase IV : Debugging & Testing

  • WSK provides living style guide templates out-of-the-box. As you keep changing the themes, the style guide keeps updating. So, do keep this page as a baseline while testing component level changes.
  • During development, it is highly recommend that you resize the screen often and check if everything is as expected. It is even better if you can debug/test on actual devices.
  • Once your development is completed, you can start looking at various types of testing.

Phase V : Optimizing and Deploying

  • You can leverage the gulp tools that come out-of-the-box with Web Starter Kit to check the performance.
  • Once you are happy with the performance, look and feel, you can share the dist folder.

Google has put out some really awesome resources to make the web a better place. If you think you can add more value, do check out their GitHub repo and add your contributions.

Thanks for reading! Do comment.