Pro AMP

Mobile Template Powered by Google AMP


What is Google AMP? 

For many, reading on the mobile web is a slow, clunky and frustrating experience - but it doesn’t have to be that way. The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.
 
What's the difference for me between classic HTML and AMP?
 
The most discenrable differnece is the fact that you are not allowed to use any javascript except for the modules provided by Google AMP and you are not allowed to use any external css stylesheet except for Google Fonts.
 
Your pages are PHP.  I cannot test them locally. What now?
 
PHP pages require a local server setup such as WAMP or uploading your items to a server for testing. The fact that our pages are PHP doesn't imply any complicated code, just the fact that we found a GREAT way to make it a billion times easier for you to alter the styles, which, normally, would require you to have them inline, making any css change a nightmare. 
 
You say no external stylesheet... but you're using an external style.css
 
That is half right. You see, adding all the CSS inline would cause a massive headache for you as a user to edit each individual HTML to change just one style section. We used a read / write function of PHP ( that's why, the pages are .php but they are basically HTML ) . This function allows us to use an external stylesheet BUT it's actuallty internal. When the page loads, the CSS gets added inside the page, making it inline and thus AMP Valid
 
How can I check if my page is AMP Valid?
 
That's very simple. Let's say the page you are editing is index.php. Therefore your testing link will be http://awesomebuyer.com/mobile/index.php . In order to check if the page is valid, all you have to do is add #development=1 at the end of your link, open the console, and hit refresh. You'll see a message in your console stating that the page is AMP Valid if the code is correct. More on this here: https://www.ampproject.org/docs/guides/validate
 
What can't I use as CSS?
 
As is, AMP is a bit limited, but it's a growing project, so writing whta's permited now, may not be the case in a month or two. Therefore, we suggest you follow this page 
 
https://www.ampproject.org/docs/guides/responsive/style_pages 
 
And keep an eye out for any changes in the future. 

If you're using a page feature and this feature does not load or does not show up, be sure that you imported it in the head. AMP has plugins at the top of the page, which must be imported in order for certain elements to work. An example would be let's say you want to embed a Facebook posts. In order to embed it to a certain page, first you'll have to import the facebook script in the head of the page.

<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>

<!--Import your scripts here-->
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
<!--Import your scripts above this-->

<!--AMP HTML files require a canonical link pointing to the regular HTML. If no HTML version exists, it should point to itself.-->
<link rel="canonical" href="index.html">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i">

As you can see, we've added the facebook custom element at the top of the page, right after the first script async. This is essential for all pages. 

A good way to make sure you're importing all plugins is to check the head of the pages we've provided and see if there is a script there except the default ones. If there is one, be sure to include it in your page in order for all your elements to work.

The structure of our page is very simple and as follows

Header


<header>
<a href="index.php" class="header-logo header-logo-left"></a>
<a href="contact.php" class="header-icon-2"><i class="fa fa-envelope-o"></i></a>
</header>

<div class="header-clear"></div>

The header is comprised by a header logo that you can find in the css by searching for header-logo and a contact icon. The other icon  that activates the menus is explained in the Navigation chapter. 

AMP is an evergrowing platform, and at the moment, provides a few scripts that are absolutely awesome and work properly wiht our product on 

https://ampbyexample.com/

NOTE

1. Installing a Script

After you find a script you like and want to use, you'll have to import the provided JS file in the head of the item where the scripts are present, only then can you use the provided HTML structures. Not doing so will result in a failed validation

 

2. Using AMP-Features Pages

All the components we used can be found on ampbyexample.com and much more, with exact tutorials and examples. Be sure to check that page out and check out the modules we used. 

 

Google AMP does have a new way of adding images, you can find them all over our item as <amp-img>. We could explain them ourselves, but you can find a brilliantly easy and example filed solution over Google AMP's page 

https://www.ampproject.org/docs/guides/responsive/control_layout

 

 

A secondary class is a class that gets added to an element to give it more flexibility. 

Why are these important?

Google AMP is all about reusing elements and using as little style as possible to allow us to keep the size small .Therefore, secondary classes for background colors, margins and borders makes the style as small as possible, while not enlarging the style either 

Available Secondary Classes 

Backgrounds, Borders and Colors
 
You can select any color, border, or background color for elements by adding any of the following secondary classes to them. 
 
bg-teal-light
bg-teal-dark
border-teal-light
border-teal-dark
color-teal-light
color-teal-dark
bg-green-light
bg-green-dark
border-green-light
border-green-dark
color-green-light
color-green-dark
bg-blue-light
bg-blue-dark
border-blue-light
border-blue-dark
color-blue-light
color-blue-dark
bg-magenta-light
bg-magenta-dark
border-magenta-light
border-magenta-dark
color-magenta-light
color-magenta-dark
bg-night-light
bg-night-dark
border-night-light
border-night-dark
color-night-light
color-night-dark
bg-yellow-light
bg-yellow-dark
border-yellow-light
border-yellow-dark
color-yellow-light
color-yellow-dark
bg-orange-light
bg-orange-dark
border-orange-light
border-orange-dark
color-orange-light
color-orange-dark
bg-red-light
bg-red-dark
border-red-light
border-red-dark
color-red-light
color-red-dark
bg-pink-light
bg-pink-dark
border-pink-light
border-pink-dark
color-pink-light
color-pink-dark
bg-gray-light
bg-gray-dark
border-gray-light
border-gray-dark
color-gray-light
color-gray-dark
bg-white
color-white
border-white
bg-black
color-black
border-black
 
Social Backgrounds
 
facebook-bg
linkedin-bg
twitter-bg
google-bg
whatsapp-bg
pinterest-bg
sms-bg
mail-bg
dribbble-bg
tumblr-bg
reddit-bg
youtube-bg
phone-bg
skype-bg
 
Social Colors
facebook-color
linkedin-color
twitter-color
google-color
whatsapp-color
pinterest-color
sms-color
mail-color
dribbble-color
tumblr-color
reddit-color
youtube-color
phone-color
skype-color
 
Font Options
You can also change parameters for fonts, thiner, smaller, bolder,  and more. Just add any class to a text element from the ones below. 
 
ultrathin
thin
thiner
boder
bold
ultrabold
capitalize
italic
small-text
center-text
right-text
uppercase
boxed-text
 
Box Properties
Margins can also be used enlarged for certain elements by using the following secondary classes.
 
.container{margin-bottom:30px}
.full-bottom{margin-bottom:25px}
.no-bottom{margin-bottom:0px}
.full-top{margin-top:25px}
.half-bottom{margin-bottom:15px}
.half-top{margin-top:15px}
.quarter-bottom{margin-bottom:15px}
.hidden{display:none}
 

 

 

Every page in the product is comprised of simple, copy paste block elements. Open them up and look inside them, if there is anything you are having trouble creating we will gladly assist, but most of our code is beautifully easy to read and it's 100% copy paste-able. 

 

Buttons

Buttons are easy to use. You add the class button and then the secondary class for the color you wish to use. 

<div class="content">
    <a href="#" class="button bg-green-light">Button</a>
    <a href="#" class="button bg-red-light">Button</a>
    <a href="#" class="button bg-blue-light">Button</a>
    <a href="#" class="button bg-teal-light">Button</a>
    <a href="#" class="button bg-magenta-light">Button</a>
    <a href="#" class="button bg-night-light">Button</a>
    <a href="#" class="button bg-orange-light">Button</a>
    <a href="#" class="button bg-gray-dark">Button</a>
    <a href="#" class="button bg-pink-dark">Button</a>
</div>

Icons

Icons are also easy to use. The have an icon, a property, and a color. 

<div class="content">
    <a href="#" class="icon-round facebook-bg"><i class="fa fa-facebook"></i></a>
    <a href="#" class="icon-round google-bg"><i class="fa fa-google-plus"></i></a>
    <a href="#" class="icon-round twitter-bg"><i class="fa fa-twitter"></i></a>
    <a href="#" class="icon-round pinterest-bg"><i class="fa fa-pinterest"></i></a>
    <a href="#" class="icon-round dribbble-bg"><i class="fa fa-dribbble"></i></a>

    <a href="#" class="icon-square facebook-bg"><i class="fa fa-facebook"></i></a>
    <a href="#" class="icon-square google-bg"><i class="fa fa-google-plus"></i></a>
    <a href="#" class="icon-square twitter-bg"><i class="fa fa-twitter"></i></a>
    <a href="#" class="icon-square pinterest-bg"><i class="fa fa-pinterest"></i></a>
    <a href="#" class="icon-square dribbble-bg"><i class="fa fa-dribbble"></i></a>
</div>

The contact form is 100% tested, and fully valid. Therefore, if you're experiencing any issue with it's related to the following

 

1. Be sure your page is AMP Valid! If it's not valid the contact form will not send messages

2. Be sure to contact your hosting provider and REQUEST that they set your PHP settings to this 

<IfModule mod_security.c>
    SecFilterEngine Off
    SecFilterScanPOST Off
</IfModule>

Without these settings the contact form WILL NOT send messages

 

Configurating contact form. 

The form has a attribute action-xhr="//ENTER_PARAMETER.php" you must replace the ENTER_PARAMETER with the exact location of your contact form php file. ( the one from the PHP folder ) therefore the ENTER_PAREMTER will be something like this 

awesomebuyer.com/mobile/php/contact.php 

 

Configuring PHP/Contact.php file 

Inside the pack you'll find a PHP folder and in it there is a contact.php file. Open that item and replace the domain name on line 4 with the domain where the site will be hosted. Do the same thing on line 8. 

After doing so, replace the email address on line 22 with your email address and you are good to go!