web-starter-kit

Web Starter Kit - a workflow for multi-device websites

18,423

3,008

18,423

View on GitHub

Top Related Projects

html5-boilerplate

56,396

A professional front-end template for building fast, robust, and adaptable web apps or sites.

generator-webapp

3,771

A gulp.js generator for modern webapps

TypeScript-React-Starter

11,084

A starter template for TypeScript and React with a detailed README describing how to use the two together.

create-react-app

102,511

Set up a modern web app by running one command.

vue-cli

29,757

🛠️ webpack-based tooling for Vue.js Development

gatsby

55,199

The best React-based framework with performance, scalability and security built in.

Quick Overview

Google Web Starter Kit is a boilerplate and tooling for multi-device development. It provides a solid foundation for building modern web projects with a focus on performance and best practices. The kit includes a responsive layout, a build process, and a set of tools to help developers create high-quality web applications.

Pros

Optimized for performance and best practices out of the box
Includes a responsive layout that works across multiple devices
Provides a robust build process with Gulp for task automation
Incorporates modern web development tools and technologies

Cons

May be overkill for simple projects or static websites
Learning curve for developers unfamiliar with the included tools
Limited customization options compared to more flexible frameworks
No longer actively maintained (last update was in 2018)

Getting Started

To get started with Google Web Starter Kit:

Clone the repository:

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

Install dependencies:
```
cd web-starter-kit
npm install
```
Start the local development server:
```
npm start
```
Build and optimize your site for production:
```
npm run build
```

These steps will set up the project and allow you to start developing with Google Web Starter Kit. The development server includes live reloading, and the build process optimizes your assets for production.

Competitor Comparisons

html5-boilerplate

56,396

A professional front-end template for building fast, robust, and adaptable web apps or sites.

Pros of HTML5 Boilerplate

More lightweight and flexible, allowing for easier customization
Longer history and larger community support
Includes a comprehensive .htaccess file for Apache server configurations

Cons of HTML5 Boilerplate

Less opinionated about build tools and workflow
Fewer built-in UI components and styles
Requires more manual setup for modern development practices

Code Comparison

HTML5 Boilerplate (index.html):

<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">

Web Starter Kit (index.html):

<!doctype html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">

Both projects provide a solid starting point for web development, but they cater to different needs. HTML5 Boilerplate offers a more barebones approach, giving developers greater flexibility in choosing their tools and workflows. Web Starter Kit, on the other hand, provides a more opinionated and feature-rich starting point, including a build process and UI components out of the box. The choice between the two depends on the developer's preferences and project requirements.

generator-webapp

3,771

A gulp.js generator for modern webapps

Pros of generator-webapp

More flexible and customizable, allowing developers to choose specific features and tools
Regularly updated with the latest web development best practices and tools
Supports a wider range of build tools and preprocessors

Cons of generator-webapp

Steeper learning curve, especially for beginners
Requires more setup and configuration compared to Web Starter Kit
May generate more complex project structures, which can be overwhelming for simple projects

Code Comparison

generator-webapp:

gulp.task('styles', () => {
  return gulp.src('app/styles/*.scss')
    .pipe($.plumber())
    .pipe($.sass.sync({
      outputStyle: 'expanded',
      precision: 10,
      includePaths: ['.']
    }).on('error', $.sass.logError))
    .pipe(gulp.dest('.tmp/styles'));
});

Web Starter Kit:

gulp.task('styles', () => {
  return gulp.src([
    'app/styles/**/*.scss',
    'app/styles/**/*.css'
  ])
    .pipe($.newer('.tmp/styles'))
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      precision: 10
    }).on('error', $.sass.logError))
    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
    .pipe(gulp.dest('.tmp/styles'))
    .pipe($.concat('main.min.css'))
    .pipe($.cssnano())
    .pipe($.size({title: 'styles'}))
    .pipe($.sourcemaps.write('./'))
    .pipe(gulp.dest('dist/styles'));
});

Both examples show Gulp tasks for processing styles, but generator-webapp's approach is simpler and more focused, while Web Starter Kit includes additional features like sourcemaps and minification in a single task.

TypeScript-React-Starter

11,084

A starter template for TypeScript and React with a detailed README describing how to use the two together.

Pros of TypeScript-React-Starter

Integrates TypeScript with React, providing type safety and improved developer experience
Includes popular tools like Redux and React Router out of the box
Offers a more comprehensive setup for modern React applications

Cons of TypeScript-React-Starter

Steeper learning curve due to TypeScript and additional libraries
Less focus on performance optimization compared to Web Starter Kit
May be overkill for simpler projects or those not requiring TypeScript

Code Comparison

TypeScript-React-Starter:

import * as React from 'react';
import { connect } from 'react-redux';

interface Props {
  // Component props
}

class MyComponent extends React.Component<Props> {
  // Component logic
}

Web Starter Kit:

import { MDCRipple } from '@material/ripple';

const ripple = new MDCRipple(document.querySelector('.mdc-button'));

// Add event listeners and other functionality

The TypeScript-React-Starter code showcases TypeScript integration with React and Redux, while Web Starter Kit focuses on vanilla JavaScript and Material Design components.

TypeScript-React-Starter is better suited for large-scale React applications requiring type safety, while Web Starter Kit is more appropriate for simpler projects focusing on performance and Material Design principles.

create-react-app

102,511

