Build responsive Google AMP projects on the web with Google AMP CSS Framework, the most popular front-end component library based on Bootstrap
Download DonateWhether 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 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).
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.
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.
<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>
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.
<!-- 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>
<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>
<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>
<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>
<!-- 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>
<!-- 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
Some quick example text over the card 1 image.
Some quick example text over the card 2 image.
Some quick example text under the card 2 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>
<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 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>
<a href="#" class="badge badge-light" title="Badge with link">Google AMP</a>
<a href="#" class="badge badge-light" title="Badge with link">CSS</a>
<a href="#" class="badge badge-light" title="Badge with link">Grid</a>
<a href="#" class="badge badge-light" title="Badge with link">Framework</a>
<a href="#" class="badge badge-primary" title="Badge with link">Badge</a>
<a href="#" class="badge badge-light" title="Badge with link">Library</a>
<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
<!-- 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 -->
<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>
<div class="container-fluid">
<div class="row">
<div class="col-12">...</div>
</div>
</div>
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.
<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>