Yesterday (Friday 20 Jun 2014) Google released its web starter kit. Here’s the formal overview of the project (GitHub):
“Web Starter Kit is a starting point for multi-screen web development. It encompasses opinionated recommendations on boilerplate and tooling for building an experience that works great across multiple devices. We help you stay productive and aligned with the best practices outlined in Google’s Web Fundamentals.”
The first thing that comes to one’s mind is – ‘Is this a bootstrap or foundation alternative?‘.
As per the developers the web starter kit is a very basic boilerplate to get started on web development and it is not developed to compete with bootstrap, foundation or any other such framework.
I tried to develop a basic webpage using the web starter kit. The first thing you realize is its very light weight. Its built on node, ruby, sass and gulp. It was my first experience with gulp and have to say I was impressed. The way it organizes the website assets and helps in testing with various browsers is amazing. It even takes care of minifying your css and js files.
Getting Web Starter Kit
Get the framework directly by cloning it from github.
The working directory will be:
As mentioned above, web starter kit is built on node, ruby, sass and gulp, which means you need to have these on your system before kicking-off with the starter kit.
You can check the same with following commands:
sass -node -v
If these commands respond back correctly, you are good to go, else install them as follows:
sudo apt-get install python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs
Ruby (using rvm)
sudo apt-get install curl
\curl -L https://get.rvm.io | bash -s stable
rvm install ruby
rvm use ruby --default
rvm rubygems current
sudo gem install sass
sudo npm install --global gulp
This will install Gulp globally. Next, install the local dependencies Web Starter Kit requires:
sudo npm install
Finally to build the project, go to
web-starter-kit/app and run:
That’s it! We are good to go now.
Starting the server:
Start the server by typing:
This will load you application on the browser. With
gulp serve running, start editing your application in a different tab and observe the changes instantly in the browser.
Here is the demo webpage I made using the web-starter kit. Clone it to get basic idea of how it works. Fork to contribute building a better demo app. 🙂