Google AMP web component CSS framework
The most popular Google AMP web component CSS library

Build responsive Google AMP projects on the web with Google AMP CSS Framework, the most popular front-end component library based on Bootstrap

Download Donate

What is Google AMP?

Google AMP is a web component framework to easily create user-first websites.

Whether you are a publisher, e-commerce company, storyteller, advertiser or email sender, Google AMP makes it easy to create great experiences on the web. Use Google AMP to build:

  • Google AMP Websites
  • Google AMP Stories
  • Google AMP Ads
  • Google AMP Email
LEARN MORE ABOUT GOOGLE AMP

What is the Google AMP CSS Framework?

A popular Google AMP CSS Library

Google AMP CSS Framework is a free and responsive CSS library to easily create user-first websites.

Our library is based on Bootstrap and has been optimized for "Accelerated Mobile Pages".

This framework is for mobile devices as well for desktop devices. Therefore it is a CSS library for all viewports.

Compatible with all modern desktop and mobile browsers.

Due to Google AMP is not accepting custom JavaScript files and maximum 50kb custom stylesheets are allowed, we made Bootstrap Google AMP capable and we equipped the source files with @if $enable-classes. Therefore it is possible to enable or disable single or complex Bootstrap components, which are Google AMP compatible.

Adjust your individual CSS files with this function in the options.scss (please note, your compiled CSS file can be maximum 50kb).

Google AMP Framework · News & updates

Media query prefers-color-scheme

prefers-color-scheme is a CSS media query that detects the current theme preference of the user's operating system.

The prefers-color-scheme media query has two values that you can specify: light and dark. These values allow you to customize the theme of the page with CSS depending on the user's preference.

light Indicates that the user has notified the system that they prefer a page that has a light theme (dark text on light background).

dark Indicates that the user has notified the system that they prefer a page that has a dark theme (light text on dark background).

- 01/01/2021

Create your Google AMP HTML page

The following markup is a decent starting point or boilerplate. Copy this and save it to a file with a .html extension.

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <meta name="description" content="This is the Google AMP Boilerplate.">
    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <!-- Import other Google AMP Extensions here -->
		
    <style amp-custom>
    /* Add your styles here */
    </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>

    <link rel="canonical" href="...">
		
    <title>My Google AMP Page</title>
    
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

To safe time with copy and paste we recommend, to bind your compiled CSS file with the following php function and save it to a file with a .php extension.

<style amp-custom>
  <?php readfile( getcwd() . "your-folder/your-css.min.css"); ?>
</style>

The Framework use (with a few exceptions) the same classes as Bootstrap, so the detailed Bootstrap documentation is the basic building block for your Google AMP project.

Notice: The Google AMP CSS Framework does not support the following Bootstrap components because they include javascript:

In the following examples you will see a from us predefined CSS file with all necessary web-components, which is already fit for use for all common websites and is ready for download.

Google AMP Framework · Responsive Navigation

We decided against the bootstrap navbar and instead decided on a minimal version of a responsive navigation.

<header class="mega-menu">
  <div class="container">
    <div class="row">
      <div class="header">
        <div class="container">
          <nav class="main-menu" id="main-menu">
            <!-- Mobile Menu -->
            <label for="mobile" id="mobile-menu">
              <a href="#" title="...">
                <amp-img
                  alt="..."
                  title="..."
                  src="https://www.ampcssframework.com/assets/img/logo/logo.webp"
                  width="21"
                  height="24"
                  class="img-logo">
                </amp-img>
                <span class="logo">Google AMP <strong>Mobile</strong> Navigation</span>
              </a>
          
              <span class="main-menu-dropdown-icon">
                <i class="hamburger"></i>
              </span>
            </label>
        
            <input type="checkbox" id="mobile">
        
            <!-- Main menu -->
            <ul class="main-menu">
              <!-- Left links -->
              <li class="main-menu-logo">
                <a href="#" title="...">
                  <amp-img
                    alt="..."
                    title="..."
                    src="https://www.ampcssframework.com/assets/img/logo/logo.webp"
                    width="28"
                    height="32"
                    class="img-logo">
                  </amp-img>
                  <span class="logo">Google AMP <strong>CSS</strong> Navigation</span>
                </a>
              </li>

              <li>
                <a href="#" title="...">Single link</a>
              </li>
          
              <li class="main-menu-dropdown">
                <a title="...">
                  Dropdown
                  <span class="main-menu-dropdown-icon">
                    <i class="arrow-down"></i>
                  </span>
                </a>
                <label class="main-menu-dropdown-icon" for="main-menu-dropdown-list-1">
                  <i class="arrow-down arrow-down-mobile"></i>
                </label>
                <input type="checkbox" id="main-menu-dropdown-list-1">
            
                <ul class="main-menu-dropdown-list">
                  <li><a href="#" title="...">1</a></li>
                  <li><a href="#" title="...">2</a></li>
                  <li><a href="#" title="...">3</a></li>
                  <li><a href="#" title="...">4</a></li>
                </ul>
              </li>
          
              <!-- Right links -->
              <li class="main-menu-right">
                <a href="#" title="...">Single link</a>
              </li>
            </ul>
            <!-- /main-menu -->
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>

