AMP Stories Sports Brackets Demo Source Code

An AMP Stories code example

An AMP Tech Guide

This page shows crucial snippets of the code used on AMP story page that uses animation to show how a playoff bracket played out.
Required tags in the document head:

<!-- Required tags: Charset,  canonical link, and viewport -->
<meta charset="utf-8">
<link rel="canonical" href="https://www.stonetemple.com/amp/stories/amp-stories-sports-brackets-code.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!-- Required: The AMP project default CSS and noscript -->
<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>
<!-- Required: The AMP Project JS -->
<script async src="https://cdn.ampproject.org/v0.js"></script>

The custom CSS is put inside a style tag with the attribute name amp-custom.

<style amp-custom>
body {
      font-family: "Helvetica", "Arial", sans-serif;
      font-weight: normal;
      font-size: 16px;
      margin: 0;
    }
    p {
      margin: 0px 0px 18px;
    }
    a {
      color: #66ac2f;
    }
    a:hover {
      text-decoration: none;
    }
      amp-story {
        font-family: 'Roboto Condensed',sans-serif;
        color: #fff;
      }
      amp-story-page {
        background-color: #000;
      }
    amp-story-grid-layer {
      padding: 60px 24px 32px;
    }
    div.h1ribbon {
        background-color:rgba(75,75,75,0.80);
      padding: 14px 10px 20px;
    }
      h1 {
        font-weight: bold;
        text-align: center;
    margin-bottom: 14px;
      }
    h1 span.line1 {
        color: gold;
    font-size: 30px;
        font-family: 'Arial', sans-serif;
    }
    h1 span.line2 {
        color: #fff;
    font-size: 40px;
    font-family: 'Arial', sans-serif;
    }
    h1 span.line3 {
        color: gold;
    font-size: 34px;
    font-family:  'Arial', sans-serif;
    }
      p {
        font-weight: normal;
        font-size: 1.3em;
        line-height: 1.5em;
        color: #fff;
      }
      p.slight {
        font-size:16px;
    color: white;
    width: 100%;
        text-align:center;
    margin-top: 20px;
    padding-bottom: 0px;
    }
      .funkblock {
    width: 100%;
    height:20px;
    float:left;
    font-size: 12px;
      text-align: center;
    }
    .winner {
    background-color: gold;
    opacity: 1.00;
    color: black;
      padding: 2px 4px;
      border-radius:1px;
    }
    .loser {
    background-color: black;
    opacity: 1.00;
    color: white;
        padding: 2px 4px;
        border-radius:1px;
    }
    .prediction {
        font-style: italic;
    }
    .outcome {
        font-weight: normal;
    }
      .seriesWinner {
        background-color: gold;
    color: black;
        padding: 3px 6px;
      border-radius:1px;
    }
    .seriesLoser {
        background-color: black;
    font: white;
        padding: 4px 12px;
          border-radius:1px;
    }
    table {
    padding: 14px 2px;
    margin:0;
    width:100%;
    height: auto;
    background-color: rgb(75,75,75);
    opacity:0.9;
    }
    td {
    width:42px;
    height:20px;
    }
     /*  I added a breakpoint to deal with iPhone 5 and other narrow-screen mobile devices.
   More granular breakpoints or a more careful calibration of elemnt width fluidity are not bad ideas. */
    @media screen and (max-width: 359px) {
    .funkblock {
    height:20px;
    float:left;
    font-size: 12px;
    }
    td {
    height:20px;
    }
}
</style>

AMP components used in this example (the AMP story component):

<style amp-custom>
body {
      font-family: "Helvetica", "Arial", sans-serif;
      font-weight: normal;
      font-size: 16px;
      margin: 0;
    }
    p {
      margin: 0px 0px 18px;
    }
    a {
      color: #66ac2f;
    }
    a:hover {
      text-decoration: none;
    }
      amp-story {
        font-family: 'Roboto Condensed',sans-serif;
        color: #fff;
      }
      amp-story-page {
        background-color: #000;
      }
    amp-story-grid-layer {
      padding: 60px 24px 32px;
    }
    div.h1ribbon {
        background-color:rgba(75,75,75,0.80);
      padding: 14px 10px 20px;
    }
      h1 {
        font-weight: bold;
        text-align: center;
    margin-bottom: 14px;
      }
    h1 span.line1 {
        color: gold;
    font-size: 30px;
        font-family: 'Arial', sans-serif;
    }
    h1 span.line2 {
        color: #fff;
    font-size: 40px;
    font-family: 'Arial', sans-serif;
    }
    h1 span.line3 {
        color: gold;
    font-size: 34px;
    font-family:  'Arial', sans-serif;
    }
      p {
        font-weight: normal;
        font-size: 1.3em;
        line-height: 1.5em;
        color: #fff;
      }
      p.slight {
        font-size:16px;
    color: white;
    width: 100%;
        text-align:center;
    margin-top: 20px;
    padding-bottom: 0px;
    }
      .funkblock {
    width: 100%;
    height:20px;
    float:left;
    font-size: 12px;
      text-align: center;
    }
    .winner {
    background-color: gold;
    opacity: 1.00;
    color: black;
      padding: 2px 4px;
      border-radius:1px;
    }
    .loser {
    background-color: black;
    opacity: 1.00;
    color: white;
        padding: 2px 4px;
        border-radius:1px;
    }
    .prediction {
        font-style: italic;
    }
    .outcome {
        font-weight: normal;
    }
      .seriesWinner {
        background-color: gold;
    color: black;
        padding: 3px 6px;
      border-radius:1px;
    }
    .seriesLoser {
        background-color: black;
    font: white;
        padding: 4px 12px;
          border-radius:1px;
    }
    table {
    padding: 14px 2px;
    margin:0;
    width:100%;
    height: auto;
    background-color: rgb(75,75,75);
    opacity:0.9;
    }
    td {
    width:42px;
    height:20px;
    }
     /*  I added a breakpoint to deal with iPhone 5 and other narrow-screen mobile devices.
   More granular breakpoints or a more careful calibration of elemnt width fluidity are not bad ideas. */
    @media screen and (max-width: 359px) {
    .funkblock {
    height:20px;
    float:left;
    font-size: 12px;
    }
    td {
    height:20px;
    }
}
</style>

AMP components used in this example (the AMP story component):

<!-- This is the AMP component that enable functionality used on this page (AMP-story). -->
 <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>

All of the preceding code blocks should be put in the document head. The following code blocks should reside in the document body.
This code helps make a Story page.

<amp-story standalone title="Animated squares" publisher="Stone Temple" publisher-logo-src="https://www.stonetemple.com/amp/stories/images/publisher.png" poster-portrait-src="https://www.stonetemple.com/amp/stories/images/publisher-portrait.png">
<amp-story-page id="page1">
<amp-story-grid-layer template="vertical">
<!-- contant removed to save space -->
</amp-story-grid-layer>
</amp-story-page>
</amp-story>

 

Subscribe to the Weekly Blog Digest:

Sign Up