Giter Club home page Giter Club logo

Web Starter Kit

Overview

Web Starter Kit is an opinionated boilerplate for web development. Tools for building a great experience across many devices and performance oriented. Helping you to stay productive following the best practices outlined in Google's Web Fundamentals. A solid starting point for both professionals and newcomers to the industry.

Quickstart

Download the kit or clone this repository and build on what is included in the app directory.

There are two HTML starting points, from which you can choose:

  • index.html - (IE10+) the default starting point, containing layout and a slide-out menu
  • basic.html - (IE8+) no layout, but still includes our minimal mobile best-practices

Be sure to look over the installation docs to verify your environment is prepared to run WSK. Once you have verified that your system can run WSK, check out the commands available to get started.

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.

In terms of CSS, opting to just use the minimal layout (main.css, h5bp.css) weighs in at ~7KB before modifications are made. Opting to use the Style Guide styles (the default) will take this up to ~39KB. It is your choice which path makes the most sense for your project, however notes on excluding Style Guide styles are in our gulpfile.

Browser Support

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

  • IE9, 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 10

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.

Web Starter Kit and Bootstrap or other CSS libraries?

Web Starter Kit doesn't aim to compete with CSS libraries like Bootstrap, Foundation and Pure. These libraries provide an excellent solution for prototyping your initial project. The biggest challenge they present is it’s almost too easy to get stuck using their look and feel for the lifetime of your site. We think this leads to a poorer experience on the multi-screen web.

Web Starter Kit provides boilerplate styles & a visual style guide for projects, but encourages customising these to fit your own site. This may need a little more work, but the reality is that any serious project is going to have its own look and feel. We want you to feel comfortable changing the kit to suit your own needs.

If you wish to use Bootstrap or other CSS libraries in your Web Starter Kit project, you have the flexibility to do so.

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.

A Boilerplate-only Option

If you would prefer not to use any of our tooling, delete the following files from the project: package.json, gulpfile.js, .jshintrc and .travis.yml. You can now safely use the boilerplate with an alternative build-system or no build-system at all if you choose.

Extras

Optional additions, such as web server configurations, can be found at WSK Extras repository.

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. Our FAQs attempt to answer commonly asked questions about the project.

Contributing

Contributions, questions and comments are all welcome and encouraged. For code contributions to Web Starter Kit, please see our Contribution guide before submitting a pull request. Website related issues should be filed on the Web Fundamentals issue tracker.

License

Apache 2.0
Copyright 2014 Google Inc

Ângela Igreja's Projects

active_admin icon active_admin

The administration framework for Ruby on Rails applications.

afilechooser icon afilechooser

Android library that provides a file explorer to let users select files on external storage.

alphabet icon alphabet

Alphabets sounds for different languages.

android-swipelistview icon android-swipelistview

An Android List View implementation with support for drawable cells and many other swipe related features

android-viewpagerindicator icon android-viewpagerindicator

Paging indicator widgets compatible with the ViewPager from the Android Support Library and ActionBarSherlock. Originally based on Patrik Åkerfeldt's ViewFlow.

angular-desktop-app icon angular-desktop-app

This is a simple application skeleton to create desktop application using AngularJS. This application is using node-webkit as our desktop host, bower to install client-side libraries as well as normal npm modules as supported by node-webkit.

awesome-cv icon awesome-cv

:page_facing_up: Awesome CV is LaTeX template for your outstanding job application

cefsimplesample icon cefsimplesample

Simple sample on how to use Chromium Embedded Framework. More like a Hello World.

ejdb icon ejdb

EJDB — Embedded JSON Database engine

ejdb-benchmark icon ejdb-benchmark

Benchmark of basic CRUD with EJDB, using the same benchmarks that test NeDB

google-api-nodejs-client icon google-api-nodejs-client

Google's officially supported Node.js client library for accessing Google APIs, it comes with OAuth 2.0 support.

gplus-photohunt-client-android icon gplus-photohunt-client-android

PhotoHunt Android is a client for the PhotoHunt example application, and demonstrates how to build a social application that uses Google+ Sign-In, personalization, app activities, over-the-air install, and interactive posts.

gplus-photohunt-server-java icon gplus-photohunt-server-java

PhotoHunt Java runs on Google App Engine and demonstrates how to build a social application that uses Google+ Sign-In, personalization, app activities, over-the-air install, and interactive posts.

graphview icon graphview

Android Graph Library for creating zoomable and scrollable line and bar graphs.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.