This is part of Google’s larger Web Fundamentals project. It is basically a recommendation tool used for developing a website that can be accessed across numerous devices.
A web starter kit is similar to a bootstrap, as it provides a platform for re-usable elements as well as a starting place for a web page’s structure. The main advantage it has over the Bootstrap is that it used Gulp to add automated developing tools. The tools generate and optimize your site to meet Google’s pagespeed insights recommendations.
The web starter kit then implements the recommendations developers get from Google. It then packages them into actual code with the required tools to develop apps in the shortest time possible.
Its defaults are developed by Google, but its style sheets are developed using Sass. Also, most of its style variables seem to be defined in _utils.scss. Web starter cannot be used in its default state by any credible developer. With web starter at hand, Google believes that it is ready for the web. This is particularly from a CSS3 and HTML5 point of view.
The starter kit assumes that you have installed Ruby, Gulp.js, Node and Ruby Sass gem on your system. With this, developers can utilize features like HTML minification, automatic image optimization, and LiveReload.
The web starter kit supports modern browsers like Firefox 30 and 31, and IE 10 and 11 as well as most popular mobile browsers.
For the web starter kit, Google doesn’t provide many UI elements and related components. This is unlike other similar projects like Foundation and Bootstrap. The main concept behind the web starter kit is to encourage developers to change the base styles to fit their apps.
Just like the other projects, the starter kit mainly focuses on designs which provide a fluid grid, but this feels more flexible than the other projects.
The web starter kit project is officially in beta. This came as a surprise when Google released the tool only a week before its I/O developer conference which was held in San Francisco.
How to develop a website using the web starter kit
The following are some of the steps which guide you through the processes of developing a new site using the web starter kit. It helps you also to utilize most of the tools which come with the starter kit.
Start a local server
Web developers can start a local HTTP server on the surface using gulp serve. This enables the developer to view the site in a browser while still building the site behind the scenes.
Live reload
This eliminates the traditional refresh processes which include changing the editor, hitting CTRL-R or switching to the browser and waiting for the page to reload.
Live to reload helps you to make changes in the editor and then allows you to see them take effect immediately in any browser which opens your site.
Testing across devices
Developers can test the sites in multiple devices using browser synchronization. Any connected browser can access any shared taps, scrolls or keyboard presses. This can only work when you use gulp serve to run the site.
Automate Prefixing
Web developers targeting a range of browsers are required to use vendor prefixes to ensure they can utilize features in each of them. The prefixing is usually automated by the web starter kit.
Compile your Sass
If a web developer is running the server command and makes any changes to any of the Sass files in the project, they are compiled into CSS and prefixed. After this, the page reloaded with Livereload.
The project is known as a CSS extension language. It’s basically a CSS with additional features. The language assists web developers in structuring the CSS in a modular and reusable version.
