# amp-snippets package

Snippets for creating [AMP HTML](https://www.ampproject.org/) (Active Mobile Pages).

Created by [Nick Drewe](https://www.twitter.com/nickdrewe) and the team building [wethrift.com](https://www.wethrift.com) and [searchmy.bio](https://www.searchby.bio).

- [Wethrift on GitHub](https://github.com/teamwethrift)
- [Wethrift development resources and links](https://wethrift.github.io/)

## Installation

### Package Control (recommended)

The easiest way to install is by using [Package Control](https://packagecontrol.io/packages/AMP%20Snippets). See [installation docs](https://packagecontrol.io/installation).

- Open Package Control (or hit Ctrl + Shift + P or Cmd + Shift + P)
- Type _install_ and hit enter
- Type _AMP Snippets_ and hit enter again

### Cloning the Repository

You can manually install the package by using Git.

- Navigate to Sublime’s Packages directory
- Run `git clone https://github.com/teamwethrift/amp-snippets.git`

To find out where the Packages directory is, you can go to _Preferences_ and _Browse packages…_. This will open the directory in your file explorer.

## Quickstart

`amp-html` provides the necessary boilerplate to get going with AMP.

The extended snippets require you to include a corresponding `<script>` tag in the header. These snippets end with the `-script` suffix. As an example, the mustache snippet (`amp-mustache`) is used with the corresponding `amp-mustache-script` snippet.

## Snippets
| Snippet        | Description    |
| :------------- | :------------- |
| [amp-accordion](https://www.ampproject.org/docs/reference/extended/amp-accordion.html) | An accordion provides a way for viewers to glance at the content outline and jump to any section. |
| [amp-ad](https://www.ampproject.org/docs/reference/amp-ad.html) | A container to display an ad. |
| [amp-anim](https://www.ampproject.org/docs/reference/extended/amp-anim.html) | A runtime-managed animated image, typically a GIF. |
| [amp-audio](https://www.ampproject.org/docs/reference/extended/amp-audio.html) | A replacement for the HTML5 audio tag. |
| [amp-carousel](https://www.ampproject.org/docs/reference/extended/amp-carousel.html) | A generic carousel for displaying multiple similar pieces of content along a horizontal axis. |
| [amp-facebook](https://www.ampproject.org/docs/reference/extended/amp-facebook.html) | Displays a Facebook Post. |
| [amp-facebook-video](https://www.ampproject.org/docs/reference/extended/amp-facebook.html) | Displays a Facebook Video. |
| [amp-fit-text](https://www.ampproject.org/docs/reference/extended/amp-fit-text.html) | Expands or shrinks its font size to fit the content within the space given to it. |
| amp-html | Boilerplate for a basic AMP HTML page. |
| [amp-iframe](https://www.ampproject.org/docs/reference/extended/amp-iframe.html) | Displays an iframe. |
| [amp-image-lightbox](https://www.ampproject.org/docs/reference/extended/amp-image-lightbox.html) | Allows for a “image lightbox”. |
| [amp-instagram](https://www.ampproject.org/docs/reference/extended/amp-instagram.html) | Displays an instagram embed. |
| [amp-install-serviceworker](https://www.ampproject.org/docs/reference/extended/amp-install-serviceworker.html) | Installs a ServiceWorker for the current page. |
| [amp-lightbox](https://www.ampproject.org/docs/reference/extended/amp-lightbox.html) | Allows for a “lightbox” or similar experience where upon user interaction, a component expands to fill the viewport until it is closed again by the user. |
| [amp-list](https://www.ampproject.org/docs/reference/extended/amp-list.html) | Fetches dynamic content from a CORS JSON endpoint and renders it using a supplied template. |
| [amp-mustache](https://www.ampproject.org/docs/reference/extended/amp-mustache.html) | Allows rendering of Mustache.js. |
| [amp-pixel](https://www.ampproject.org/docs/reference/amp-pixel.html) | The amp-pixel element is meant to be used as a typical tracking pixel - to count page views. |
| [amp-soundcloud](https://www.ampproject.org/docs/reference/extended/amp-soundcloud.html) | Displays a Soundcloud clip. |
| [amp-video](https://www.ampproject.org/docs/reference/amp-video.html) | A replacement for the HTML5 video tag. |
| [amp-youtube](https://www.ampproject.org/docs/reference/extended/amp-youtube.html) | Displays a YouTube video. |