Google AMP Framework · Tables

Title 1 Title 2 Title 3 Title 4
1 of 4 2 of 4 3 of 4 4 of 4 
<table>
  <thead>
    <tr>
      <th>Title 1</th>
      <th>Title 2</th>
      <th>Title 3</th>
      <th>Title 4</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Google AMP Framework · Tooltips

The tooltip or infotip or a hint is a common graphical user interface element. The user hovers the pointer over an item, without clicking it, and a tooltip a small "hover box" with information about the item being hovered over.

Left | Top | Bottom | Right 
<!-- Tooltip on left -->
<span class="tooltip" data-tooltip-title="..." data-tooltip-position="left">...</span>

<!-- Tooltip on top -->
<span class="tooltip" data-tooltip-title="..." data-tooltip-position="top">...</span>

<!-- Tooltip on bottom -->
<span class="tooltip" data-tooltip-title="..." data-tooltip-position="bottom">...</span>

<!-- Tooltip on right -->
<span class="tooltip" data-tooltip-title="..." data-tooltip-position="right">...</span>

Google AMP Framework · Forms

Input 
<form method="GET" action="/" target="_top">
  <div class="form-group">
    <label for="exampleTextInput">Example text</label>
    <input type="text" class="form-control" id="exampleInput" placeholder="Text input ...">
  </div>
  <div class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </div>
  <div class="form-group">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>
Checkboxes 
<form method="GET" action="/" target="_top">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="checkbox1" id="checkbox1" checked>
    <label class="form-check-label" for="checkbox1">
      Checkbox 1
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="checkbox2" id="checkbox2">
    <label class="form-check-label" for="checkbox2">
      Checkbox 2
    </label>
  </div>
</form>
Radios 
<form method="GET" action="/" target="_top">
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadio1" id="Radio1" value="radio1" checked>
    <label class="form-check-label" for="radio1">
      Radio 1
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadio2" id="Radio2" value="radio2">
    <label class="form-check-label" for="radio2">
      Radio 2
    </label>
  </div>
</form>

Google AMP Framework · Buttons

Default buttons 

<!-- Primary button -->
<button class="btn btn-primary">Primary</button>

<!-- Light button -->
<button class="btn btn-light">Light</button>

<!-- Dark button -->
<button class="btn btn-dark">Dark</button>

<!-- Link button -->
<button class="btn btn-link">Link</button>
Outlined buttons 

<!-- Primary button outline -->
<button class="btn btn-outline-primary">Primary</button>

<!-- Light button outline -->
<button class="btn btn-outline-light">Light</button>

<!-- Dark button outline -->
<button class="btn btn-outline-dark">Dark</button>

<!-- Link button outline -->
<button class="btn btn-outline-link">Link</button>
LEARN MORE ABOUT GOOGLE AMP BUTTONS

Google AMP Framework · Cards

Top image

Some quick example text over the card 1 image.

Middle Image

Some quick example text over the card 2 image.

Some quick example text under the card 2 image.

Bottom image

Some quick example text under the card 3 image.

<!-- Top image -->
<div class="card">
  <amp-img src="..." width="..." height="..." layout="responsive" class="card-img-top" alt="..."></amp-img>
  <div class="card-body">
    <h5>Top image</h5>
    <p>...</p>
  </div>
