Go to file

Addy Osmani a9ed96185f Add troubleshooting section.		2014-06-18 09:40:48 +01:00
app	First fixes for #65 - zindex, overflow, min-height	2014-06-18 00:54:55 +01:00
.editorconfig	add meta files to enforce code style	2014-05-16 09:47:19 +02:00
.gitattributes	add meta files to enforce code style	2014-05-16 09:47:19 +02:00
.gitignore	Ignore any .tmp files	2014-05-28 11:56:11 +01:00
.jshintrc	add meta files to enforce code style	2014-05-16 09:47:19 +02:00
LICENSE	Add CC block to end of license file 1/2	2014-06-13 15:07:19 +01:00
README.md	Add troubleshooting section.	2014-06-18 09:40:48 +01:00
gulpfile.js	Addressing HTML minifier feedback	2014-06-12 13:20:49 +01:00
package.json	Adds alternative html minification for #54	2014-06-11 19:09:52 +01:00

README.md

Google Web Starter Kit

A starting point for multi-device web development

Overview

Web Starter Kit is a starting point for multi-screen web development, encompassing opinionated recommendations on boilerplate and tooling for building an experience that works great across multiple devices.

The project aims to align with the mobile web recommendations made by Google's Web Fundamentals and includes boilerplate, tooling and best practices that fall in line with how we think multi-screen webapps should be built.

Features

Mobile-optimized HTML boilerplate
Sexy minimalist layout
Visual component style guide
gulp.js build tooling (optional)
- LiveReload
- Cross-device synchronization of clicks, scrolls, navigation, and form-filling
- Image optimization
- JavaScript minification and optimization
- CSS optimization
- HTML minification
- PageSpeed performance reporting
- CSS autoprefixing

Quickstart

Download the kit or clone this repository and build on what we include in the app directory.

We provide 3 HTML starting points, from which you can choose:

index.html - the default starting point, containing a slide-out menu,
alt-layout.html - features a horizontal navigation menu, or
basic.html - includes no layout.

Tooling

If you would like to use the optional tooling we provide, make sure your system has Node, Ruby and the Sass gem installed.

Next, from your terminal:

# Install gulp.js globally. You will only need to do this once
$ npm install --global gulp

# Install the local dependencies from package.json
$ npm install

# Watch files / LiveReload / Cross-device sync as you develop
$ gulp watch

# Run the deployed version of your app against PageSpeed
$ gulp pagespeed

# Build the current project, ready for deployment
$ gulp

Web Performance

Web Starter Kit strives to give you a high performance starting point out of the box and we actively work on delivering the best PageSpeed Insights score and frame-rate possible.

Browser Support

At present, we officially aim to support the following browsers:

IE10, IE11, IE Mobile 10
FF 30, 31
Chrome 34, 35
Safari 7, 8
Opera 23, 24
iOS Safari 7, 8
Opera Coast
Android / Chrome 4.4, 4.4.3
Blackberry 1.0

This is not to say that Web Starter Kit cannot be used in browsers older than those reflected, but merely that our focus will be on ensuring our layouts work great in the above.

Troubleshooting

If you find yourself running into issues during installation or running the tools, please check our Troubleshooting guide and then open an issue. We would be happy to discuss how they can be solved.

Inspiration

Web Starter Kit is inspired by Mobile HTML5 Boilerplate and Yeoman's generator-gulp-webapp, having taken input from contributors to both projects during development.

Contributing

Contributions, questions and comments are all welcome and encouraged. For code contributions, please see our Contribution guide before submitting a patch.