[ { "path": ".babelrc", "content": "{\n \"presets\": [\"es2015\"],\n // Remove the line below to enable ES2015 support.\n \"only\": \"gulpfile.babel.js\",\n \"retainLines\": true\n}\n" }, { "path": ".editorconfig", "content": "# editorconfig.org\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.md]\ntrim_trailing_whitespace = false\n" }, { "path": ".gitattributes", "content": "* text=auto\nCONTRIBUTING.md export-ignore\n" }, { "path": ".gitignore", "content": "node_modules\ndist/\n.tmp\napp.yaml\n" }, { "path": ".travis.yml", "content": "sudo: false\nlanguage: node_js\nnode_js:\n - '6'\n - '5'\n - '4'\n - '0.12'\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing\n\n*[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.*\n\nWeb Starter Kit is an open source project. It is licensed using the\n[Apache Software License 2.0](http://www.apache.org/licenses/LICENSE-2.0.html).\nWe appreciate pull requests, here are our guidelines:\n\n1. File a bug at https://github.com/google/web-starter-kit/issues (if there\nisn’t one already). If your patch is going to be large it might be a good idea\nto get the discussion started early. We are happy to discuss it in a new issue beforehand.\n1. 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.\n1. Due to legal reasons, all contributors must sign a contributor license\nagreement, either for an\n[individual](https://code.google.com/legal/individual-cla-v1.0.html) or\n[corporation](https://code.google.com/legal/corporate-cla-v1.0.html), before a\npatch can be accepted.\n1. We ask that you squash all the commits together before pushing.\n" }, { "path": "LICENSE", "content": "\n Apache License\n Version 2.0, January 2004\n http://www.apache.org/licenses/\n\n TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n 1. Definitions.\n\n \"License\" shall mean the terms and conditions for use, reproduction,\n and distribution as defined by Sections 1 through 9 of this document.\n\n \"Licensor\" shall mean the copyright owner or entity authorized by\n the copyright owner that is granting the License.\n\n \"Legal Entity\" shall mean the union of the acting entity and all\n other entities that control, are controlled by, or are under common\n control with that entity. For the purposes of this definition,\n \"control\" means (i) the power, direct or indirect, to cause the\n direction or management of such entity, whether by contract or\n otherwise, or (ii) ownership of fifty percent (50%) or more of the\n outstanding shares, or (iii) beneficial ownership of such entity.\n\n \"You\" (or \"Your\") shall mean an individual or Legal Entity\n exercising permissions granted by this License.\n\n \"Source\" form shall mean the preferred form for making modifications,\n including but not limited to software source code, documentation\n source, and configuration files.\n\n \"Object\" form shall mean any form resulting from mechanical\n transformation or translation of a Source form, including but\n not limited to compiled object code, generated documentation,\n and conversions to other media types.\n\n \"Work\" shall mean the work of authorship, whether in Source or\n Object form, made available under the License, as indicated by a\n copyright notice that is included in or attached to the work\n (an example is provided in the Appendix below).\n\n \"Derivative Works\" shall mean any work, whether in Source or Object\n form, that is based on (or derived from) the Work and for which the\n editorial revisions, annotations, elaborations, or other modifications\n represent, as a whole, an original work of authorship. For the purposes\n of this License, Derivative Works shall not include works that remain\n separable from, or merely link (or bind by name) to the interfaces of,\n the Work and Derivative Works thereof.\n\n \"Contribution\" shall mean any work of authorship, including\n the original version of the Work and any modifications or additions\n to that Work or Derivative Works thereof, that is intentionally\n submitted to Licensor for inclusion in the Work by the copyright owner\n or by an individual or Legal Entity authorized to submit on behalf of\n the copyright owner. For the purposes of this definition, \"submitted\"\n means any form of electronic, verbal, or written communication sent\n to the Licensor or its representatives, including but not limited to\n communication on electronic mailing lists, source code control systems,\n and issue tracking systems that are managed by, or on behalf of, the\n Licensor for the purpose of discussing and improving the Work, but\n excluding communication that is conspicuously marked or otherwise\n designated in writing by the copyright owner as \"Not a Contribution.\"\n\n \"Contributor\" shall mean Licensor and any individual or Legal Entity\n on behalf of whom a Contribution has been received by Licensor and\n subsequently incorporated within the Work.\n\n 2. Grant of Copyright License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n copyright license to reproduce, prepare Derivative Works of,\n publicly display, publicly perform, sublicense, and distribute the\n Work and such Derivative Works in Source or Object form.\n\n 3. Grant of Patent License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n (except as stated in this section) patent license to make, have made,\n use, offer to sell, sell, import, and otherwise transfer the Work,\n where such license applies only to those patent claims licensable\n by such Contributor that are necessarily infringed by their\n Contribution(s) alone or by combination of their Contribution(s)\n with the Work to which such Contribution(s) was submitted. If You\n institute patent litigation against any entity (including a\n cross-claim or counterclaim in a lawsuit) alleging that the Work\n or a Contribution incorporated within the Work constitutes direct\n or contributory patent infringement, then any patent licenses\n granted to You under this License for that Work shall terminate\n as of the date such litigation is filed.\n\n 4. Redistribution. You may reproduce and distribute copies of the\n Work or Derivative Works thereof in any medium, with or without\n modifications, and in Source or Object form, provided that You\n meet the following conditions:\n\n (a) You must give any other recipients of the Work or\n Derivative Works a copy of this License; and\n\n (b) You must cause any modified files to carry prominent notices\n stating that You changed the files; and\n\n (c) You must retain, in the Source form of any Derivative Works\n that You distribute, all copyright, patent, trademark, and\n attribution notices from the Source form of the Work,\n excluding those notices that do not pertain to any part of\n the Derivative Works; and\n\n (d) If the Work includes a \"NOTICE\" text file as part of its\n distribution, then any Derivative Works that You distribute must\n include a readable copy of the attribution notices contained\n within such NOTICE file, excluding those notices that do not\n pertain to any part of the Derivative Works, in at least one\n of the following places: within a NOTICE text file distributed\n as part of the Derivative Works; within the Source form or\n documentation, if provided along with the Derivative Works; or,\n within a display generated by the Derivative Works, if and\n wherever such third-party notices normally appear. The contents\n of the NOTICE file are for informational purposes only and\n do not modify the License. You may add Your own attribution\n notices within Derivative Works that You distribute, alongside\n or as an addendum to the NOTICE text from the Work, provided\n that such additional attribution notices cannot be construed\n as modifying the License.\n\n You may add Your own copyright statement to Your modifications and\n may provide additional or different license terms and conditions\n for use, reproduction, or distribution of Your modifications, or\n for any such Derivative Works as a whole, provided Your use,\n reproduction, and distribution of the Work otherwise complies with\n the conditions stated in this License.\n\n 5. Submission of Contributions. Unless You explicitly state otherwise,\n any Contribution intentionally submitted for inclusion in the Work\n by You to the Licensor shall be under the terms and conditions of\n this License, without any additional terms or conditions.\n Notwithstanding the above, nothing herein shall supersede or modify\n the terms of any separate license agreement you may have executed\n with Licensor regarding such Contributions.\n\n 6. Trademarks. This License does not grant permission to use the trade\n names, trademarks, service marks, or product names of the Licensor,\n except as required for reasonable and customary use in describing the\n origin of the Work and reproducing the content of the NOTICE file.\n\n 7. Disclaimer of Warranty. Unless required by applicable law or\n agreed to in writing, Licensor provides the Work (and each\n Contributor provides its Contributions) on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n implied, including, without limitation, any warranties or conditions\n of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n PARTICULAR PURPOSE. You are solely responsible for determining the\n appropriateness of using or redistributing the Work and assume any\n risks associated with Your exercise of permissions under this License.\n\n 8. Limitation of Liability. In no event and under no legal theory,\n whether in tort (including negligence), contract, or otherwise,\n unless required by applicable law (such as deliberate and grossly\n negligent acts) or agreed to in writing, shall any Contributor be\n liable to You for damages, including any direct, indirect, special,\n incidental, or consequential damages of any character arising as a\n result of this License or out of the use or inability to use the\n Work (including but not limited to damages for loss of goodwill,\n work stoppage, computer failure or malfunction, or any and all\n other commercial damages or losses), even if such Contributor\n has been advised of the possibility of such damages.\n\n 9. Accepting Warranty or Additional Liability. While redistributing\n the Work or Derivative Works thereof, You may choose to offer,\n and charge a fee for, acceptance of support, warranty, indemnity,\n or other liability obligations and/or rights consistent with this\n License. However, in accepting such obligations, You may act only\n on Your own behalf and on Your sole responsibility, not on behalf\n of any other Contributor, and only if You agree to indemnify,\n defend, and hold each Contributor harmless for any liability\n incurred by, or claims asserted against, such Contributor by reason\n of your accepting any such warranty or additional liability.\n\n END OF TERMS AND CONDITIONS\n\n APPENDIX: How to apply the Apache License to your work.\n\n To apply the Apache License to your work, attach the following\n boilerplate notice, with the fields enclosed by brackets \"[]\"\n replaced with your own identifying information. (Don't include\n the brackets!) The text should be enclosed in the appropriate\n comment syntax for the file format. We also recommend that a\n file or class name and description of purpose be included on the\n same \"printed page\" as the copyright notice for easier\n identification within third-party archives.\n\n Copyright 2015 Google Inc\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n\n All code in any directories or sub-directories that end with *.html or\n *.css is licensed under the Creative Commons Attribution International\n 4.0 License, which full text can be found here:\n https://creativecommons.org/licenses/by/4.0/legalcode.\n\n As an exception to this license, all html or css that is generated by\n the software at the direction of the user is copyright the user. The\n user has full ownership and control over such content, including\n whether and how they wish to license it.\n" }, { "path": "README.md", "content": "# [![Web Starter Kit](https://cloud.githubusercontent.com/assets/110953/11445049/f05512ba-9520-11e5-8fdb-8c8eb5f690d0.jpg)](https://github.com/google/web-starter-kit/releases/latest)\n\n## Overview\n\n[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.\n\n### Features\n\n| Feature | Summary |\n|----------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| 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). |\n| 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) |\n| 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`) |\n| 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. |\n| 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. |\n| Built-in HTTP Server | A built-in server for previewing your site locally while you develop and iterate |\n| 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) |\n| 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) |\n| 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/). |\n| PageSpeed Insights | Web performance metrics showing how well your site performs on mobile and desktop (Run `gulp pagespeed`) |\n\n## Quickstart\n\n[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.\n\nThere are two HTML starting points, from which you can choose:\n\n- `index.html` - the default starting point, containing Material Design layout.\n- `basic.html` - no layout, but still includes our minimal mobile best-practices\n\nBe sure to look over the [installation docs](docs/install.md) to verify your environment is prepared to run WSK.\nOnce you have verified that your system can run WSK, check out the [commands](docs/commands.md) available to get started.\n\n## Web Performance\n\nWeb 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.\n\n## Browser Support\n\nAt present, we officially aim to support the last two versions of the following browsers:\n\n* Chrome\n* Edge\n* Firefox\n* Safari\n* Opera\n* Internet Explorer 9+\n\nThis 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.\n\n## Troubleshooting\n\nIf 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.\n\n## A Boilerplate-only Option\n\nIf 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.\n\n## Docs and Recipes\n\n* [File Appendix](https://github.com/google/web-starter-kit/blob/master/docs/file-appendix.md) - What do the different files here do?\n* [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\n* [Deployment guides](https://github.com/google/web-starter-kit/blob/master/docs/deploy.md) - available for Firebase, Google App Engine and other services.\n* [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.\n\n## Inspiration\n\nWeb 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.\n\n## Contributing\n\nContributions, 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.\n\n## License\n\nApache 2.0 \nCopyright 2015 Google Inc\n" }, { "path": "app/basic.html", "content": "\n\n \n \n \n \n \n \n\n \n \n\n \n \n\n \n \n \n \n\n \n \n \n \n \n\n \n \n \n\n \n \n\n \n \n \n \n \n\n \n \n \n\n \n \n \n \n\n" }, { "path": "app/humans.txt", "content": "# humanstxt.org/\n# The humans responsible & technology colophon\n\n# TEAM\n\n -- -- \n\n# THANKS\n\n \n\n# TECHNOLOGY COLOPHON\n\n HTML5, CSS3\n" }, { "path": "app/index.html", "content": "\n\n \n \n \n \n \n Web Starter Kit\n\n \n \n\n \n \n\n \n \n \n \n\n \n \n \n \n \n\n \n \n \n\n \n \n\n \n \n\n \n \n\n\n \n \n\n \n \n \n \n
\n
\n
\n
\n
\n

Web Starter Kit

\n
\n
\n
\n
\n Overview\n Features\n Details\n Technology\n FAQ\n \n
\n
\n
\n
\n
\n
\n play_circle_filled\n
\n
\n
\n

Features

\n 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.\n
\n
\n Read our features\n
\n
\n \n
    \n
  • Lorem
    • \n
  • Ipsum
    • \n
  • Dolor
    • \n
\n
\n
\n
\n
\n

Details

\n
\n
\n
\n
\n
Lorem ipsum dolor sit amet
\n Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis proident minim.\n
\n
\n
\n
\n
\n
Lorem ipsum dolor sit amet
\n Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis proident minim.\n
\n
\n
\n
\n
\n
Lorem ipsum dolor sit amet
\n Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis proident minim.\n
\n
\n
\n Read our features\n
\n
\n \n
    \n
  • Lorem
    • \n
  • Ipsum
    • \n
  • Dolor
    • \n
\n
\n
\n
\n
\n

Technology

\n 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.\n
\n
\n Read our features\n
\n
\n \n
    \n
  • Lorem
    • \n
  • Ipsum
    • \n
  • Dolor
    • \n
\n
\n
\n
\n
\n
\n
\n
Lorem ipsum dolor sit amet
\n Qui sint ut et qui nisi cupidatat. Reprehenderit nostrud proident officia exercitation anim et pariatur ex.\n
\n
\n
\n
\n
\n
Lorem ipsum dolor sit amet
\n Qui sint ut et qui nisi cupidatat. Reprehenderit nostrud proident officia exercitation anim et pariatur ex.\n
\n
\n
\n
\n
\n
\n

Features

\n 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.\n \n\n
Lorem ipsum dolor sit amet
\n Excepteur et pariatur officia veniam anim culpa cupidatat consequat ad velit culpa est non.\n
    \n
  • Nisi qui nisi duis commodo duis reprehenderit consequat velit aliquip.
    • \n
  • Dolor consectetur incididunt in ipsum laborum non et irure pariatur excepteur anim occaecat officia sint.
    • \n
  • Lorem labore proident officia excepteur do.
    • \n
\n\n

\n 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.\n

\n

\n 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.\n

\n

\n 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.\n

\n

\n 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.\n

\n

\n 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.\n

\n\n
Lorem ipsum dolor sit amet
\n\n

\n 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.\n

\n

\n 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.\n

\n

\n 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.\n

\n

\n 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.\n

\n
\n
\n
\n \n
\n
\n\n \n \n \n \n\n \n \n \n \n\n" }, { "path": "app/manifest.json", "content": "{\n \"name\": \"Web Starter Kit\",\n \"short_name\": \"WSK\",\n \"icons\": [{\n \"src\": \"images/touch/icon-128x128.png\",\n \"sizes\": \"128x128\",\n \"type\": \"image/png\"\n }, {\n \"src\": \"images/touch/apple-touch-icon.png\",\n \"sizes\": \"152x152\",\n \"type\": \"image/png\"\n }, {\n \"src\": \"images/touch/ms-touch-icon-144x144-precomposed.png\",\n \"sizes\": \"144x144\",\n \"type\": \"image/png\"\n }, {\n \"src\": \"images/touch/chrome-touch-icon-192x192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n }],\n \"start_url\": \"/index.html?homescreen=1\",\n \"display\": \"standalone\",\n \"background_color\": \"#3E4EB8\",\n \"theme_color\": \"#2F3BA2\"\n}\n" }, { "path": "app/manifest.webapp", "content": "{\n \"version\": \"1.0.0\",\n \"name\": \"Web Starter Kit\",\n \"launch_path\": \"/index.html\",\n \"description\": \"A front-end template that helps you build fast, modern mobile web apps.\",\n \"icons\": {\n \"128\": \"/images/touch/icon-128x128.png\"\n },\n \"developer\": {\n \"name\": \"\",\n \"url\": \"\"\n },\n \"installs_allowed_from\": [\n \"*\"\n ],\n \"default_locale\": \"en\",\n \"permissions\": {\n },\n \"locales\": {\n \"en\": {\n \"name\": \"Web Starter Kit\",\n \"description\": \"A front-end template that helps you build fast, modern mobile web apps.\"\n }\n }\n}" }, { "path": "app/robots.txt", "content": "# www.robotstxt.org/\n\n# Allow crawling of all content\nUser-agent: *\nDisallow:\n" }, { "path": "app/scripts/main.js", "content": "/*!\n *\n * Web Starter Kit\n * Copyright 2015 Google Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License\n *\n */\n/* eslint-env browser */\n(function() {\n 'use strict';\n\n // Check to make sure service workers are supported in the current browser,\n // and that the current page is accessed from a secure origin. Using a\n // service worker from an insecure origin will trigger JS console errors. See\n // http://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features\n var isLocalhost = Boolean(window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n );\n\n if ('serviceWorker' in navigator &&\n (window.location.protocol === 'https:' || isLocalhost)) {\n navigator.serviceWorker.register('service-worker.js')\n .then(function(registration) {\n // updatefound is fired if service-worker.js changes.\n registration.onupdatefound = function() {\n // updatefound is also fired the very first time the SW is installed,\n // and there's no need to prompt for a reload at that point.\n // So check here to see if the page is already controlled,\n // i.e. whether there's an existing service worker.\n if (navigator.serviceWorker.controller) {\n // The updatefound event implies that registration.installing is set:\n // https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-container-updatefound-event\n var installingWorker = registration.installing;\n\n installingWorker.onstatechange = function() {\n switch (installingWorker.state) {\n case 'installed':\n // At this point, the old content will have been purged and the\n // fresh content will have been added to the cache.\n // It's the perfect time to display a \"New content is\n // available; please refresh.\" message in the page's interface.\n break;\n\n case 'redundant':\n throw new Error('The installing ' +\n 'service worker became redundant.');\n\n default:\n // Ignore\n }\n };\n }\n };\n }).catch(function(e) {\n console.error('Error during service worker registration:', e);\n });\n }\n\n // Your custom JavaScript goes here\n})();\n" }, { "path": "app/scripts/sw/runtime-caching.js", "content": "/*!\n *\n * Web Starter Kit\n * Copyright 2015 Google Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License\n *\n */\n/* eslint-env worker */\n// global.toolbox is defined in a different script, sw-toolbox.js, which is part of the\n// https://github.com/GoogleChrome/sw-toolbox project.\n// That sw-toolbox.js script must be executed first, so it needs to be listed before this in the\n// importScripts() call that the parent service worker makes.\n(function(global) {\n 'use strict';\n\n // See https://github.com/GoogleChrome/sw-toolbox/blob/6e8242dc328d1f1cfba624269653724b26fa94f1/README.md#toolboxroutergeturlpattern-handler-options\n // and https://github.com/GoogleChrome/sw-toolbox/blob/6e8242dc328d1f1cfba624269653724b26fa94f1/README.md#toolboxfastest\n // for more details on how this handler is defined and what the toolbox.fastest strategy does.\n global.toolbox.router.get('/(.*)', global.toolbox.fastest, {\n origin: /\\.(?:googleapis|gstatic)\\.com$/\n });\n})(self);\n" }, { "path": "app/service-worker.js", "content": "// This file is intentionally without code.\n// It's present so that service worker registration will work when serving from the 'app' directory.\n// The version of service-worker.js that's present in the 'dist' directory is automatically\n// generated by the 'generate-service-worker' gulp task, and contains code to precache resources.\n" }, { "path": "app/styles/main.css", "content": "/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/*\nNote: any .css or .scss files included in the 'styles' directory\nwill be correctly compiled during `gulp serve` and `gulp`\n */\n\nhtml, body {\n font-family: 'Roboto', 'Helvetica', sans-serif;\n margin: 0;\n padding: 0;\n}\n.mdl-demo .mdl-layout__header-row {\n padding-left: 40px;\n}\n.mdl-demo .mdl-layout.is-small-screen .mdl-layout__header-row h3 {\n font-size: inherit;\n}\n.mdl-demo .mdl-layout__tab-bar-button {\n display: none;\n}\n.mdl-demo .mdl-layout.is-small-screen .mdl-layout__tab-bar .mdl-button {\n display: none;\n}\n.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar,\n.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar-container {\n overflow: visible;\n}\n.mdl-demo .mdl-layout__tab-bar-container {\n height: 64px;\n}\n.mdl-demo .mdl-layout__tab-bar {\n padding: 0;\n padding-left: 16px;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n}\n.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab {\n height: 64px;\n line-height: 64px;\n}\n.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab.is-active::after {\n background-color: white;\n height: 4px;\n}\n.mdl-demo main > .mdl-layout__tab-panel {\n padding: 8px;\n padding-top: 48px;\n}\n.mdl-demo .mdl-card {\n height: auto;\n display: flex;\n flex-direction: column;\n}\n.mdl-demo .mdl-card > * {\n height: auto;\n}\n.mdl-demo .mdl-card .mdl-card__supporting-text {\n margin: 40px;\n flex-grow: 1;\n padding: 0;\n color: inherit;\n width: calc(100% - 80px);\n}\n.mdl-demo.mdl-demo .mdl-card__supporting-text h4 {\n margin-top: 0;\n margin-bottom: 20px;\n}\n.mdl-demo .mdl-card__actions {\n margin: 0;\n padding: 4px 40px;\n color: inherit;\n}\n.mdl-demo .mdl-card__actions a {\n color: #00BCD4;\n margin: 0;\n}\n.mdl-demo .mdl-card__actions a:hover,\n.mdl-demo .mdl-card__actions a:active {\n color: inherit;\n background-color: transparent;\n}\n.mdl-demo .mdl-card__supporting-text + .mdl-card__actions {\n border-top: 1px solid rgba(0, 0, 0, 0.12);\n}\n.mdl-demo #add {\n position: absolute;\n right: 40px;\n top: 36px;\n z-index: 999;\n}\n\n.mdl-demo .mdl-layout__content section:not(:last-of-type) {\n position: relative;\n margin-bottom: 48px;\n}\n.mdl-demo section.section--center {\n max-width: 860px;\n}\n.mdl-demo #features section.section--center {\n max-width: 620px;\n}\n.mdl-demo section > header{\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.mdl-demo section > .section__play-btn {\n min-height: 200px;\n}\n.mdl-demo section > header > .material-icons {\n font-size: 3rem;\n}\n.mdl-demo section > button {\n position: absolute;\n z-index: 99;\n top: 8px;\n right: 8px;\n}\n.mdl-demo section .section__circle {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-grow: 0;\n flex-shrink: 1;\n}\n.mdl-demo section .section__text {\n flex-grow: 1;\n flex-shrink: 0;\n padding-top: 8px;\n}\n.mdl-demo section .section__text h5 {\n font-size: inherit;\n margin: 0;\n margin-bottom: 0.5em;\n}\n.mdl-demo section .section__text a {\n text-decoration: none;\n}\n.mdl-demo section .section__circle-container > .section__circle-container__circle {\n width: 64px;\n height: 64px;\n border-radius: 32px;\n margin: 8px 0;\n}\n.mdl-demo section.section--footer .section__circle--big {\n width: 100px;\n height: 100px;\n border-radius: 50px;\n margin: 8px 32px;\n}\n.mdl-demo .is-small-screen section.section--footer .section__circle--big {\n width: 50px;\n height: 50px;\n border-radius: 25px;\n margin: 8px 16px;\n}\n.mdl-demo section.section--footer {\n padding: 64px 0;\n margin: 0 -8px -8px -8px;\n}\n.mdl-demo section.section--center .section__text:not(:last-child) {\n border-bottom: 1px solid rgba(0,0,0,.13);\n}\n.mdl-demo .mdl-card .mdl-card__supporting-text > h3:first-child {\n margin-bottom: 24px;\n}\n.mdl-demo .mdl-layout__tab-panel:not(#overview) {\n background-color: white;\n}\n.mdl-demo #features section {\n margin-bottom: 72px;\n}\n.mdl-demo #features h4, #features h5 {\n margin-bottom: 16px;\n}\n.mdl-demo .toc {\n border-left: 4px solid #C1EEF4;\n margin: 24px;\n padding: 0;\n padding-left: 8px;\n display: flex;\n flex-direction: column;\n}\n.mdl-demo .toc h4 {\n font-size: 0.9rem;\n margin-top: 0;\n}\n.mdl-demo .toc a {\n color: #4DD0E1;\n text-decoration: none;\n font-size: 16px;\n line-height: 28px;\n display: block;\n}\n.mdl-demo .mdl-menu__container {\n z-index: 99;\n}\n" }, { "path": "docs/commands.md", "content": "There are many commands available to help you build and test sites. Here are a few highlights to get started with.\n\n## Watch For Changes & Automatically Refresh Across Devices\n\n```sh\n$ gulp serve\n```\n\nThis outputs an IP address you can use to locally test and another that can be used on devices\nconnected to your network.\n`serve` does not use [service worker](http://www.html5rocks.com/en/tutorials/service-worker/introduction/)\ncaching, so your site will stop being available when the web server stops running.\n\n## Build & Optimize\n\n```sh\n$ gulp\n```\n\nBuild and optimize the current project, ready for deployment.\nThis includes linting as well as image, script, stylesheet and HTML optimization and minification.\nAlso, a [service worker](http://www.html5rocks.com/en/tutorials/service-worker/introduction/)\nscript will be automatically generated, which will take care of precaching your sites' resources.\nOn browsers that [support](https://jakearchibald.github.io/isserviceworkerready/) service\nworkers, the site will be loaded directly from the service worker cache, bypassing the server.\nThis means that this version of the site will work when the server isn't running or when there is\nno network connectivity.\n\n## Serve the Fully Built & Optimized Site\n\n```sh\n$ gulp serve:dist\n```\n\nThis outputs an IP address you can use to locally test and another that can be used on devices\nconnected to your network.\n`serve:dist` includes will serve a local copy of the built and optimized site generated as part\nof the `default` task.\nBecause the optimized site includes a service worker which serves your site directly from the\ncache, you will need to reload the page after regenerating the site to pick up the latest changes.\n`serve:dist` uses a different HTTP port than `serve`, which means that the service workers are\nkept isolated in different [scopes](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Registering_your_worker).\n\n## Difference Between `serve` & `serve:dist`\n\nIt is important to note a difference between the `serve` and `serve:dist` tasks.\n\n* `serve` uses a no-op `service-worker.js` and cannot run offline.\n* `serve:dist` uses the `sw-precache`-generated output and can run offline.\n\nThe `serve` task runs on port 3000 and `serve:dist` runs on port 3001.\nThe main purpose is to ensure that different service workers will not impact each other's environment. \nUsing the `sw-precache`-generated output makes it very difficult to quickly test local changes which is not ideal for a development server environment.\n\n## Performance Insights\n\n```sh\n$ gulp pagespeed\n```\n\nRuns 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.\n" }, { "path": "docs/deploy-appengine.md", "content": "# Deploy to Google App Engine\n\nGoogle 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. \n\n## Create the project in the Developer Console\n\nIn [Google Developers Console](https://console.developers.google.com/project):\n\n1. Create a new project\n2. Take note of the project ID (e.g `algebraic-depot-114712`)\n\n## Install Google Cloud SDK\n\nSee .\n\n## Download source code\n\nDownload and extract [Web Starter Kit](https://github.com/google/web-starter-kit/releases/latest) to a local directory.\n\nCreate a new file in the root of your project called `app.yaml`. Paste the following contents into it:\n\n```\napplication: algebraic-depot-114712\nversion: 0\nruntime: php55\napi_version: 1\nthreadsafe: false\n\nhandlers:\n- url: /$\n static_files: index.html\n upload: index.html\n\n- url: /(.*)\n static_files: \\1\n upload: .*\n```\n\nThis 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).\n\n## Install web-starter-kit dependencies (e.g Node)\n\nSee .\n\n## Install local dependencies and generate assets\n\n```\nnpm install\ngulp \n````\n\n## Deploy\n\n````\ncp app.yaml dist\ncd dist\nappcfg.py update . # \"rm ~/.appcfg_oauth2_tokens\" if error\n````\n\nIf the update fails, check that your `application` in `app.yaml` matches the project id in the Developers Console.\n\nIf everything has worked, you will be able to see your fully deployed site at `.appspot.com` (e.g `https://algebraic-depot-114712.appspot.com/`).\n\n" }, { "path": "docs/deploy-firebase.md", "content": "# Deploy to Firebase using Pretty URLs\n\nFirebase 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.\n\nThe instructions below are based on the [Firebase hosting quick start\nguide](https://www.firebase.com/docs/hosting/quickstart.html).\n\n1. [Sign up for a Firebase account](https://www.firebase.com/signup/)\n\n1. Install the Firebase command line tools\n\n npm install -g firebase-tools\n\n The `-g` flag instructs `npm` to install the package globally so that you\n can use the `firebase` command from any directory. You may need\n to install the package with `sudo` privileges.\n\n1. Login to your Firebase account\n\n firebase login\n\n1. `cd` into your project directory\n\n1. Inititalize the Firebase application\n\n firebase init\n\n Firebase asks you which app you would like to use for hosting. If you just\n signed up, you should see one app with a randomly-generated name. You can\n use that one. Otherwise go to\n [https://www.firebase.com/account](https://www.firebase.com/account) to\n create a new app.\n\n1. Firebase asks you the name of your app's public directory. Enter `dist`.\n This works because when you run `gulp` to build your application, WSK\n builds everything and places it all in `dist`. So `dist` contains\n everything your application needs to run.\n\n1. Build\n\n gulp\n\n1. Deploy\n\n firebase deploy\n\n The URL to your live site is listed in the output.\n\n You can see a deployed version of WSK at [https://web-starter-kit.firebaseapp.com/](https://web-starter-kit.firebaseapp.com/).\n" }, { "path": "docs/deploy.md", "content": "# Deployment\n\nShould you wish to deploy your Web Starter Kit site, a number of helpful guides are available. Select one from below to continue.\n\n* [Firebase](deploy-firebase.md)\n* [Google App Engine](deploy-appengine.md)\n* [GitHub Pages](https://github.com/yeoman/generator-gulp-webapp/blob/master/docs/recipes/gh-pages.md)\n* [Amazon AWS S3](https://github.com/yeoman/generator-gulp-webapp/blob/master/docs/recipes/aws-s3-deployment.md)\n* [Heroku](https://github.com/yeoman/generator-gulp-webapp/blob/master/docs/recipes/node-heroku.md)\n" }, { "path": "docs/file-appendix.md", "content": "\n## .babelrc\n\n[.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. \n\n## .editorconfig\n\n[EditorConfig](http://editorconfig.org/) is a file format and collection of text editor plugins for maintaining consistent coding styles between different editors and IDEs.\n\n## gulpfile.babel.js\n\n[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. \n\nIn 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. \n\n`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.\n\n## app/scripts/main.js\n\nThis is a file where your custom JavaScript can go. \n\n## app/styles/main.css\n\nThis 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.\n\n## app/manifest.json\n\n`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. \n\nFor 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).\n\n## app/manifest.webapp\n\n`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. \n\nThe 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.\n\nThis manifest included in Web Starter Kit until Firefox OS switches to using the manifest spec instead.\n\n## package.json\n\nA [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. \n\n`package.json` can also contain other metadata such as a project description, version, license and configuration information.\n\n## app/service-worker.js\n\nA [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/).\n" }, { "path": "docs/install.md", "content": "# Install\n\n**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.\n\n---\n\nTo take advantage of Web Starter Kit you need to:\n\n1. Get a copy of the code.\n2. Install the dependencies if you don't already have them.\n3. Modify the application to your liking.\n4. Deploy your production code.\n\n## Getting the code\n\n[Download](https://github.com/google/web-starter-kit/releases/latest) and extract WSK to where you want to work.\n\n## Prerequisites\n\n### [Node.js](https://nodejs.org)\n\nBring up a terminal and type `node --version`.\nNode should respond with a version at or above 0.10.x.\nIf you require Node, go to [nodejs.org](https://nodejs.org) and click on the big green Install button.\n\n### [Gulp](http://gulpjs.com)\n\nBring up a terminal and type `gulp --version`.\nIf Gulp is installed it should return a version number at or above 3.9.x.\nIf you need to install/upgrade Gulp, open up a terminal and type in the following:\n\n```sh\n$ npm install --global gulp\n```\n\n*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.*\n\n\n### Local dependencies\n\nNext, install the local dependencies Web Starter Kit requires:\n\n```sh\n$ npm install\n```\n\nNote: if you have the [Yarn](https://yarnpkg.com/) package manager installed, you can just run `yarn`.\nWeb Starter Kit includes a yarn.lock file that will be used here.\n\nThat's it! You should now have everything needed to use the Web Starter Kit.\n\n---\n\nYou may also want to get used to some of the [commands](commands.md) available.\n" }, { "path": "docs/mdl-sass.md", "content": "## Using Material Design Lite's Sass in Web Starter Kit\n\nIf 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.\n\n> This guide is intended to be used with Web Starter Kit 0.6.0 and above.\n\n1. 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.\n2. Download the [latest release](https://github.com/google/material-design-lite/releases/latest) build of Material Design Lite (`material-design-lite-.zip` where `version` is the latest version available). This file will include the Sass source files we need to get started.\n3. Extract `material-design-lite-.zip` to a local folder on your drive and open it. You should see a file/folder structure similar to the below:\n\n```\n├── LICENSE\n├── README.md\n├── bower.json\n├── gulpfile.js\n├── material.css\n├── material.js\n├── material.min.css\n├── material.min.css.map\n├── material.min.js\n├── material.min.js.map\n├── package.json\n├── src\n└── utils\n```\n\nThe `src` directory above contains MDL's Sass files and the JavaScript sources for all MDL components.\n\n4. Copy the `src` directory from step 3. to Web Starter Kit's `app/styles` directory. Your folder structure for `app/styles` should now resemble:\n\n```\n├── main.css\n└── src\n```\n\nNext 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. \n\n5. First, we'll switch the CDN-hosted stylesheets to our local version.\n\nReplace the following line:\n\n```html\n\n```\n\nwith:\n\n```html\n\n```\n\nIf 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. \n\nWe'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`.\n\nOne final change for getting Sass working is adding the following line to the very top of `app/styles/main.scss`:\n\n```\n@import \"src/material-design-lite\";\n```\n\nThis 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.\n\n6. Next, we'll localise our JavaScript files for MDL. Once again, we'll edit `app/index.html`:\n\nRemove:\n\n```html\n\n```\n\nand find the following block in `app/index.html`:\n\n```html\n \n \n \n```\n\nReplace the above block with the following code:\n\n```html\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n```\n\nThen, 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:\n\n```js\ngulp.task('scripts', () =>\n gulp.src([\n // Note: Since we are not using useref in the scripts build pipeline,\n // you need to explicitly list your scripts here in the right order\n // to be correctly concatenated\n './app/scripts/main.js'\n ])\n```\n\nWe'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`:\n\n```js\ngulp.task('scripts', () =>\n gulp.src([\n // Component handler\n './app/styles/src/mdlComponentHandler.js',\n // Base components\n './app/styles/src/button/button.js',\n './app/styles/src/checkbox/checkbox.js',\n './app/styles/src/icon-toggle/icon-toggle.js',\n './app/styles/src/menu/menu.js',\n './app/styles/src/progress/progress.js',\n './app/styles/src/radio/radio.js',\n './app/styles/src/slider/slider.js',\n './app/styles/src/spinner/spinner.js',\n './app/styles/src/switch/switch.js',\n './app/styles/src/tabs/tabs.js',\n './app/styles/src/textfield/textfield.js',\n './app/styles/src/tooltip/tooltip.js',\n // Complex components (which reuse base components)\n './app/styles/src/layout/layout.js',\n './app/styles/src/data-table/data-table.js',\n // And finally, the ripples\n './app/styles/src/ripple/ripple.js',\n // Other scripts,\n './app/scripts/main.js'\n ])\n```\n\n\n> 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. \n\nSimilar to styles, you can comment out what you don't need here if you decide to only use a smaller set of components. \n\n7. Finally, we can run `gulp serve` to preview our site or `gulp` to build a production version. Yay!\n\n## Bonus tips\n\n### Configuring colors\n\nYou will probably want to configure the color theme used in MDL. \n\nMDL supports Material Design's [color palette](https://www.google.com/design/spec/style/color.html#color-color-palette) through Sass variables. \n\nIf 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.\n\nThis can be done using your setup as follows:\n\n1. Run `gulp serve` to preview your site. \n2. Open `app/styles/src/_variables.scss` in your Text Editor.\n3. 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`.\n\n```\n$color-primary: $palette-indigo-500 !default;\n$color-primary-dark: $palette-indigo-700 !default;\n$color-accent: $palette-pink-A200 !default;\n```\n\nWe 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. \n\nFor this example, we're going to change out `palette-indigo-500` for `palette-purple-500` and `palette-indigo-700` for `palette-deep-purple-700`.\n\n```\n$color-primary: $palette-purple-500 !default;\n$color-primary-dark: $palette-deep-purple-700 !default;\n$color-accent: $palette-pink-A200 !default;\n```\n\nMake the above change and hit save. The page should refresh, now showing you your customised theme in action. \n\nFor 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.\n\n\n\n\n" }, { "path": "gulpfile.babel.js", "content": "/**\n *\n * Web Starter Kit\n * Copyright 2015 Google Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License\n *\n */\n\n'use strict';\n\n// This gulpfile makes use of new JavaScript features.\n// Babel handles this without us having to do anything. It just works.\n// You can read more about the new JavaScript features here:\n// https://babeljs.io/docs/learn-es2015/\n\nimport path from 'path';\nimport gulp from 'gulp';\nimport del from 'del';\nimport runSequence from 'run-sequence';\nimport browserSync from 'browser-sync';\nimport swPrecache from 'sw-precache';\nimport gulpLoadPlugins from 'gulp-load-plugins';\nimport {output as pagespeed} from 'psi';\nimport pkg from './package.json';\n\nconst $ = gulpLoadPlugins();\nconst reload = browserSync.reload;\n\n// Lint JavaScript\ngulp.task('lint', () =>\n gulp.src(['app/scripts/**/*.js','!node_modules/**'])\n .pipe($.eslint())\n .pipe($.eslint.format())\n .pipe($.if(!browserSync.active, $.eslint.failAfterError()))\n);\n\n// Optimize images\ngulp.task('images', () =>\n gulp.src('app/images/**/*')\n .pipe($.cache($.imagemin({\n progressive: true,\n interlaced: true\n })))\n .pipe(gulp.dest('dist/images'))\n .pipe($.size({title: 'images'}))\n);\n\n// Copy all files at the root level (app)\ngulp.task('copy', () =>\n gulp.src([\n 'app/*',\n '!app/*.html',\n 'node_modules/apache-server-configs/dist/.htaccess'\n ], {\n dot: true\n }).pipe(gulp.dest('dist'))\n .pipe($.size({title: 'copy'}))\n);\n\n// Compile and automatically prefix stylesheets\ngulp.task('styles', () => {\n const AUTOPREFIXER_BROWSERS = [\n 'ie >= 10',\n 'ie_mob >= 10',\n 'ff >= 30',\n 'chrome >= 34',\n 'safari >= 7',\n 'opera >= 23',\n 'ios >= 7',\n 'android >= 4.4',\n 'bb >= 10'\n ];\n\n // For best performance, don't add Sass partials to `gulp.src`\n return gulp.src([\n 'app/styles/**/*.scss',\n 'app/styles/**/*.css'\n ])\n .pipe($.newer('.tmp/styles'))\n .pipe($.sourcemaps.init())\n .pipe($.sass({\n precision: 10\n }).on('error', $.sass.logError))\n .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))\n .pipe(gulp.dest('.tmp/styles'))\n // Concatenate and minify styles\n .pipe($.if('*.css', $.cssnano()))\n .pipe($.size({title: 'styles'}))\n .pipe($.sourcemaps.write('./'))\n .pipe(gulp.dest('dist/styles'))\n .pipe(gulp.dest('.tmp/styles'));\n});\n\n// Concatenate and minify JavaScript. Optionally transpiles ES2015 code to ES5.\n// to enable ES2015 support remove the line `\"only\": \"gulpfile.babel.js\",` in the\n// `.babelrc` file.\ngulp.task('scripts', () =>\n gulp.src([\n // Note: Since we are not using useref in the scripts build pipeline,\n // you need to explicitly list your scripts here in the right order\n // to be correctly concatenated\n './app/scripts/main.js'\n // Other scripts\n ])\n .pipe($.newer('.tmp/scripts'))\n .pipe($.sourcemaps.init())\n .pipe($.babel())\n .pipe($.sourcemaps.write())\n .pipe(gulp.dest('.tmp/scripts'))\n .pipe($.concat('main.min.js'))\n .pipe($.uglify({preserveComments: 'some'}))\n // Output files\n .pipe($.size({title: 'scripts'}))\n .pipe($.sourcemaps.write('.'))\n .pipe(gulp.dest('dist/scripts'))\n .pipe(gulp.dest('.tmp/scripts'))\n);\n\n// Scan your HTML for assets & optimize them\ngulp.task('html', () => {\n return gulp.src('app/**/*.html')\n .pipe($.useref({\n searchPath: '{.tmp,app}',\n noAssets: true\n }))\n\n // Minify any HTML\n .pipe($.if('*.html', $.htmlmin({\n removeComments: true,\n collapseWhitespace: true,\n collapseBooleanAttributes: true,\n removeAttributeQuotes: true,\n removeRedundantAttributes: true,\n removeEmptyAttributes: true,\n removeScriptTypeAttributes: true,\n removeStyleLinkTypeAttributes: true,\n removeOptionalTags: true\n })))\n // Output files\n .pipe($.if('*.html', $.size({title: 'html', showFiles: true})))\n .pipe(gulp.dest('dist'));\n});\n\n// Clean output directory\ngulp.task('clean', () => del(['.tmp', 'dist/*', '!dist/.git'], {dot: true}));\n\n// Watch files for changes & reload\ngulp.task('serve', ['scripts', 'styles'], () => {\n browserSync({\n notify: false,\n // Customize the Browsersync console logging prefix\n logPrefix: 'WSK',\n // Allow scroll syncing across breakpoints\n scrollElementMapping: ['main', '.mdl-layout'],\n // Run as an https by uncommenting 'https: true'\n // Note: this uses an unsigned certificate which on first access\n // will present a certificate warning in the browser.\n // https: true,\n server: ['.tmp', 'app'],\n port: 3000\n });\n\n gulp.watch(['app/**/*.html'], reload);\n gulp.watch(['app/styles/**/*.{scss,css}'], ['styles', reload]);\n gulp.watch(['app/scripts/**/*.js'], ['lint', 'scripts', reload]);\n gulp.watch(['app/images/**/*'], reload);\n});\n\n// Build and serve the output from the dist build\ngulp.task('serve:dist', ['default'], () =>\n browserSync({\n notify: false,\n logPrefix: 'WSK',\n // Allow scroll syncing across breakpoints\n scrollElementMapping: ['main', '.mdl-layout'],\n // Run as an https by uncommenting 'https: true'\n // Note: this uses an unsigned certificate which on first access\n // will present a certificate warning in the browser.\n // https: true,\n server: 'dist',\n port: 3001\n })\n);\n\n// Build production files, the default task\ngulp.task('default', ['clean'], cb =>\n runSequence(\n 'styles',\n ['lint', 'html', 'scripts', 'images', 'copy'],\n 'generate-service-worker',\n cb\n )\n);\n\n// Run PageSpeed Insights\ngulp.task('pagespeed', cb =>\n // Update the below URL to the public URL of your site\n pagespeed('example.com', {\n strategy: 'mobile'\n // By default we use the PageSpeed Insights free (no API key) tier.\n // Use a Google Developer API key if you have one: http://goo.gl/RkN0vE\n // key: 'YOUR_API_KEY'\n }, cb)\n);\n\n// Copy over the scripts that are used in importScripts as part of the generate-service-worker task.\ngulp.task('copy-sw-scripts', () => {\n return gulp.src(['node_modules/sw-toolbox/sw-toolbox.js', 'app/scripts/sw/runtime-caching.js'])\n .pipe(gulp.dest('dist/scripts/sw'));\n});\n\n// See http://www.html5rocks.com/en/tutorials/service-worker/introduction/ for\n// an in-depth explanation of what service workers are and why you should care.\n// Generate a service worker file that will provide offline functionality for\n// local resources. This should only be done for the 'dist' directory, to allow\n// live reload to work as expected when serving from the 'app' directory.\ngulp.task('generate-service-worker', ['copy-sw-scripts'], () => {\n const rootDir = 'dist';\n const filepath = path.join(rootDir, 'service-worker.js');\n\n return swPrecache.write(filepath, {\n // Used to avoid cache conflicts when serving on localhost.\n cacheId: pkg.name || 'web-starter-kit',\n // sw-toolbox.js needs to be listed first. It sets up methods used in runtime-caching.js.\n importScripts: [\n 'scripts/sw/sw-toolbox.js',\n 'scripts/sw/runtime-caching.js'\n ],\n staticFileGlobs: [\n // Add/remove glob patterns to match your directory setup.\n `${rootDir}/images/**/*`,\n `${rootDir}/scripts/**/*.js`,\n `${rootDir}/styles/**/*.css`,\n `${rootDir}/*.{html,json}`\n ],\n // Translates a static file path to the relative URL that it's served from.\n // This is '/' rather than path.sep because the paths returned from\n // glob always use '/'.\n stripPrefix: rootDir + '/'\n });\n});\n\n// Load custom tasks from the `tasks` directory\n// Run: `npm install --save-dev require-dir` from the command-line\n// try { require('require-dir')('tasks'); } catch (err) { console.error(err); }\n" }, { "path": "package.json", "content": "{\n \"devDependencies\": {\n \"apache-server-configs\": \"^2.14.0\",\n \"babel-core\": \"^6.14.0\",\n \"babel-preset-es2015\": \"^6.0.15\",\n \"browser-sync\": \"^2.14.0\",\n \"del\": \"^2.2.2\",\n \"eslint-config-google\": \"^0.3.0\",\n \"gulp\": \"^3.9.1\",\n \"gulp-autoprefixer\": \"^3.1.1\",\n \"gulp-babel\": \"^6.1.2\",\n \"gulp-cache\": \"^0.4.5\",\n \"gulp-concat\": \"^2.6.0\",\n \"gulp-cssnano\": \"^2.1.2\",\n \"gulp-eslint\": \"^1.1.1\",\n \"gulp-htmlmin\": \"^2.0.0\",\n \"gulp-if\": \"^2.0.1\",\n \"gulp-imagemin\": \"^2.4.0\",\n \"gulp-load-plugins\": \"^1.2.4\",\n \"gulp-newer\": \"^1.2.0\",\n \"gulp-sass\": \"^2.3.2\",\n \"gulp-size\": \"^2.1.0\",\n \"gulp-sourcemaps\": \"^1.6.0\",\n \"gulp-uglify\": \"^1.5.4\",\n \"gulp-useref\": \"^3.1.0\",\n \"psi\": \"^2.0.4\",\n \"run-sequence\": \"^1.0.1\",\n \"sw-precache\": \"^3.2.0\",\n \"sw-toolbox\": \"^3.2.1\"\n },\n \"engines\": {\n \"node\": \">=0.12\"\n },\n \"private\": true,\n \"scripts\": {\n \"test\": \"gulp && git status | grep 'working directory clean' >/dev/null || (echo 'Please commit all changes generated by building'; exit 1)\"\n },\n \"eslintConfig\": {\n \"extends\": \"google\"\n }\n}\n" } ]