AMP CSS FRAMEWORK
The most popular CSS library

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

Download

What is AMP {CSS} Framework?

A popular AMP CSS Library

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".

The 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 AMP is not accepting custom JavaScript files and maximum 50kb custom stylesheets are allowed, we made Bootstrap 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 AMP compatible.

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

To safe time with copy and paste we recommend, to bind your compiled CSS file with the following php function:

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

Alternatively, please use the conventional method:

<style amp-custom>
  /* Add your styles here */
</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 AMP project.

Notice: The AMP CSS Framework does not support the following Bootstrap components because they require 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.

<div class="header">
  <div class="container">
    <div class="row">
      <div class="col">
        <!-- Logo -->
        <a href="#" title="Startpage" class="logo">AMP <strong>{CSS}</strong> FRAMEWORK</a>
      
        <!-- Hamburger menu icon -->
        <input class="menu-btn" type="checkbox" id="mainNav" />
        <label class="menu-icon" for="mainNav"><span class="navicon"></span></label>

        <!-- Navigation -->
        <nav class="nav">
          <ul>
            <li><a href="#" title="Startpage">Home</a></li>
          
            <!-- Dropdown menu -->
            <li>
              <a href="#" class="active" title="...">Dropdown menu</a>        
              <ul class="dropdown">
                <li><a href="#" title="...">Item</a></li>
              </ul>
            </li>
          
            <!-- Dropdown menu full width -->
            <li>
              <a href="#" title="...">Full width</a>
              <ul class="dropdown-full">
                <li>
                  <div class="container">
                    <div class="row">
                      <div class="col-sm-12 col-md-3">
                      
                        <!-- Title -->
                        <p>...</p>
                      
                        <!-- Image -->
                        <amp-img
                          class="..."
                          alt="..."
                          src="..."
                          width="..."
                          height="..."
                          layout="responsive">
                        </amp-img>
                      </div>
                      
                      <div class="col-sm-12 col-md-3">
                      
                        <!-- Title -->
                        <p>...</p>
                      
                        <!-- Image -->
                        <amp-img
                          class="..."
                          alt="..."
                          src="..."
                          width="..."
                          height="..."
                          layout="responsive">
                        </amp-img>
                      </div>
                      
                      <div class="col-sm-12 col-md-3">
                      
                        <!-- Title -->
                        <p>...</p>
                      
                        <!-- Image -->
                        <amp-img
                          class="..."
                          alt="..."
                          src="..."
                          width="..."
                          height="..."
                          layout="responsive">
                        </amp-img>
                      </div>
                      
                      <div class="col-sm-12 col-md-3">
                      
                        <!-- Title -->
                        <p>...</p>
                      
                        <!-- Image -->
                        <amp-img
                          class="..."
                          alt="..."
                          src="..."
                          width="..."
                          height="..."
                          layout="responsive">
                        </amp-img>
                      </div>
                    
                      <div class="col-6">
                    
                        <!-- Title -->
                        <p>...</p>
                      
                        <!-- Image -->
                        <amp-img
                          class="..."
                          alt="..."
                          src="..."
                          width="..."
                          height="..."
                          layout="responsive">
                        </amp-img>
                      </div>
                    
                      <div class="col-6">
                    
                        <!-- Title -->
                        <p>...</p>
                      
                        <!-- Image -->
                        <amp-img
                          class="..."
                          alt="..."
                          src="..."
                          width="..."
                          height="..."
                          layout="responsive">
                        </amp-img>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </li>
          
            <!-- Single link -->
            <li><a href="#" title="...">Item</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</div>
AMP CSS 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>
AMP CSS 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>
AMP CSS 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>
AMP CSS 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 BUTTONS
AMP CSS 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>
AMP CSS 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

AMP CSS Badges

AMP CSS Grid Framework Tags Library

<span class="badge badge-light">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 BADGES
AMP 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>
AMP CSS 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
We use cookies to optimize site functionality and give you the best possible experience.