AMP is an evergrowing platform, and at the moment, provides a few scripts that are absolutely awesome and work properly wiht our product on
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
The structure of our page is very simple and as follows
<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.
<amp-sidebar id="sidebar" layout="nodisplay" side="left"> <!-- Sidebar Content Here --> </amp-sidebar>
This is the basic sidebar structure. The content gets added inside.
<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.
<a href="#" class="sidebar-logo"></a>
The sidebar logo you can replace on line 469.
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
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.
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
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!