Set up a modern web app by running one command.

Pros of Create React App

Focused on React development, providing a streamlined setup for React projects
Includes hot reloading and built-in testing tools
Regularly updated with the latest React features and best practices

Cons of Create React App

Less flexible for non-React projects or custom configurations
Larger initial bundle size due to included React dependencies
Steeper learning curve for developers new to React ecosystem

Code Comparison

Web Starter Kit:

<html>
  <head>
    <link rel="stylesheet" href="styles/main.css">
  </head>
  <body>
    <script src="scripts/main.js"></script>
  </body>
</html>

Create React App:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Summary

Web Starter Kit is a more general-purpose boilerplate for web development, while Create React App is specifically tailored for React applications. Web Starter Kit offers more flexibility for various project types but requires more manual setup. Create React App provides a more opinionated and streamlined approach for React development, with less initial configuration required but potentially less customization options.

vue-cli

29,757

🛠️ webpack-based tooling for Vue.js Development

Pros of Vue CLI

More comprehensive tooling ecosystem specifically for Vue.js development
Offers a plugin-based architecture for easy extensibility
Provides an interactive project scaffolding process

Cons of Vue CLI

Focused solely on Vue.js, less flexible for other frameworks
Steeper learning curve for beginners due to more advanced features
Requires Node.js environment to run

Code Comparison

Web Starter Kit (gulpfile.js):

gulp.task('styles', () => {
  return gulp.src('./app/styles/*.scss')
    .pipe($.sass().on('error', $.sass.logError))
    .pipe(gulp.dest('./dist/styles'));
});

Vue CLI (vue.config.js):

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
};

Summary

Web Starter Kit is a more general-purpose boilerplate for web development, while Vue CLI is specifically tailored for Vue.js projects. Vue CLI offers more advanced features and a plugin system, but is limited to Vue development. Web Starter Kit provides a simpler starting point for various web projects but may require more manual configuration for complex setups. The choice between them depends on the project requirements and the developer's familiarity with Vue.js.

gatsby

55,199

The best React-based framework with performance, scalability and security built in.

Pros of Gatsby

More powerful and feature-rich, offering a complete framework for building static websites and apps
Extensive plugin ecosystem for easy integration of various functionalities
Built-in performance optimizations, including code splitting and lazy loading

Cons of Gatsby

Steeper learning curve, especially for developers new to React and GraphQL
Potentially slower build times for large sites due to its complex data layer
More opinionated structure, which may limit flexibility for some projects

Code Comparison

Web Starter Kit (Gulp-based build process):

gulp.task('styles', () => {
  return gulp.src('./app/styles/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(gulp.dest('./dist/styles'));
});

Gatsby (React-based component):

import React from "react"
import { graphql } from "gatsby"

export default function Template({ data }) {
  const { markdownRemark } = data
  const { frontmatter, html } = markdownRemark
  return (
    <div>
      <h1>{frontmatter.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  )
}

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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.

Features

Feature	Summary
Responsive boilerplate	A responsive boilerplate optimized for the multi-screen web. Powered by Material Design Lite. You're free to use either this or a completely clean-slate via basic.html.
Sass support	Compile Sass into CSS with ease, bringing support for variables, mixins and more. (Run `gulp serve` or `gulp` for production)
Performance optimization	Minify and concatenate JavaScript, CSS, HTML and images to help keep your pages lean. (Run `gulp` to create an optimised version of your project to `/dist`)
Code Linting	JavaScript code linting is done using ESLint - a pluggable linter tool for identifying and reporting on patterns in JavaScript. Web Starter Kit uses ESLint with eslint-config-google, which tries to follow the Google JavaScript style guide.
ES2015 via Babel 6.0	Optional ES2015 support using Babel. To enable ES2015 support remove the line `"only": "gulpfile.babel.js",` in the .babelrc file. ES2015 source code will be automatically transpiled to ES5 for wide browser support.
Built-in HTTP Server	A built-in server for previewing your site locally while you develop and iterate
Live Browser Reloading	Reload the browser in real-time anytime an edit is made without the need for an extension. (Run `gulp serve` and edit your files)
Cross-device Synchronization	Synchronize clicks, scrolls, forms and live-reload across multiple devices as you edit your project. Powered by BrowserSync. (Run `gulp serve` and open up the IP provided on other devices on your network)
Offline support	Thanks to our baked in Service Worker pre-caching, sites deploying `dist` to a HTTPS domain will enjoy offline support. This is made possible by sw-precache.
PageSpeed Insights	Web performance metrics showing how well your site performs on mobile and desktop (Run `gulp pagespeed`)

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 - the default starting point, containing Material Design layout.
basic.html - 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. Our median Web Page Test scores for the default template have a Speed Index of ~1100 (1000 is ideal) and a repeat-visit Speed Index of ~550 thanks to Service Worker precaching.

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Chrome
Edge
Firefox
Safari
Opera
Internet Explorer 9+

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.

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.babel.js and .travis.yml. You can now safely use the boilerplate with an alternative build-system or no build-system at all if you choose.

Docs and Recipes

File Appendix - What do the different files here do?
Using Material Design Lite's Sass - how to get MDL's Sass working with WSK
Deployment guides - available for Firebase, Google App Engine and other services.
Gulp recipes - the official Gulp recipes directory includes a comprehensive list of guides for different workflows you can add to your project.

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

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot