;
SERVICE

Google’s Web Starter Kit released!

shadow
googlestarterkit

Author :  

shadow
googlestarterkit
  • Recruit
  • BaseStationApp

Last week, Google released their very own Web Starter Kit. This kit includes some of the best practices that you can find in modern web development.  Let’s take a tour through the files and documentation and what you will need to get started. You can take a look at the main page by clicking here. It’s a good idea to look into the source code and see what some of the best web designers and developers have created. Thankfully, the documentation is excellent and the code is commented and easy to understand. If you cannot use it on one of your projects, you should at least see what you can take from it.

Overview

The main page for Google's Web Starter Kit

On this page, Google has listed the following features:

  • Multi-Device Tools
  • Multi-Device Layouts
  • Forms and User Input
  • Images, Audio and Video
  • Optimizing Performance
  • Device Access

The Web Kit keeps performance as a feature, which will definitely help your website’s SEO. Google’s kit also comes with forms and responsive grids.

Getting Started

Google's Getting Started documented is aimed at begginers

Google has an excellent set of tutorials if you are new to HTML/CSS and responsive design. You can find them here:

  1. Create Your Content and Structure
  2. Make It Responsive
  3. Using images effectively
  4. Correct use of images in markup
  5. Image optimization

Documentation

You can find the following sections in the documentation.

Google's Web Starter Kit has a lot of different sections that you can read through

 

Each section contains a wealth of information about each topic as well as links to other resources. If you would like to learn more about responsive design, then the Multi-Device Layouts would be perfect for you. You can learn how to build forms by reading the Forms and User Input page. Images, Video and Audio details multi-media on the website. Device Access explains how to properly handle multimedia on your site. Finally, the Performance documentation is all about the speed of your site and search engine optimization.

Tools

In the Tools section, there are three major sections:

Cloning the Web Starter Kit

The first step is to clone the repository using the following command:

git clone https://github.com/google/web-starter-kit.git

After, you will need to use the following command to change into the folder

cd web-starter-kit/app

You will need to have the following tools in order to build your project:

  • Node
  • Ruby
  • Gulp
  • Sass Gem

Then you can choose from two different layouts: index.html or basic.html. Here are the differences between the two:

This is a graph representing the differences between two starter files: index.html and basic.html

 

To install Gulp, you can read our blog post, or you can follow the directions found on the documentation page
here.

Building the Project

After globallly installing Gulp, run the following command:

Then:

This should install all the dependencies and will create a folder named node_modules in the root directory with all of the gulp modules and plugins. Next, run gulp in the root directory:

Then:

Running the gulp command will create a ‘dist’ folder in the root.

Inside the Template Folder

Let’s take a look at what’s inside the Web Starter kit.

As you can see, there is a gulpfile.js and package.json file included. You can also take a look at the README.md file to read the installation instructions.

Let's take a look at what is inside

Let’s take a look at what’s inside the app folder:

You can find all sorts of files to start building your website within the app folder

 

  • images = JPG, SVG, PNG, GIF files
  • scripts = Javascript files will go in here
  • styles = CSS files go in here

The styleguide folder contains an HTML file that, with Code Snippets toggled on, can show you how to use the components included in the HTML/CSS files.

The Code

With that said, let’s take a look at some of the code. Let’s check out index.html found within the app folder:

The code is fully documented and explained. You should take a look at some of the components that you can use and start building with the index.html file or the basic.html file. Whichever you prefer!

If you have any questions, please leave a comment below.

 

 

 

SERVICE
  • sns