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 started
Getting Web Starter Kit
Get the framework directly by cloning it from github.
git clone https://github.com/google/web-starter-kit.git
The working directory will be: web-starter-kit/app
Installing Dependencies
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:
node -v
ruby -v
sass -node -v
gulp -v
If these commands respond back correctly, you are good to go, else install them as follows:
Nodejs
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
source ~/.rvm/scripts/rvm
rvm requirements
rvm install ruby
rvm use ruby --default
rvm rubygems current
Sass
sudo gem install sass
Gulp
sudo npm install --global gulp
This will install Gulp globally. Next, install the local dependencies Web Starter Kit requires:
cd web-starter-kit
sudo npm install
Finally to build the project, go to web-starter-kit/app and run:
gulp
That’s it! We are good to go now.
Starting the server:
Start the server by typing:
gulp serve
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. 🙂
codefiddle 