AMP Start source code and templates .
Clone or download
Permalink
Failed to load latest commit information.
components Combined #822 and #823 typo fixes into a single PR (#825) Aug 14, 2018
css Working refactor (#813) Mar 31, 2018
functions [TRAVEL] Render inital Travel results (#755) Nov 9, 2017
hl-partials Combined #822 and #823 typo fixes into a single PR (#825) Aug 14, 2018
img Land see launch (#802) Feb 8, 2018
mocks Template fixes (#790) Dec 13, 2017
tasks Bundling Templates for download (#616) Sep 18, 2017
templates Working refactor (#813) Mar 31, 2018
tools Added the gulp-util plugin to the package.json (#588) Aug 14, 2017
utils Adding analytics for downloads and previews (#669) Oct 16, 2017
www Fix broken image on homepage for 1x DPR (fixes #811) (#812) Apr 3, 2018
.firebaserc [ampstart.com] Home and templates page bug fixes (#645) Oct 11, 2017
.gitignore Built the webpack config for the AMP Start Configurator (#581) Aug 8, 2017
.travis.yml fix travis to 7 (#448) Jun 1, 2017
CODE_OF_CONDUCT.md License et all Dec 16, 2016
CONTRIBUTING.md License et all Dec 16, 2016
LICENSE Fix broken find/replace across project (#818) Jun 28, 2018
README.md Amp Start Configurator Gulp Tasks (#585) Aug 11, 2017
data.json Added some more descriptive alts to images (#545) Jul 21, 2017
database.rules.json add firebase configs Jan 31, 2017
firebase.json [Travel] Results list (#733) Nov 3, 2017
gulpfile.js Templates page (#621) Sep 20, 2017
karma.conf.js Set Up Karma, and Mocha for testing *.spec.js files in the configurat… Aug 9, 2017
package.json update gulp-html-validator (#808) Feb 28, 2018
renovate.json Add renovate.json (#821) Sep 17, 2018
webpack.config.js [Configurator] Added Web Workers to Support CSS Transpilation (#593) Aug 18, 2017
yarn.lock chore(merge): landing page (#525) Jul 18, 2017

README.md

AMP Start

A collection of quick-start templates to build your AMP page quickly and easily. AMP Start is built on top of Basscss a low-level CSS toolkit.

Workspace Setup

Installation

  1. Install NodeJS.
  2. In the repo directory, run npm i command to install the required npm packages.

Build & Test

Command Description
npm run build[1] Builds the AMP library.
npm run clean Removes build output.
npm run www Recompile www to build directory.
npm run highlight Build HTML for code highlighting.
npm run watch[1] Watches for changes in files, re-builds development files.
npm run serve Serves content in repo dist/ dir over http://localhost:8000/. Also, watches/livereloads for file changes. Port number can be changed with -- --port="PORT_NUMBER_HERE"
npm run configurator Serves only the amp start configurator livereload/development server at http://localhost:8080/. Port number can be changed with -- --port="PORT_NUMBER_HERE"

[1] On Windows, this command must be run as administrator.

Deploying AMP on Cloud for testing on devices

For deploying and testing local AMP builds on Firebase, please follow the steps outlined in this page. Note that the firebase configuration is already created in the project.

Repository Layout

Directory Description
components/ CSS and HTML snippets (Mustache) for AMP Start components.
build/ (generated) intermediate generated files.
css/ CSS assets.
css/ampstart-base CSS Base AMP Start elements like buttons.
css/templates CSS for AMP Start templates.
css/www CSS for www.ampstart.com.
dist/ (generated).
hl-partials/ Partials that help generate copy pastable html for www.ampstart.com/components.html.
img/ Image assets.
tasks/ Gulp tasks.
templates/ AMP Start template HTML.
www/ www.ampstart.com

Supported browsers

In general we support the 2 latest versions of major browsers like Chrome, Firefox, Edge, Safari and Opera. We support desktop, phone, tablet and the web view version of these respective browsers.

Beyond that, the core AMP library and builtin elements should aim for very wide browser support and we accept fixes for all browsers with market share greater than 1 percent.

In particular, we try to maintain "it might not be perfect but isn't broken" - support for the Android 4.0 system browser and Chrome 28+ on phones.

Notes

amp-mustache

Since ampstart uses the Mustache language to build files, it can conflict with the amp-mustache template. To fix this, use <% instead of {{:

  <template type="amp-mustache">
      <%title%>
      <amp-img src="<%imageUrl%>" width="50" height="50"></amp-img>
  </template>

Who makes AMP Start?

AMP Start is made by the AMP Project, and is licensed under the Apache License, Version 2.0.

Code of conduct