</div>

<!-- Middle image -->
<div class="card">
  <div class="card-body">
    <h5>Middle image</h5>
    <p>...</p>
  </div>
  <amp-img src="..." width="..." height="..." layout="responsive" class="card-img" alt="..."></amp-img>
  <div class="card-body">
    <p>...</p>
  </div>
</div>

<!-- Bottom image -->
<div class="card">
  <div class="card-body">
    <h5>Bottom image</h5>
    <p>...</p>
    <p>...</p>
  </div>
  <amp-img src="..." width="..." height="..." layout="responsive" class="card-img-bottom" alt="..."></amp-img>
</div>

Google AMP Framework · Blockquote

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua

- Lorem ipsum generator

Google AMP Framework · Pagination 

<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#" title="Previous">Previous page</a></li>
    <li class="page-item active"><a href="#" class="page-link" title="Page 1">1</a></li>
    <li class="page-item"><a href="#" class="page-link" title="Page 2">2</a></li>
    <li class="page-item"><a href="#" class="page-link" title="Page 3">3</a></li>
    <li class="page-item"><a href="#" class="page-link" title="Page 4">4</a></li>
    <li class="page-item"><a href="#" class="page-link" title="Page 5">5</a></li>
    <li class="page-item"><a href="#" class="page-link" title="Next page">Next</a></li>
  </ul>
</nav>

Google AMP Framework · Badges

Google AMP CSS Grid Framework Tags Library 

<span class="badge badge-light">Google AMP</span>
<span class="badge badge-light">CSS</span>
<span class="badge badge-light">Grid</span>
<span class="badge badge-light">Framework</span>
<span class="badge badge-primary">Tags</span>
<span class="badge badge-light">Library</span>
As notification 

<button class="btn btn-primary">Button <span class="badge badge-light">New</span></button>
<button class="btn btn-light">Button <span class="badge badge-primary">Hot</span></button>
<button class="btn btn-dark">Button <span class="badge badge-light">12</span></button>
LEARN MORE ABOUT GOOGLE AMP BADGES

Google AMP Framework · Lists

Unordered list
  • Item 1
  • Item 2
  • Item 3 with nest list:
    • Item 1
    • Item 2
    • Item 3
  • Item 4
  • Item 5
<!-- Unordered -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 with nest list:
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
Ordered list
  1. Item 1
  2. Item 2
  3. Item 3 with nest list:
    1. Item 1
    2. Item 2
    3. Item 3
  4. Item 4
  5. Item 5
<!-- Ordered -->
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 with nest list:
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>

Google AMP Framework · Grid

Container

Container are the most basic layout element and are required this grid system. Choose from a responsive, fixed-width container or fluid-width.

Fixed-width container
<div class="container">
  <div class="row">
    <div class="col-12">...</div>
  </div>
</div>
Container (Full width)
Container full-with
<div class="container-fluid">
  <div class="row">
    <div class="col-12">...</div>
  </div>
</div>
Responsive CSS Grid

Each column is contained within rows, which are contained within a container. This grid is built mobile-first, so all columns will expand to the full container width on smaller screens.

ONE
ELEVEN
TWO
TEN
THREE
NINE
FOUR
EIGHT
FIVE
SEVEN
SIX
SIX
TWELVE
<div class="container">
  <div class="row">
    <div class="col-1">...</div>
    <div class="col-11">...</div>
  </div>
  <div class="row">
    <div class="col-2">...</div>
    <div class="col-10">...</div>
  </div>
  <div class="row">
    <div class="col-3">...</div>
    <div class="col-9">...</div>
  </div>
  <div class="row">
    <div class="col-4">...</div>
    <div class="col-8">...</div>
  </div>
  <div class="row">
    <div class="col-5">...</div>
    <div class="col-7">...</div>
  </div>
  <div class="row">
    <div class="col-6">...</div>
    <div class="col-6">...</div>
  </div>
  <div class="row">
    <div class="col-12">...</div>
  </div>
</div>

Bootstrap content documentation

Read more
Google AMP CSS Framework
We use cookies to improve your experience on our website. By browsing this website, you agree to our use of cookies.