AMPMobile

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. 

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

 

 

The structure of our page is very simple and as follows

Header

<header>
      <button class="header-icon-1" on='tap:sidebar.open'><i class="fa fa-navicon"></i></button>
      <a href="index.php" class="header-logo"></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 of 3 elements. A button that activates the sidebar (this must be a button as per amp settings ) 

The logo you can change on style.css line 238

The last icon, we chose as a contact icon, but you can add whatever you wish to this mix. 

 

Sidebar

<amp-sidebar id="sidebar" layout="nodisplay" side="left">
     <!-- Sidebar Content Here --> 
</amp-sidebar>

This is the basic sidebar structure. The content gets added inside. 

Sidebar Header 

<div class="sidebar-header">
    <a href="https://www.facebook.com/enabled.labs/"><i class="fa fa-facebook"></i></a>
    <a href="https://twitter.com/iEnabled"><i class="fa fa-twitter"></i></a>
    <a href="tel:+123 456 7890"><i class="fa fa-phone"></i></a>
    <a href="sms:+123 456 7890"><i class="fa fa-comment-o"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
    <div class="clear"></div>
</div>

The sidebar header is comprised by the 5 icons present at the top. Replace each with what you require but leave the last one there for closing the sidebar. 

 

Sidebar Logo

<a href="#" class="sidebar-logo"></a>

The sidebar logo you can replace on line 469. 

 

Sidebar Divider

<p class="sidebar-divider">Navigation</p>

A separator with text you can use to divide between menu elements

 

Simple Sidebar Menu Item

<div class="sidebar-menu">
     <a href="index.php" class="sidebar-item"><i class="bg-red-dark fa fa-star-o"></i>Welcome<i class="fa fa-circle"></i></a>
</div>

This will create a simple sidebar menu item. No dropdown, no effect. 

Submenu Sidebar Menu Item

<amp-accordion class="sidebar-menu">
    <section expanded>
    <h4><i class="bg-green-dark fa fa-home"></i>Home<i class="fa fa-angle-down"></i></h4>
    <ul>
        <li class="active-menu"><a href="index.php"><i class="fa fa-angle-right"></i>Classic<i class="fa fa-circle"></i></a></li>
        <li><a href="index-splash.php"><i class="fa fa-angle-right"></i>Splash<i class="fa fa-circle"></i></a></li>
        <li><a href="index-landing.php"><i class="fa fa-angle-right"></i>Landing<i class="fa fa-circle"></i></a></li>
        <li><a href="index-news.php"><i class="fa fa-angle-right"></i>News<i class="fa fa-circle"></i></a></li>
    </ul>
    </section>
</amp-accordion>

Any submenu must be added in the structure presented above. The amp-accordion will allow the submenu to open and close. The section will house the menu elements and adding expanded to it will make the menu expanded by default. 

Every item inside is a simple menu item added to a list element. 

Creating Page Paddings

To create a padding left and right simply add your elements inside the <div class="content"></div> 

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!