Cards 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.
Color Tint Content Boxes
<div class="tint-block tint-block-top bg-body-1">
<div class="tint-content">
<h1 class="color-white uppercase">Welcome</h1>
<span>
Fully powered by Google AMP and amazing Elite Author UX and UI Quality Features.
</span>
<div class="tint-items">
<amp-social-share width="65" height="15" type="twitter" class="tint-breadcrumb"><i class="fa fa-twitter"></i>Tweet</amp-social-share>
<amp-social-share width="60" height="15" type="facebook" class="tint-breadcrumb"><i class="fa fa-facebook"></i>Share</amp-social-share>
<amp-social-share width="85" height="15" type="whatsapp" class="tint-breadcrumb"><i class="fa fa-whatsapp"></i>WhatsApp</amp-social-share>
</div>
</div>
<div class="tint bg-red-light"></div>
</div>
The color tint boxes are all the same with the difference of color and the content position around them. Let's explain
Line 1. Has the defining class of the tint box. This is tint-block-top ( we'll explain lower what these are )
Line 2 is the tint-content class and the tint content. Here is where you add your content. You can create multiple H1 classes to add multiple rows of text at the top and multiple spans for paragraphs.
Line 6 is the tint items class. This houses the amp-social buttons. You can change these with anchors, by keeping the same tint-breadcrumb class but replacing the amp-social-share with <a href="#" class="tint-breadcrumb"><i></i>Text</a>
The last part of the code is the tint color, in this case it's set to bg-red-light. You can use any color from the secondary classes to change the colors
You can replace tint-block-top with tint-block-simple if you don't want the content from the bottom to be over it. In case of the footer we used the tint-block-simple class.
Content Classes
The content classes allow you to move them as cards above the tint boxes.
<div class="content page-content-card full-bottom">
<!-- content here -->
<div>
The above class will generate a card, this should be placed under a tint box. If you want to have one that is not under a tint box simple use the class page-content-card-simple
If you're unaware, AMP is still in a very infant stage, where JS is rejected completely and the only way to create custom animations is using pure CSS3, in the case of a menu, this triggers are usually done using JS, but since AMP won't validate if you're using JS we've used an input, to trick the page into acting like a clickable button. This has it's limitations but for the time being it's the only way to create any sort of off canvas / animated navigation existent.
Menu Structure
The menu is placed within a <nav> tag right after the header is complete. This is essential and must be preserved like this.
<nav>
<input type="checkbox" id="toggle-menu">
<label class="toggle-menu-header" for="toggle-menu"><em class="l1"></em><em class="l2"></em><em class="l3"></em></label>
<!-- Menu Here-->
</nav>
Line 1 creates the nav wrapper
Line 2 is the checkbox that will be tapped to open the menu
Line 3 is the visible portion of the tap for the menu icon, notice that this has 3 em's inside that have the line animations that create the hamburger icon effect.
On line 4 you can now add your menu items.
<div id="menu-modal" class="menu menu-sidebar">
<div class="menu-scroll">
<a class="menu-item empty-item" href="#"><span><!-- Menu Fix - Must Stay Empty--></span></a>
<!-- Menu items go here-->
</div>
</div>
The menu is comprised of an ID which is used by the input to target it, and a class.
Inside the menu there is a class called menu-scroll. This is used because the page will have the tendency to jump up when tapping a menu item, this class avoids that. Normally, this would be achieved by JS, unfortunately, with AMP we cannot use that technique.
Inside the menu there is an empty-item class. This again is essential due to the fact that we cannot use JS with AMP. Please be sure to keep that inside and work after it. It will not affect anything in your page
Menu Items - Simple Menu
A simple menu is a menu with no dropdown that just points to a page.
<a class="menu-item" href="index.php">
<i class="fa fa-star"></i>
<span>Welcome</span>
<i class="fa fa-circle"></i>
</a>
The simple item will include the class menu-item. Inside it you'll find 2 icons. This is a simple menu item, that is unselected. To select that menu item you'll have to do as follows
<a class="active-item menu-item" href="index.php">
<i class="fa fa-star"></i>
<strong></strong><em></em>
<span>Welcome</span>
<i class="fa fa-circle"></i>
</a>
As you can see, we've added an active-item class and also a strong and em after the first icon. This is only applicable to main menu items that are outside dropdowns, for example in our demo the Welcome and Contact menus in the menu
Creating Dropdowns ( Read the RED boxes at the bottom after! Very important! )
<div class="submenu-item">
<input type="checkbox" data-submenu-items="1" class="toggle-submenu" id="toggle-1">
<label class="menu-item" for="toggle-1"><i class="fa fa-cog"></i><span>Home</span></label>
<div class="submenu-wrapper">
<a class="menu-item" href="#">
<i class="fa fa-angle-right"></i>
Simple Dropdown
<i class="fa fa-circle"></i>
</a>
</div>
</div>
Submenus look complicated but after reading this you will no longer believe that.
Line 1, creates a submenu item wrapper
Line 2 is the input that triggers the submenu
Line 3 is the icon/text that you tap to open the submenu. This includes only 1 icon of your choosing, the other is added via CSS.
Line 4 is the submenu wrapper.
Line 5,6,7,8,9 is a simple menu item. The only difference is that this does not have the text inside a span. This is very important.
To create more items duplicate lines 5 to 9.
Line 10 closes the submenu wrapper
Line 11 closes the submenu item.
I created a submenu but it is not opening, why?
Submenus us inputs, and these are related to ID's and for's. On the code above, you'll see on line 2 id="toggle-1" and on line 3 for="toggle-1" for each submenu you create you'll have to replace these values with new unique ones. So, for example, if you have the menu above and wish to create a second menu simply add toggle-2 instead of toggle-1 and it will work like a charm.
I added more items but I cannot see them:
Normally for our other mobile templates we us JS to calculate the items inside the obtain the perfect height for a perfect css animation. In the case of AMP, without JS, we have to do that manually. Look inside line 2 of the code above and you'll see a data-submenu-items="1" class. This repersents the number of submenus you will have. Replace the number inside with the number of submenu items inside the current menu and voila! The menu now shows and it also animates smoothly!
How can I make a submenu opened by default with an item selected?
In the above code example, on line 2, at the very end where it says id="toggle-1"> just add checked and the code will look like this id="toggle-1" checked> After you've done that the menu item will now be checked.
On any menu item you want selected simply add the secondary class active-item, and inside the menu item, wrap the text like this <strong>Submenu</strong><em></em>. That's it!
That's it for the navigation! If you run into any problems after reading the documentation, send us a link via our support forum http://support.we-themes.com/ and we will gladly help you out!
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.