Web Starter Kit

screenshot of Web Starter Kit

Web Starter Kit - a workflow for multi-device websites

Overview:

Web Starter Kit is an opinionated boilerplate for web development. It is designed to help developers build a great experience across multiple devices and optimize performance. It follows the best practices outlined in Google's Web Fundamentals and serves as a solid starting point for both professionals and newcomers to the industry.

Features:

  • Responsive boilerplate: A responsive boilerplate optimized for the multi-screen web. Powered by Material Design Lite. You can choose to use either the responsive boilerplate or start from a clean slate via basic.html.
  • Sass support: Easily compile Sass into CSS, including support for variables, mixins, and more. Use gulp serve or gulp for production.
  • Performance optimization: Minify and concatenate JavaScript, CSS, HTML, and images to optimize page load speed. Use gulp to create an optimized version of your project in the /dist directory.
  • Code Linting: JavaScript code linting is done using ESLint, a pluggable linter tool for identifying patterns in JavaScript. Web Starter Kit uses ESLint with eslint-config-google, which follows the Google JavaScript style guide.
  • ES2015 via Babel 6.0: Optional support for ES2015 (ECMAScript 2015) using Babel. ES2015 source code will be automatically transpiled to ES5 for wide browser support. To enable ES2015 support, remove the line "only": "gulpfile.babel.js" in the .babelrc file.
  • Built-in HTTP Server: Includes a built-in server for previewing your site locally while you develop and iterate.
  • Live Browser Reloading: Real-time browser reloading every time an edit is made, eliminating the need for a browser extension. Use gulp serve and edit your files.
  • Cross-device Synchronization: Synchronize changes across multiple devices in real-time.

Summary:

Web Starter Kit is a powerful boilerplate for web development that provides a solid foundation for building responsive and performant websites. With features like Sass support, code linting, ES2015 support, and built-in server and browser reloading, developers can stay productive and follow best practices. It is a valuable resource for both experienced professionals and newcomers to the industry.

gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.