Created
June 7, 2019 10:13
-
-
Save sebastianbenz/45d3dae499f35dedb65e01546356ff7a to your computer and use it in GitHub Desktop.
AMP Sample Template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--- | |
| - author: your-github-user-name | |
| - formats | |
| - websites | |
| - ads | |
| - stories | |
| ---> | |
| <!-- | |
| ## introduction | |
| todo: explain what this sample demonstrates. | |
| --> | |
| <!-- --> | |
| <!doctype html> | |
| <html ⚡> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="canonical" href="{{filename}}"> | |
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | |
| <script async src="https://cdn.ampproject.org/v0.js"></script> | |
| <title>{{title}}</title> | |
| <!-- | |
| ## Setup | |
| TODO: explain which components need to be imported. no need to explain the amp boilerplate. | |
| --> | |
| <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script> | |
| <!-- | |
| TODO: add a comment for every imported extension. | |
| --> | |
| <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-1.0.js"></script> | |
| <style amp-custom> | |
| /* default styles, please remove any you're not using */ | |
| :root { | |
| --color-primary: #005AF0; | |
| --color-secondary: #00DCC0; | |
| --color-text-light: #fff; | |
| --color-text-dark: #000; | |
| --color-error: #B00020; | |
| --color-bg-light: #FAFAFC; | |
| --space-1: .5rem; /* 8px */ | |
| --space-2: 1rem; /* 16px */ | |
| --space-3: 1.5rem; /* 24px */ | |
| --space-4: 2rem; /* 32px */ | |
| --box-shadow-1: 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 1px -1px rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); | |
| } | |
| /* use default styles like this: */ | |
| button { | |
| margin: var(--space-1) | |
| background: var(--color-bg-primary) | |
| }; | |
| </style> | |
| <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> | |
| </head> | |
| <body> | |
| <!-- | |
| ## Basic usage | |
| TODO: describe your example here (feel free to rename the heading). | |
| --> | |
| <amp-img src="/img/image1.jpg" width="200" height="100"></amp-img> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Index