Repository: google/web-starter-kit
Branch: master
Commit: e7e55e891ff6
Files: 27
Total size: 83.0 KB
Directory structure:
gitextract_f2glkmh9/
├── .babelrc
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── app/
│ ├── basic.html
│ ├── humans.txt
│ ├── index.html
│ ├── manifest.json
│ ├── manifest.webapp
│ ├── robots.txt
│ ├── scripts/
│ │ ├── main.js
│ │ └── sw/
│ │ └── runtime-caching.js
│ ├── service-worker.js
│ └── styles/
│ └── main.css
├── docs/
│ ├── commands.md
│ ├── deploy-appengine.md
│ ├── deploy-firebase.md
│ ├── deploy.md
│ ├── file-appendix.md
│ ├── install.md
│ └── mdl-sass.md
├── gulpfile.babel.js
└── package.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": ["es2015"],
// Remove the line below to enable ES2015 support.
"only": "gulpfile.babel.js",
"retainLines": true
}
================================================
FILE: .editorconfig
================================================
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .gitattributes
================================================
* text=auto
CONTRIBUTING.md export-ignore
================================================
FILE: .gitignore
================================================
node_modules
dist/
.tmp
app.yaml
================================================
FILE: .travis.yml
================================================
sudo: false
language: node_js
node_js:
- '6'
- '5'
- '4'
- '0.12'
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing
*[Website](https://developers.google.com/web/starter-kit/) related issues should be filed on the [Web Fundamentals](https://github.com/google/WebFundamentals/issues/new) issue tracker.*
Web Starter Kit is an open source project. It is licensed using the
[Apache Software License 2.0](http://www.apache.org/licenses/LICENSE-2.0.html).
We appreciate pull requests, here are our guidelines:
1. File a bug at https://github.com/google/web-starter-kit/issues (if there
isn’t one already). If your patch is going to be large it might be a good idea
to get the discussion started early. We are happy to discuss it in a new issue beforehand.
1. Make sure that patches provide justification for why they should be merged. Web Starter Kit is an opinionated project and as such, patches which add support for alternative choices to those we prescribe are not guaranteed to land.
1. Due to legal reasons, all contributors must sign a contributor license
agreement, either for an
[individual](https://code.google.com/legal/individual-cla-v1.0.html) or
[corporation](https://code.google.com/legal/corporate-cla-v1.0.html), before a
patch can be accepted.
1. We ask that you squash all the commits together before pushing.
================================================
FILE: LICENSE
================================================
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright 2015 Google Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
All code in any directories or sub-directories that end with *.html or
*.css is licensed under the Creative Commons Attribution International
4.0 License, which full text can be found here:
https://creativecommons.org/licenses/by/4.0/legalcode.
As an exception to this license, all html or css that is generated by
the software at the direction of the user is copyright the user. The
user has full ownership and control over such content, including
whether and how they wish to license it.
================================================
FILE: README.md
================================================
# [](https://github.com/google/web-starter-kit/releases/latest)
## Overview
[Web Starter Kit](https://developers.google.com/web/tools/starter-kit/) is an opinionated boilerplate for web development. Tools for building a great experience across many devices and [performance oriented](#web-performance). Helping you to stay productive following the best practices outlined in Google's [Web Fundamentals](https://developers.google.com/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](http://getmdl.io). You're free to use either this or a completely clean-slate via [basic.html](https://github.com/google/web-starter-kit/blob/master/app/basic.html). |
| Sass support | Compile [Sass](http://sass-lang.com/) 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](http://eslint.org) - a pluggable linter tool for identifying and reporting on patterns in JavaScript. Web Starter Kit uses ESLint with [eslint-config-google](https://github.com/google/eslint-config-google), which tries to follow the Google JavaScript style guide. |
| ES2015 via Babel 6.0 | Optional ES2015 support using [Babel](https://babeljs.io/). To enable ES2015 support remove the line `"only": "gulpfile.babel.js",` in the [.babelrc](.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](http://browsersync.io). (Run `gulp serve` and open up the IP provided on other devices on your network) |
| Offline support | Thanks to our baked in [Service Worker](http://www.html5rocks.com/en/tutorials/service-worker/introduction/) [pre-caching](https://github.com/google/web-starter-kit/blob/master/gulpfile.babel.js#L226), sites deploying `dist` to a HTTPS domain will enjoy offline support. This is made possible by [sw-precache](https://github.com/GoogleChrome/sw-precache/). |
| PageSpeed Insights | Web performance metrics showing how well your site performs on mobile and desktop (Run `gulp pagespeed`) |
## Quickstart
[Download](https://github.com/google/web-starter-kit/releases/latest) 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](docs/install.md) to verify your environment is prepared to run WSK.
Once you have verified that your system can run WSK, check out the [commands](docs/commands.md) 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](http://www.webpagetest.org/result/151201_VW_XYC/) for the default template have a [Speed Index](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/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](https://github.com/google/web-starter-kit/wiki/Troubleshooting) guide and then open an [issue](https://github.com/google/web-starter-kit/issues). 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](https://github.com/google/web-starter-kit/blob/master/docs/file-appendix.md) - What do the different files here do?
* [Using Material Design Lite's Sass](https://github.com/google/web-starter-kit/blob/master/docs/mdl-sass.md) - how to get MDL's Sass working with WSK
* [Deployment guides](https://github.com/google/web-starter-kit/blob/master/docs/deploy.md) - available for Firebase, Google App Engine and other services.
* [Gulp recipes](https://github.com/gulpjs/gulp/tree/master/docs/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](https://html5boilerplate.com/mobile/) and Yeoman's [generator-gulp-webapp](https://github.com/yeoman/generator-webapp), having taken input from contributors to both projects during development. Our [FAQs](https://github.com/google/web-starter-kit/wiki/FAQ) 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](CONTRIBUTING.md) before submitting a pull request. [Website](https://developers.google.com/web/tools/starter-kit/) related issues should be filed on the [Web Fundamentals](https://github.com/google/WebFundamentals/issues/new) issue tracker.
## License
Apache 2.0
Copyright 2015 Google Inc
================================================
FILE: app/basic.html
================================================
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Disable tap highlight on IE -->
<meta name="msapplication-tap-highlight" content="no">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Web Starter Kit">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Web Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#2F3BA2">
<!-- Color the status bar on mobile devices -->
<meta name="theme-color" content="#2F3BA2">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
</head>
<body>
<!-- Add your site or app content here -->
<!-- build:js scripts/main.min.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X', 'auto');
ga('send', 'pageview');
</script>
<!-- Built with love using Web Starter Kit -->
</body>
</html>
================================================
FILE: app/humans.txt
================================================
# humanstxt.org/
# The humans responsible & technology colophon
# TEAM
<name> -- <role> -- <twitter>
# THANKS
<name>
# TECHNOLOGY COLOPHON
HTML5, CSS3
================================================
FILE: app/index.html
================================================
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Starter Kit</title>
<!-- Disable tap highlight on IE -->
<meta name="msapplication-tap-highlight" content="no">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Web Starter Kit">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Web Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#2F3BA2">
<!-- Color the status bar on mobile devices -->
<meta name="theme-color" content="#2F3BA2">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<!-- Material Design icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Material Design Lite page styles:
You can choose other color schemes from the CDN, more info here http://www.getmdl.io/customize/index.html
Format: material.color1-color2.min.css, some examples:
material.red-teal.min.css
material.blue-orange.min.css
material.purple-indigo.min.css
-->
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
<!-- Your styles -->
<link rel="stylesheet" href="styles/main.css">
</head>
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
<div class="mdl-layout--large-screen-only mdl-layout__header-row">
</div>
<div class="mdl-layout--large-screen-only mdl-layout__header-row">
<h3>Web Starter Kit</h3>
</div>
<div class="mdl-layout--large-screen-only mdl-layout__header-row">
</div>
<div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
<a href="#overview" class="mdl-layout__tab is-active">Overview</a>
<a href="#features" class="mdl-layout__tab">Features</a>
<a href="#features" class="mdl-layout__tab">Details</a>
<a href="#features" class="mdl-layout__tab">Technology</a>
<a href="#features" class="mdl-layout__tab">FAQ</a>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent" id="add">
<i class="material-icons" role="presentation">add</i>
<span class="visuallyhidden">Add</span>
</button>
</div>
</header>
<main class="mdl-layout__content">
<div class="mdl-layout__tab-panel is-active" id="overview">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone mdl-color--teal-100 mdl-color-text--white">
<i class="material-icons">play_circle_filled</i>
</header>
<div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
<div class="mdl-card__supporting-text">
<h4>Features</h4>
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse.
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Read our features</a>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn1">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn1">
<li class="mdl-menu__item">Lorem</li>
<li class="mdl-menu__item" disabled>Ipsum</li>
<li class="mdl-menu__item">Dolor</li>
</ul>
</section>
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text mdl-grid mdl-grid--no-spacing">
<h4 class="mdl-cell mdl-cell--12-col">Details</h4>
<div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<div class="section__circle-container__circle mdl-color--primary"></div>
</div>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
<h5>Lorem ipsum dolor sit amet</h5>
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis <a href="#">proident minim</a>.
</div>
<div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<div class="section__circle-container__circle mdl-color--primary"></div>
</div>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
<h5>Lorem ipsum dolor sit amet</h5>
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis <a href="#">proident minim</a>.
</div>
<div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<div class="section__circle-container__circle mdl-color--primary"></div>
</div>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
<h5>Lorem ipsum dolor sit amet</h5>
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis <a href="#">proident minim</a>.
</div>
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Read our features</a>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn2">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn2">
<li class="mdl-menu__item">Lorem</li>
<li class="mdl-menu__item" disabled>Ipsum</li>
<li class="mdl-menu__item">Dolor</li>
</ul>
</section>
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<div class="mdl-card mdl-cell mdl-cell--12-col">
<div class="mdl-card__supporting-text">
<h4>Technology</h4>
Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse. Pariatur occaecat nisi laboris tempor laboris eiusmod qui id Lorem esse commodo in. Exercitation aute dolore deserunt culpa consequat elit labore incididunt elit anim.
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Read our features</a>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn3">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn3">
<li class="mdl-menu__item">Lorem</li>
<li class="mdl-menu__item" disabled>Ipsum</li>
<li class="mdl-menu__item">Dolor</li>
</ul>
</section>
<section class="section--footer mdl-color--white mdl-grid">
<div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<div class="section__circle-container__circle mdl-color--accent section__circle--big"></div>
</div>
<div class="section__text mdl-cell mdl-cell--4-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
<h5>Lorem ipsum dolor sit amet</h5>
Qui sint ut et qui nisi cupidatat. Reprehenderit nostrud proident officia exercitation anim et pariatur ex.
</div>
<div class="section__circle-container mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<div class="section__circle-container__circle mdl-color--accent section__circle--big"></div>
</div>
<div class="section__text mdl-cell mdl-cell--4-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
<h5>Lorem ipsum dolor sit amet</h5>
Qui sint ut et qui nisi cupidatat. Reprehenderit nostrud proident officia exercitation anim et pariatur ex.
</div>
</section>
</div>
<div class="mdl-layout__tab-panel" id="features">
<section class="section--center mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--12-col">
<h4>Features</h4>
Minim duis incididunt est cillum est ex occaecat consectetur. Qui sint ut et qui nisi cupidatat. Reprehenderit nostrud proident officia exercitation anim et pariatur ex.
<ul class="toc">
<h4>Contents</h4>
<a href="#lorem1">Lorem ipsum</a>
<a href="#lorem2">Lorem ipsum</a>
<a href="#lorem3">Lorem ipsum</a>
<a href="#lorem4">Lorem ipsum</a>
<a href="#lorem5">Lorem ipsum</a>
</ul>
<h5 id="lorem1">Lorem ipsum dolor sit amet</h5>
Excepteur et pariatur officia veniam anim culpa cupidatat consequat ad velit culpa est non.
<ul>
<li>Nisi qui nisi duis commodo duis reprehenderit consequat velit aliquip.</li>
<li>Dolor consectetur incididunt in ipsum laborum non et irure pariatur excepteur anim occaecat officia sint.</li>
<li>Lorem labore proident officia excepteur do.</li>
</ul>
<p>
Sit qui est voluptate proident minim cillum in aliquip cupidatat labore pariatur id tempor id. Proident occaecat occaecat sint mollit tempor duis dolor cillum anim. Dolore sunt ea mollit fugiat in aliqua consequat nostrud aliqua ut irure in dolore. Proident aliqua culpa sint sint exercitation. Non proident occaecat reprehenderit veniam et proident dolor id culpa ea tempor do dolor. Nulla adipisicing qui fugiat id dolor. Nostrud magna voluptate irure veniam veniam labore ipsum deserunt adipisicing laboris amet eu irure. Sunt dolore nisi velit sit id. Nostrud voluptate labore proident cupidatat enim amet Lorem officia magna excepteur occaecat eu qui. Exercitation culpa deserunt non et tempor et non.
</p>
<p>
Do dolor eiusmod eu mollit dolore nostrud deserunt cillum irure esse sint irure fugiat exercitation. Magna sit voluptate id in tempor elit veniam enim cupidatat ea labore elit. Aliqua pariatur eu nulla labore magna dolore mollit occaecat sint commodo culpa. Eu non minim duis pariatur Lorem quis exercitation. Sunt qui ex incididunt sit anim incididunt sit elit ad officia id.
</p>
<p id="lorem2">
Tempor voluptate ex consequat fugiat aliqua. Do sit et reprehenderit culpa deserunt culpa. Excepteur quis minim mollit irure nulla excepteur enim quis in laborum. Aliqua elit voluptate ad deserunt nulla reprehenderit adipisicing sint. Est in eiusmod exercitation esse commodo. Ea reprehenderit exercitation veniam adipisicing minim nostrud. Veniam dolore ex ea occaecat non enim minim id ut aliqua adipisicing ad. Occaecat excepteur aliqua tempor cupidatat aute dolore deserunt ipsum qui incididunt aliqua occaecat sit quis. Culpa sint aliqua aliqua reprehenderit veniam irure fugiat ea ad.
</p>
<p>
Eu minim fugiat laborum irure veniam Lorem aliqua enim. Aliqua veniam incididunt consequat irure consequat tempor do nisi deserunt. Elit dolore ad quis consectetur sint laborum anim magna do nostrud amet. Ea nulla sit consequat quis qui irure dolor. Sint deserunt excepteur consectetur magna irure. Dolor tempor exercitation dolore pariatur incididunt ut laboris fugiat ipsum sunt veniam aute sunt labore. Non dolore sit nostrud eu ad excepteur cillum eu ex Lorem duis.
</p>
<p>
Id occaecat velit non ipsum occaecat aliqua quis ut. Eiusmod est magna non esse est ex incididunt aute ullamco. Cillum excepteur sint ipsum qui quis velit incididunt amet. Qui deserunt anim enim laborum cillum reprehenderit duis mollit amet ad officia enim. Minim sint et quis aliqua aliqua do minim officia dolor deserunt ipsum laboris. Nulla nisi voluptate consectetur est voluptate et amet. Occaecat ut quis adipisicing ad enim. Magna est magna sit duis proident veniam reprehenderit fugiat reprehenderit enim velit ex. Ullamco laboris culpa irure aliquip ad Lorem consequat veniam ad ipsum eu. Ipsum culpa dolore sunt officia laborum quis.
</p>
<h5 id="lorem3">Lorem ipsum dolor sit amet</h5>
<p id="lorem4">
Eiusmod nulla aliquip ipsum reprehenderit nostrud non excepteur mollit amet esse est est dolor. Dolore quis pariatur sit consectetur veniam esse ullamco duis Lorem qui enim ut veniam. Officia deserunt minim duis laborum dolor in velit pariatur commodo ullamco eu. Aute adipisicing ad duis labore laboris do mollit dolor cillum sunt aliqua ullamco. Esse tempor quis cillum consequat reprehenderit. Adipisicing proident anim eu sint elit aliqua anim dolore cupidatat fugiat aliquip qui.
</p>
<p id="lorem5">
Nisi eiusmod esse cupidatat excepteur exercitation ipsum reprehenderit nostrud deserunt aliqua ullamco. Anim est irure commodo eiusmod pariatur officia. Est dolor ipsum excepteur magna aliqua ad veniam irure qui occaecat eiusmod aute fugiat commodo. Quis mollit incididunt amet sit minim velit eu fugiat voluptate excepteur. Sit minim id pariatur ex cupidatat cupidatat nostrud nostrud ipsum.
</p>
<p>
Enim ea officia excepteur ad veniam id reprehenderit eiusmod esse mollit consequat. Esse non aute ullamco Lorem aliqua qui dolore irure eiusmod aute aliqua proident labore aliqua. Ipsum voluptate voluptate exercitation laborum deserunt nulla elit aliquip et minim ex veniam. Duis cupidatat aute sunt officia mollit dolor ad elit ad aute labore nostrud duis pariatur. In est sint voluptate consectetur velit ea non labore. Ut duis ea aliqua consequat nulla laboris fugiat aute id culpa proident. Minim eiusmod laboris enim Lorem nisi excepteur mollit voluptate enim labore reprehenderit officia mollit.
</p>
<p>
Cupidatat labore nisi ut sunt voluptate quis sunt qui ad Lorem esse nisi. Ex esse velit ullamco incididunt occaecat dolore veniam tempor minim adipisicing amet. Consequat in exercitation est elit anim consequat cillum sint labore cillum. Aliquip mollit laboris ad labore anim.
</p>
</div>
</section>
</div>
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer--middle-section">
<div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading">Features</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">About</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Updates</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading">Details</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Spec</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Resources</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading">Technology</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">How it works</a></li>
<li><a href="#">Patterns</a></li>
<li><a href="#">Usage</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contracts</a></li>
</ul>
</div>
<div class="mdl-mega-footer--drop-down-section">
<input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer--heading">FAQ</h1>
<ul class="mdl-mega-footer--link-list">
<li><a href="#">Questions</a></li>
<li><a href="#">Answers</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
<div class="mdl-mega-footer--bottom-section">
<div class="mdl-logo">
More Information
</div>
<ul class="mdl-mega-footer--link-list">
<li><a href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Privacy and Terms</a></li>
</ul>
</div>
</footer>
</main>
</div>
<script src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<!-- build:js scripts/main.min.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X', 'auto');
ga('send', 'pageview');
</script>
<!-- Built with love using Web Starter Kit -->
</body>
</html>
================================================
FILE: app/manifest.json
================================================
{
"name": "Web Starter Kit",
"short_name": "WSK",
"icons": [{
"src": "images/touch/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "images/touch/apple-touch-icon.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "images/touch/ms-touch-icon-144x144-precomposed.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/touch/chrome-touch-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}],
"start_url": "/index.html?homescreen=1",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
================================================
FILE: app/manifest.webapp
================================================
{
"version": "1.0.0",
"name": "Web Starter Kit",
"launch_path": "/index.html",
"description": "A front-end template that helps you build fast, modern mobile web apps.",
"icons": {
"128": "/images/touch/icon-128x128.png"
},
"developer": {
"name": "",
"url": ""
},
"installs_allowed_from": [
"*"
],
"default_locale": "en",
"permissions": {
},
"locales": {
"en": {
"name": "Web Starter Kit",
"description": "A front-end template that helps you build fast, modern mobile web apps."
}
}
}
================================================
FILE: app/robots.txt
================================================
# www.robotstxt.org/
# Allow crawling of all content
User-agent: *
Disallow:
================================================
FILE: app/scripts/main.js
================================================
/*!
*
* Web Starter Kit
* Copyright 2015 Google Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License
*
*/
/* eslint-env browser */
(function() {
'use strict';
// Check to make sure service workers are supported in the current browser,
// and that the current page is accessed from a secure origin. Using a
// service worker from an insecure origin will trigger JS console errors. See
// http://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features
var isLocalhost = Boolean(window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
if ('serviceWorker' in navigator &&
(window.location.protocol === 'https:' || isLocalhost)) {
navigator.serviceWorker.register('service-worker.js')
.then(function(registration) {
// updatefound is fired if service-worker.js changes.
registration.onupdatefound = function() {
// updatefound is also fired the very first time the SW is installed,
// and there's no need to prompt for a reload at that point.
// So check here to see if the page is already controlled,
// i.e. whether there's an existing service worker.
if (navigator.serviceWorker.controller) {
// The updatefound event implies that registration.installing is set:
// https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-container-updatefound-event
var installingWorker = registration.installing;
installingWorker.onstatechange = function() {
switch (installingWorker.state) {
case 'installed':
// At this point, the old content will have been purged and the
// fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in the page's interface.
break;
case 'redundant':
throw new Error('The installing ' +
'service worker became redundant.');
default:
// Ignore
}
};
}
};
}).catch(function(e) {
console.error('Error during service worker registration:', e);
});
}
// Your custom JavaScript goes here
})();
================================================
FILE: app/scripts/sw/runtime-caching.js
================================================
/*!
*
* Web Starter Kit
* Copyright 2015 Google Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License
*
*/
/* eslint-env worker */
// global.toolbox is defined in a different script, sw-toolbox.js, which is part of the
// https://github.com/GoogleChrome/sw-toolbox project.
// That sw-toolbox.js script must be executed first, so it needs to be listed before this in the
// importScripts() call that the parent service worker makes.
(function(global) {
'use strict';
// See https://github.com/GoogleChrome/sw-toolbox/blob/6e8242dc328d1f1cfba624269653724b26fa94f1/README.md#toolboxroutergeturlpattern-handler-options
// and https://github.com/GoogleChrome/sw-toolbox/blob/6e8242dc328d1f1cfba624269653724b26fa94f1/README.md#toolboxfastest
// for more details on how this handler is defined and what the toolbox.fastest strategy does.
global.toolbox.router.get('/(.*)', global.toolbox.fastest, {
origin: /\.(?:googleapis|gstatic)\.com$/
});
})(self);
================================================
FILE: app/service-worker.js
================================================
// This file is intentionally without code.
// It's present so that service worker registration will work when serving from the 'app' directory.
// The version of service-worker.js that's present in the 'dist' directory is automatically
// generated by the 'generate-service-worker' gulp task, and contains code to precache resources.
================================================
FILE: app/styles/main.css
================================================
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
Note: any .css or .scss files included in the 'styles' directory
will be correctly compiled during `gulp serve` and `gulp`
*/
html, body {
font-family: 'Roboto', 'Helvetica', sans-serif;
margin: 0;
padding: 0;
}
.mdl-demo .mdl-layout__header-row {
padding-left: 40px;
}
.mdl-demo .mdl-layout.is-small-screen .mdl-layout__header-row h3 {
font-size: inherit;
}
.mdl-demo .mdl-layout__tab-bar-button {
display: none;
}
.mdl-demo .mdl-layout.is-small-screen .mdl-layout__tab-bar .mdl-button {
display: none;
}
.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar,
.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar-container {
overflow: visible;
}
.mdl-demo .mdl-layout__tab-bar-container {
height: 64px;
}
.mdl-demo .mdl-layout__tab-bar {
padding: 0;
padding-left: 16px;
box-sizing: border-box;
height: 100%;
width: 100%;
}
.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab {
height: 64px;
line-height: 64px;
}
.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab.is-active::after {
background-color: white;
height: 4px;
}
.mdl-demo main > .mdl-layout__tab-panel {
padding: 8px;
padding-top: 48px;
}
.mdl-demo .mdl-card {
height: auto;
display: flex;
flex-direction: column;
}
.mdl-demo .mdl-card > * {
height: auto;
}
.mdl-demo .mdl-card .mdl-card__supporting-text {
margin: 40px;
flex-grow: 1;
padding: 0;
color: inherit;
width: calc(100% - 80px);
}
.mdl-demo.mdl-demo .mdl-card__supporting-text h4 {
margin-top: 0;
margin-bottom: 20px;
}
.mdl-demo .mdl-card__actions {
margin: 0;
padding: 4px 40px;
color: inherit;
}
.mdl-demo .mdl-card__actions a {
color: #00BCD4;
margin: 0;
}
.mdl-demo .mdl-card__actions a:hover,
.mdl-demo .mdl-card__actions a:active {
color: inherit;
background-color: transparent;
}
.mdl-demo .mdl-card__supporting-text + .mdl-card__actions {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.mdl-demo #add {
position: absolute;
right: 40px;
top: 36px;
z-index: 999;
}
.mdl-demo .mdl-layout__content section:not(:last-of-type) {
position: relative;
margin-bottom: 48px;
}
.mdl-demo section.section--center {
max-width: 860px;
}
.mdl-demo #features section.section--center {
max-width: 620px;
}
.mdl-demo section > header{
display: flex;
align-items: center;
justify-content: center;
}
.mdl-demo section > .section__play-btn {
min-height: 200px;
}
.mdl-demo section > header > .material-icons {
font-size: 3rem;
}
.mdl-demo section > button {
position: absolute;
z-index: 99;
top: 8px;
right: 8px;
}
.mdl-demo section .section__circle {
display: flex;
align-items: center;
justify-content: flex-start;
flex-grow: 0;
flex-shrink: 1;
}
.mdl-demo section .section__text {
flex-grow: 1;
flex-shrink: 0;
padding-top: 8px;
}
.mdl-demo section .section__text h5 {
font-size: inherit;
margin: 0;
margin-bottom: 0.5em;
}
.mdl-demo section .section__text a {
text-decoration: none;
}
.mdl-demo section .section__circle-container > .section__circle-container__circle {
width: 64px;
height: 64px;
border-radius: 32px;
margin: 8px 0;
}
.mdl-demo section.section--footer .section__circle--big {
width: 100px;
height: 100px;
border-radius: 50px;
margin: 8px 32px;
}
.mdl-demo .is-small-screen section.section--footer .section__circle--big {
width: 50px;
height: 50px;
border-radius: 25px;
margin: 8px 16px;
}
.mdl-demo section.section--footer {
padding: 64px 0;
margin: 0 -8px -8px -8px;
}
.mdl-demo section.section--center .section__text:not(:last-child) {
border-bottom: 1px solid rgba(0,0,0,.13);
}
.mdl-demo .mdl-card .mdl-card__supporting-text > h3:first-child {
margin-bottom: 24px;
}
.mdl-demo .mdl-layout__tab-panel:not(#overview) {
background-color: white;
}
.mdl-demo #features section {
margin-bottom: 72px;
}
.mdl-demo #features h4, #features h5 {
margin-bottom: 16px;
}
.mdl-demo .toc {
border-left: 4px solid #C1EEF4;
margin: 24px;
padding: 0;
padding-left: 8px;
display: flex;
flex-direction: column;
}
.mdl-demo .toc h4 {
font-size: 0.9rem;
margin-top: 0;
}
.mdl-demo .toc a {
color: #4DD0E1;
text-decoration: none;
font-size: 16px;
line-height: 28px;
display: block;
}
.mdl-demo .mdl-menu__container {
z-index: 99;
}
================================================
FILE: docs/commands.md
================================================
There are many commands available to help you build and test sites. Here are a few highlights to get started with.
## Watch For Changes & Automatically Refresh Across Devices
```sh
$ gulp serve
```
This outputs an IP address you can use to locally test and another that can be used on devices
connected to your network.
`serve` does not use [service worker](http://www.html5rocks.com/en/tutorials/service-worker/introduction/)
caching, so your site will stop being available when the web server stops running.
## Build & Optimize
```sh
$ gulp
```
Build and optimize the current project, ready for deployment.
This includes linting as well as image, script, stylesheet and HTML optimization and minification.
Also, a [service worker](http://www.html5rocks.com/en/tutorials/service-worker/introduction/)
script will be automatically generated, which will take care of precaching your sites' resources.
On browsers that [support](https://jakearchibald.github.io/isserviceworkerready/) service
workers, the site will be loaded directly from the service worker cache, bypassing the server.
This means that this version of the site will work when the server isn't running or when there is
no network connectivity.
## Serve the Fully Built & Optimized Site
```sh
$ gulp serve:dist
```
This outputs an IP address you can use to locally test and another that can be used on devices
connected to your network.
`serve:dist` includes will serve a local copy of the built and optimized site generated as part
of the `default` task.
Because the optimized site includes a service worker which serves your site directly from the
cache, you will need to reload the page after regenerating the site to pick up the latest changes.
`serve:dist` uses a different HTTP port than `serve`, which means that the service workers are
kept isolated in different [scopes](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Registering_your_worker).
## Difference Between `serve` & `serve:dist`
It is important to note a difference between the `serve` and `serve:dist` tasks.
* `serve` uses a no-op `service-worker.js` and cannot run offline.
* `serve:dist` uses the `sw-precache`-generated output and can run offline.
The `serve` task runs on port 3000 and `serve:dist` runs on port 3001.
The main purpose is to ensure that different service workers will not impact each other's environment.
Using the `sw-precache`-generated output makes it very difficult to quickly test local changes which is not ideal for a development server environment.
## Performance Insights
```sh
$ gulp pagespeed
```
Runs the deployed (public) version of your site against the [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) API to help you stay on top of where you can improve.
================================================
FILE: docs/deploy-appengine.md
================================================
# Deploy to Google App Engine
Google App Engine lets you build and run applications on Google’s infrastructure. App Engine applications are easy to create, easy to maintain, and easy to scale as your traffic and data storage needs change.
## Create the project in the Developer Console
In [Google Developers Console](https://console.developers.google.com/project):
1. Create a new project
2. Take note of the project ID (e.g `algebraic-depot-114712`)
## Install Google Cloud SDK
See <https://cloud.google.com/sdk/>.
## Download source code
Download and extract [Web Starter Kit](https://github.com/google/web-starter-kit/releases/latest) to a local directory.
Create a new file in the root of your project called `app.yaml`. Paste the following contents into it:
```
application: algebraic-depot-114712
version: 0
runtime: php55
api_version: 1
threadsafe: false
handlers:
- url: /$
static_files: index.html
upload: index.html
- url: /(.*)
static_files: \1
upload: .*
```
This is a minimalist configuration for serving a Web Starter Kit project on App Engine. A more comprehensive one should you need it is available [here](https://github.com/h5bp/server-configs-gae/blob/master/app.yaml).
## Install web-starter-kit dependencies (e.g Node)
See <https://github.com/google/web-starter-kit/blob/master/docs/install.md>.
## Install local dependencies and generate assets
```
npm install
gulp
````
## Deploy
````
cp app.yaml dist
cd dist
appcfg.py update . # "rm ~/.appcfg_oauth2_tokens" if error
````
If the update fails, check that your `application` in `app.yaml` matches the project id in the Developers Console.
If everything has worked, you will be able to see your fully deployed site at `<project ID>.appspot.com` (e.g `https://algebraic-depot-114712.appspot.com/`).
================================================
FILE: docs/deploy-firebase.md
================================================
# Deploy to Firebase using Pretty URLs
Firebase is a very simple and secure way to deploy a Web Starter Kit site. You can sign up for a free account and deploy your application in less than 5 minutes.
The instructions below are based on the [Firebase hosting quick start
guide](https://www.firebase.com/docs/hosting/quickstart.html).
1. [Sign up for a Firebase account](https://www.firebase.com/signup/)
1. Install the Firebase command line tools
npm install -g firebase-tools
The `-g` flag instructs `npm` to install the package globally so that you
can use the `firebase` command from any directory. You may need
to install the package with `sudo` privileges.
1. Login to your Firebase account
firebase login
1. `cd` into your project directory
1. Inititalize the Firebase application
firebase init
Firebase asks you which app you would like to use for hosting. If you just
signed up, you should see one app with a randomly-generated name. You can
use that one. Otherwise go to
[https://www.firebase.com/account](https://www.firebase.com/account) to
create a new app.
1. Firebase asks you the name of your app's public directory. Enter `dist`.
This works because when you run `gulp` to build your application, WSK
builds everything and places it all in `dist`. So `dist` contains
everything your application needs to run.
1. Build
gulp
1. Deploy
firebase deploy
The URL to your live site is listed in the output.
You can see a deployed version of WSK at [https://web-starter-kit.firebaseapp.com/](https://web-starter-kit.firebaseapp.com/).
================================================
FILE: docs/deploy.md
================================================
# Deployment
Should you wish to deploy your Web Starter Kit site, a number of helpful guides are available. Select one from below to continue.
* [Firebase](deploy-firebase.md)
* [Google App Engine](deploy-appengine.md)
* [GitHub Pages](https://github.com/yeoman/generator-gulp-webapp/blob/master/docs/recipes/gh-pages.md)
* [Amazon AWS S3](https://github.com/yeoman/generator-gulp-webapp/blob/master/docs/recipes/aws-s3-deployment.md)
* [Heroku](https://github.com/yeoman/generator-gulp-webapp/blob/master/docs/recipes/node-heroku.md)
================================================
FILE: docs/file-appendix.md
================================================
## .babelrc
[.babelrc](https://babeljs.io/docs/usage/babelrc/) is a configuration file for passing options to [Babel](https://babeljs.io) - the ES2015 transpiler recommended for writing next-generation JavaScript in Web Starter Kit.
## .editorconfig
[EditorConfig](http://editorconfig.org/) is a file format and collection of text editor plugins for maintaining consistent coding styles between different editors and IDEs.
## gulpfile.babel.js
[Gulp](http://gulpjs.com) is a streaming build system that allows you to automate tedious development tasks. Compared with other build systems, such as Grunt, gulp uses Node.js streams as a means to automate tasks, thereby removing the need to create intermediate files when transforming source files.
In gulp, you would install plugins, that do one thing and do it well, and construct a 'pipeline' by connecting them to each other. A `gulpfile` allows you to put together tasks that use plugins to accomplish a task like minification.
`gulpfile.babel.js` is a gulpfile written in ES2015. The `babel` portion of the name refers to its use of the [Babel](https://babeljs.io) transpiler for enabling ES2015 code to run there.
## app/scripts/main.js
This is a file where your custom JavaScript can go.
## app/styles/main.css
This is a file where your custom CSS can go. You can place any Sass you wish to have compiled into the `styles` directory and renaming `main.css` to `main.scss` will cause Web Starter Kit to treat the file as Sass instead.
## app/manifest.json
`manifest.json` contains a [Web Application Manifest](https://w3c.github.io/manifest/) - a simple JSON file that gives you the ability to control how your app appears to the user in the areas that they would expect to see apps (for example the mobile home screen). In here you can control what the user can launch and more importantly how they can launch it.
For more information on the manifest, see [Web Fundamentals](https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android).
## app/manifest.webapp
`manifest.webapp` refers to the proprietary [Firefox OS manifest format](https://developer.mozilla.org/en-US/Apps/Build/Manifest), and not the W3C [manifest spec](https://w3c.github.io/manifest/), designed for cross-browser open web applications.
The Firefox OS app manifest provides information about an app (such as name, author, icon, and description) and a list of Web APIs that your app needs.
This manifest included in Web Starter Kit until Firefox OS switches to using the manifest spec instead.
## package.json
A [package.json](https://docs.npmjs.com/files/package.json) file is used to specify project tooling dependencies from [npm](http://npmjs.org) - the Node package manager. When you run `npm install`, `package.json` is read to discover what packages need to be installed.
`package.json` can also contain other metadata such as a project description, version, license and configuration information.
## app/service-worker.js
A [service worker](http://www.html5rocks.com/en/tutorials/service-worker/introduction/) is a script that is run by your browser in the background, separate from a web page, opening the door to features such as offline support. In Web Starter Kit, the `app/service-worker.js` script is automatically generated for you by our build process via [sw-precache](https://github.com/GoogleChrome/sw-precache/).
================================================
FILE: docs/install.md
================================================
# Install
**tl;dr**: [Download WSK](https://github.com/google/web-starter-kit/releases/latest) and run `$ npm install --global gulp && npm install` in that directory to get started.
---
To take advantage of Web Starter Kit you need to:
1. Get a copy of the code.
2. Install the dependencies if you don't already have them.
3. Modify the application to your liking.
4. Deploy your production code.
## Getting the code
[Download](https://github.com/google/web-starter-kit/releases/latest) and extract WSK to where you want to work.
## Prerequisites
### [Node.js](https://nodejs.org)
Bring up a terminal and type `node --version`.
Node should respond with a version at or above 0.10.x.
If you require Node, go to [nodejs.org](https://nodejs.org) and click on the big green Install button.
### [Gulp](http://gulpjs.com)
Bring up a terminal and type `gulp --version`.
If Gulp is installed it should return a version number at or above 3.9.x.
If you need to install/upgrade Gulp, open up a terminal and type in the following:
```sh
$ npm install --global gulp
```
*This will install Gulp globally. Depending on your user account, you may need to [configure your system](https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md) to install packages globally without administrative privileges.*
### Local dependencies
Next, install the local dependencies Web Starter Kit requires:
```sh
$ npm install
```
Note: if you have the [Yarn](https://yarnpkg.com/) package manager installed, you can just run `yarn`.
Web Starter Kit includes a yarn.lock file that will be used here.
That's it! You should now have everything needed to use the Web Starter Kit.
---
You may also want to get used to some of the [commands](commands.md) available.
================================================
FILE: docs/mdl-sass.md
================================================
## Using Material Design Lite's Sass in Web Starter Kit
If you would like to swap out the CSS version of [Material Design Lite](http://getmdl.io) for the more customisable [Sass](http://sass-lang.com/) version, there are a few steps you can take to get this setup with Web Starter Kit.
> This guide is intended to be used with Web Starter Kit 0.6.0 and above.
1. Download the [latest release](https://github.com/google/web-starter-kit/releases/latest) of Web Starter Kit. Extract it to a location on your drive.
2. Download the [latest release](https://github.com/google/material-design-lite/releases/latest) build of Material Design Lite (`material-design-lite-<version>.zip` where `version` is the latest version available). This file will include the Sass source files we need to get started.
3. Extract `material-design-lite-<version>.zip` to a local folder on your drive and open it. You should see a file/folder structure similar to the below:
```
├── LICENSE
├── README.md
├── bower.json
├── gulpfile.js
├── material.css
├── material.js
├── material.min.css
├── material.min.css.map
├── material.min.js
├── material.min.js.map
├── package.json
├── src
└── utils
```
The `src` directory above contains MDL's Sass files and the JavaScript sources for all MDL components.
4. Copy the `src` directory from step 3. to Web Starter Kit's `app/styles` directory. Your folder structure for `app/styles` should now resemble:
```
├── main.css
└── src
```
Next we have some changes to make to Web Starter Kit's `app/index.html`. By default it includes the CDN-hosted production builds of Material Design Lite. We will need to swap these out for references to our local files instead.
5. First, we'll switch the CDN-hosted stylesheets to our local version.
Replace the following line:
```html
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
```
with:
```html
<link rel="stylesheet" href="styles/main.css">
```
If you navigate to "app/styles/main.css" in your Text Editor (e.g Sublime Text), you will notice that it already contains some styles. These are for the default template that ships with Web Starter Kit.
We're going to rename our `app/styles/main.css` file to `app/styles/main.scss` so that Web Starter Kit treats it as a Sass file. No further changes are required to our `app/index.html`.
One final change for getting Sass working is adding the following line to the very top of `app/styles/main.scss`:
```
@import "src/material-design-lite";
```
This imports in all of MDL's component styles. If you later decide to only use a small set of components, just edit `src/material-design-lite.scss`, commenting out what you don't want.
6. Next, we'll localise our JavaScript files for MDL. Once again, we'll edit `app/index.html`:
Remove:
```html
<script src="https://code.getmdl.io/1.2.1/material.min.js"></script>
```
and find the following block in `app/index.html`:
```html
<!-- build:js(app/) ../../scripts/main.min.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
```
Replace the above block with the following code:
```html
<!-- build:js(app/) ../../scripts/main.min.js -->
<script src="./styles/src/mdlComponentHandler.js"></script>
<script src="./styles/src/button/button.js"></script>
<script src="./styles/src/checkbox/checkbox.js"></script>
<script src="./styles/src/icon-toggle/icon-toggle.js"></script>
<script src="./styles/src/menu/menu.js"></script>
<script src="./styles/src/progress/progress.js"></script>
<script src="./styles/src/radio/radio.js"></script>
<script src="./styles/src/slider/slider.js"></script>
<script src="./styles/src/spinner/spinner.js"></script>
<script src="./styles/src/switch/switch.js"></script>
<script src="./styles/src/tabs/tabs.js"></script>
<script src="./styles/src/textfield/textfield.js"></script>
<script src="./styles/src/tooltip/tooltip.js"></script>
<script src="./styles/src/layout/layout.js"></script>
<script src="./styles/src/data-table/data-table.js"></script>
<script src="./styles/src/ripple/ripple.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->
```
Then, in your `gulpfile.babel.js` (found in the root of Web Starter Kit), edit the `scripts` task. By default it will look something like this:
```js
gulp.task('scripts', () =>
gulp.src([
// Note: Since we are not using useref in the scripts build pipeline,
// you need to explicitly list your scripts here in the right order
// to be correctly concatenated
'./app/scripts/main.js'
])
```
We're just going to add in the MDL component scripts so that they're correctly copied over and minified into a build when running `gulp`:
```js
gulp.task('scripts', () =>
gulp.src([
// Component handler
'./app/styles/src/mdlComponentHandler.js',
// Base components
'./app/styles/src/button/button.js',
'./app/styles/src/checkbox/checkbox.js',
'./app/styles/src/icon-toggle/icon-toggle.js',
'./app/styles/src/menu/menu.js',
'./app/styles/src/progress/progress.js',
'./app/styles/src/radio/radio.js',
'./app/styles/src/slider/slider.js',
'./app/styles/src/spinner/spinner.js',
'./app/styles/src/switch/switch.js',
'./app/styles/src/tabs/tabs.js',
'./app/styles/src/textfield/textfield.js',
'./app/styles/src/tooltip/tooltip.js',
// Complex components (which reuse base components)
'./app/styles/src/layout/layout.js',
'./app/styles/src/data-table/data-table.js',
// And finally, the ripples
'./app/styles/src/ripple/ripple.js',
// Other scripts,
'./app/scripts/main.js'
])
```
> Note: We are aware that it can feel a little suboptimal to reference the same set of source files twice in the above pipeline. We will be looking at simplifying this workflow in a future release.
Similar to styles, you can comment out what you don't need here if you decide to only use a smaller set of components.
7. Finally, we can run `gulp serve` to preview our site or `gulp` to build a production version. Yay!
## Bonus tips
### Configuring colors
You will probably want to configure the color theme used in MDL.
MDL supports Material Design's [color palette](https://www.google.com/design/spec/style/color.html#color-color-palette) through Sass variables.
If you find a color in the palette spec you would like to use (e.g., color name `Pink` with fill `500`), MDL exposes this as `$palette-pink-500`. Let's walk through customising the primary and accent colors for your theme.
This can be done using your setup as follows:
1. Run `gulp serve` to preview your site.
2. Open `app/styles/src/_variables.scss` in your Text Editor.
3. Find `$color-primary`. It should be in the same block as two other color variables we can use for theming - `$color-primary-dark` and `$color-accent`.
```
$color-primary: $palette-indigo-500 !default;
$color-primary-dark: $palette-indigo-700 !default;
$color-accent: $palette-pink-A200 !default;
```
We can change out the default theme for a custom one by consulting `app/styles/src/_color-definitions.scss` for [Material Design color themes](https://www.google.com/design/spec/style/color.html) available.
For this example, we're going to change out `palette-indigo-500` for `palette-purple-500` and `palette-indigo-700` for `palette-deep-purple-700`.
```
$color-primary: $palette-purple-500 !default;
$color-primary-dark: $palette-deep-purple-700 !default;
$color-accent: $palette-pink-A200 !default;
```
Make the above change and hit save. The page should refresh, now showing you your customised theme in action.
For complete Material Design theming, you need to set two other colours: `$color-primary-contrast` and `$color-accent-contrast` in the same `app/styles/src/_variables.scss` file. These are the colours for text that is rendered on top of a solid block of primary or accent, respectively. You should set them to `$color-dark-contrast` if you've chosen a dark primary/accent, and `$color-light-contrast` if you've chosen a light primary/accent.
================================================
FILE: gulpfile.babel.js
================================================
/**
*
* Web Starter Kit
* Copyright 2015 Google Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License
*
*/
'use strict';
// This gulpfile makes use of new JavaScript features.
// Babel handles this without us having to do anything. It just works.
// You can read more about the new JavaScript features here:
// https://babeljs.io/docs/learn-es2015/
import path from 'path';
import gulp from 'gulp';
import del from 'del';
import runSequence from 'run-sequence';
import browserSync from 'browser-sync';
import swPrecache from 'sw-precache';
import gulpLoadPlugins from 'gulp-load-plugins';
import {output as pagespeed} from 'psi';
import pkg from './package.json';
const $ = gulpLoadPlugins();
const reload = browserSync.reload;
// Lint JavaScript
gulp.task('lint', () =>
gulp.src(['app/scripts/**/*.js','!node_modules/**'])
.pipe($.eslint())
.pipe($.eslint.format())
.pipe($.if(!browserSync.active, $.eslint.failAfterError()))
);
// Optimize images
gulp.task('images', () =>
gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
.pipe($.size({title: 'images'}))
);
// Copy all files at the root level (app)
gulp.task('copy', () =>
gulp.src([
'app/*',
'!app/*.html',
'node_modules/apache-server-configs/dist/.htaccess'
], {
dot: true
}).pipe(gulp.dest('dist'))
.pipe($.size({title: 'copy'}))
);
// Compile and automatically prefix stylesheets
gulp.task('styles', () => {
const AUTOPREFIXER_BROWSERS = [
'ie >= 10',
'ie_mob >= 10',
'ff >= 30',
'chrome >= 34',
'safari >= 7',
'opera >= 23',
'ios >= 7',
'android >= 4.4',
'bb >= 10'
];
// For best performance, don't add Sass partials to `gulp.src`
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'))
// Concatenate and minify styles
.pipe($.if('*.css', $.cssnano()))
.pipe($.size({title: 'styles'}))
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest('dist/styles'))
.pipe(gulp.dest('.tmp/styles'));
});
// Concatenate and minify JavaScript. Optionally transpiles ES2015 code to ES5.
// to enable ES2015 support remove the line `"only": "gulpfile.babel.js",` in the
// `.babelrc` file.
gulp.task('scripts', () =>
gulp.src([
// Note: Since we are not using useref in the scripts build pipeline,
// you need to explicitly list your scripts here in the right order
// to be correctly concatenated
'./app/scripts/main.js'
// Other scripts
])
.pipe($.newer('.tmp/scripts'))
.pipe($.sourcemaps.init())
.pipe($.babel())
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/scripts'))
.pipe($.concat('main.min.js'))
.pipe($.uglify({preserveComments: 'some'}))
// Output files
.pipe($.size({title: 'scripts'}))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('dist/scripts'))
.pipe(gulp.dest('.tmp/scripts'))
);
// Scan your HTML for assets & optimize them
gulp.task('html', () => {
return gulp.src('app/**/*.html')
.pipe($.useref({
searchPath: '{.tmp,app}',
noAssets: true
}))
// Minify any HTML
.pipe($.if('*.html', $.htmlmin({
removeComments: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
removeOptionalTags: true
})))
// Output files
.pipe($.if('*.html', $.size({title: 'html', showFiles: true})))
.pipe(gulp.dest('dist'));
});
// Clean output directory
gulp.task('clean', () => del(['.tmp', 'dist/*', '!dist/.git'], {dot: true}));
// Watch files for changes & reload
gulp.task('serve', ['scripts', 'styles'], () => {
browserSync({
notify: false,
// Customize the Browsersync console logging prefix
logPrefix: 'WSK',
// Allow scroll syncing across breakpoints
scrollElementMapping: ['main', '.mdl-layout'],
// Run as an https by uncommenting 'https: true'
// Note: this uses an unsigned certificate which on first access
// will present a certificate warning in the browser.
// https: true,
server: ['.tmp', 'app'],
port: 3000
});
gulp.watch(['app/**/*.html'], reload);
gulp.watch(['app/styles/**/*.{scss,css}'], ['styles', reload]);
gulp.watch(['app/scripts/**/*.js'], ['lint', 'scripts', reload]);
gulp.watch(['app/images/**/*'], reload);
});
// Build and serve the output from the dist build
gulp.task('serve:dist', ['default'], () =>
browserSync({
notify: false,
logPrefix: 'WSK',
// Allow scroll syncing across breakpoints
scrollElementMapping: ['main', '.mdl-layout'],
// Run as an https by uncommenting 'https: true'
// Note: this uses an unsigned certificate which on first access
// will present a certificate warning in the browser.
// https: true,
server: 'dist',
port: 3001
})
);
// Build production files, the default task
gulp.task('default', ['clean'], cb =>
runSequence(
'styles',
['lint', 'html', 'scripts', 'images', 'copy'],
'generate-service-worker',
cb
)
);
// Run PageSpeed Insights
gulp.task('pagespeed', cb =>
// Update the below URL to the public URL of your site
pagespeed('example.com', {
strategy: 'mobile'
// By default we use the PageSpeed Insights free (no API key) tier.
// Use a Google Developer API key if you have one: http://goo.gl/RkN0vE
// key: 'YOUR_API_KEY'
}, cb)
);
// Copy over the scripts that are used in importScripts as part of the generate-service-worker task.
gulp.task('copy-sw-scripts', () => {
return gulp.src(['node_modules/sw-toolbox/sw-toolbox.js', 'app/scripts/sw/runtime-caching.js'])
.pipe(gulp.dest('dist/scripts/sw'));
});
// See http://www.html5rocks.com/en/tutorials/service-worker/introduction/ for
// an in-depth explanation of what service workers are and why you should care.
// Generate a service worker file that will provide offline functionality for
// local resources. This should only be done for the 'dist' directory, to allow
// live reload to work as expected when serving from the 'app' directory.
gulp.task('generate-service-worker', ['copy-sw-scripts'], () => {
const rootDir = 'dist';
const filepath = path.join(rootDir, 'service-worker.js');
return swPrecache.write(filepath, {
// Used to avoid cache conflicts when serving on localhost.
cacheId: pkg.name || 'web-starter-kit',
// sw-toolbox.js needs to be listed first. It sets up methods used in runtime-caching.js.
importScripts: [
'scripts/sw/sw-toolbox.js',
'scripts/sw/runtime-caching.js'
],
staticFileGlobs: [
// Add/remove glob patterns to match your directory setup.
`${rootDir}/images/**/*`,
`${rootDir}/scripts/**/*.js`,
`${rootDir}/styles/**/*.css`,
`${rootDir}/*.{html,json}`
],
// Translates a static file path to the relative URL that it's served from.
// This is '/' rather than path.sep because the paths returned from
// glob always use '/'.
stripPrefix: rootDir + '/'
});
});
// Load custom tasks from the `tasks` directory
// Run: `npm install --save-dev require-dir` from the command-line
// try { require('require-dir')('tasks'); } catch (err) { console.error(err); }
================================================
FILE: package.json
================================================
{
"devDependencies": {
"apache-server-configs": "^2.14.0",
"babel-core": "^6.14.0",
"babel-preset-es2015": "^6.0.15",
"browser-sync": "^2.14.0",
"del": "^2.2.2",
"eslint-config-google": "^0.3.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-babel": "^6.1.2",
"gulp-cache": "^0.4.5",
"gulp-concat": "^2.6.0",
"gulp-cssnano": "^2.1.2",
"gulp-eslint": "^1.1.1",
"gulp-htmlmin": "^2.0.0",
"gulp-if": "^2.0.1",
"gulp-imagemin": "^2.4.0",
"gulp-load-plugins": "^1.2.4",
"gulp-newer": "^1.2.0",
"gulp-sass": "^2.3.2",
"gulp-size": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.5.4",
"gulp-useref": "^3.1.0",
"psi": "^2.0.4",
"run-sequence": "^1.0.1",
"sw-precache": "^3.2.0",
"sw-toolbox": "^3.2.1"
},
"engines": {
"node": ">=0.12"
},
"private": true,
"scripts": {
"test": "gulp && git status | grep 'working directory clean' >/dev/null || (echo 'Please commit all changes generated by building'; exit 1)"
},
"eslintConfig": {
"extends": "google"
}
}
gitextract_f2glkmh9/ ├── .babelrc ├── .editorconfig ├── .gitattributes ├── .gitignore ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── app/ │ ├── basic.html │ ├── humans.txt │ ├── index.html │ ├── manifest.json │ ├── manifest.webapp │ ├── robots.txt │ ├── scripts/ │ │ ├── main.js │ │ └── sw/ │ │ └── runtime-caching.js │ ├── service-worker.js │ └── styles/ │ └── main.css ├── docs/ │ ├── commands.md │ ├── deploy-appengine.md │ ├── deploy-firebase.md │ ├── deploy.md │ ├── file-appendix.md │ ├── install.md │ └── mdl-sass.md ├── gulpfile.babel.js └── package.json
Condensed preview — 27 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (89K chars).
[
{
"path": ".babelrc",
"chars": 135,
"preview": "{\n \"presets\": [\"es2015\"],\n // Remove the line below to enable ES2015 support.\n \"only\": \"gulpfile.babel.js\",\n \"retain"
},
{
"path": ".editorconfig",
"chars": 207,
"preview": "# editorconfig.org\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_"
},
{
"path": ".gitattributes",
"chars": 42,
"preview": "* text=auto\nCONTRIBUTING.md export-ignore\n"
},
{
"path": ".gitignore",
"chars": 33,
"preview": "node_modules\ndist/\n.tmp\napp.yaml\n"
},
{
"path": ".travis.yml",
"chars": 74,
"preview": "sudo: false\nlanguage: node_js\nnode_js:\n - '6'\n - '5'\n - '4'\n - '0.12'\n"
},
{
"path": "CONTRIBUTING.md",
"chars": 1226,
"preview": "# Contributing\n\n*[Website](https://developers.google.com/web/starter-kit/) related issues should be filed on the [Web Fu"
},
{
"path": "LICENSE",
"chars": 11857,
"preview": "\n Apache License\n Version 2.0, January 2004\n "
},
{
"path": "README.md",
"chars": 8207,
"preview": "# [![Web Starter Kit](https://cloud.githubusercontent.com/assets/110953/11445049/f05512ba-9520-11e5-8fdb-8c8eb5f690d0.jp"
},
{
"path": "app/basic.html",
"chars": 2366,
"preview": "<!doctype html>\n<html lang=\"\">\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=ed"
},
{
"path": "app/humans.txt",
"chars": 163,
"preview": "# humanstxt.org/\n# The humans responsible & technology colophon\n\n# TEAM\n\n <name> -- <role> -- <twitter>\n\n# THANKS\n\n <n"
},
{
"path": "app/index.html",
"chars": 19917,
"preview": "<!doctype html>\n<html lang=\"\">\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=ed"
},
{
"path": "app/manifest.json",
"chars": 697,
"preview": "{\n \"name\": \"Web Starter Kit\",\n \"short_name\": \"WSK\",\n \"icons\": [{\n \"src\": \"images/touch/icon-128x128.png\",\n "
},
{
"path": "app/manifest.webapp",
"chars": 549,
"preview": "{\n \"version\": \"1.0.0\",\n \"name\": \"Web Starter Kit\",\n \"launch_path\": \"/index.html\",\n \"description\": \"A front-end templ"
},
{
"path": "app/robots.txt",
"chars": 78,
"preview": "# www.robotstxt.org/\n\n# Allow crawling of all content\nUser-agent: *\nDisallow:\n"
},
{
"path": "app/scripts/main.js",
"chars": 3131,
"preview": "/*!\n *\n * Web Starter Kit\n * Copyright 2015 Google Inc. All rights reserved.\n *\n * Licensed under the Apache License,"
},
{
"path": "app/scripts/sw/runtime-caching.js",
"chars": 1509,
"preview": "/*!\n *\n * Web Starter Kit\n * Copyright 2015 Google Inc. All rights reserved.\n *\n * Licensed under the Apache License,"
},
{
"path": "app/service-worker.js",
"chars": 335,
"preview": "// This file is intentionally without code.\n// It's present so that service worker registration will work when serving f"
},
{
"path": "app/styles/main.css",
"chars": 4883,
"preview": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"Licens"
},
{
"path": "docs/commands.md",
"chars": 2814,
"preview": "There are many commands available to help you build and test sites. Here are a few highlights to get started with.\n\n## W"
},
{
"path": "docs/deploy-appengine.md",
"chars": 1802,
"preview": "# Deploy to Google App Engine\n\nGoogle App Engine lets you build and run applications on Google’s infrastructure. App Eng"
},
{
"path": "docs/deploy-firebase.md",
"chars": 1661,
"preview": "# Deploy to Firebase using Pretty URLs\n\nFirebase is a very simple and secure way to deploy a Web Starter Kit site. You c"
},
{
"path": "docs/deploy.md",
"chars": 537,
"preview": "# Deployment\n\nShould you wish to deploy your Web Starter Kit site, a number of helpful guides are available. Select one "
},
{
"path": "docs/file-appendix.md",
"chars": 3457,
"preview": "\n## .babelrc\n\n[.babelrc](https://babeljs.io/docs/usage/babelrc/) is a configuration file for passing options to [Babel]("
},
{
"path": "docs/install.md",
"chars": 1769,
"preview": "# Install\n\n**tl;dr**: [Download WSK](https://github.com/google/web-starter-kit/releases/latest) and run `$ npm install -"
},
{
"path": "docs/mdl-sass.md",
"chars": 8191,
"preview": "## Using Material Design Lite's Sass in Web Starter Kit\n\nIf you would like to swap out the CSS version of [Material Desi"
},
{
"path": "gulpfile.babel.js",
"chars": 8243,
"preview": "/**\n *\n * Web Starter Kit\n * Copyright 2015 Google Inc. All rights reserved.\n *\n * Licensed under the Apache License,"
},
{
"path": "package.json",
"chars": 1104,
"preview": "{\n \"devDependencies\": {\n \"apache-server-configs\": \"^2.14.0\",\n \"babel-core\": \"^6.14.0\",\n \"babel-preset-es2015\":"
}
]
About this extraction
This page contains the full source code of the google/web-starter-kit GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 27 files (83.0 KB), approximately 20.5k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.