Thank you for purchasing our file, we're really happy you loved our product on sight, but we plan on making you even happier by making a docuemntation that covers all features, and gives you no headaches. We've split the documentation into two separate parts, one that covers all the features of the framework, this one, and another one that covers the design elements of the item, the first docuemntation.
So, let's get started!
The documentation is structured as follows!
1. Structure Docuemntation
The docuemntation you are currently reading, which will show you the basic features, structure, and the most important aspects of the item
2. Page and PageApp Docuemntation
The documentations that show you how to use the included page templates, and how to create your own pages from the template provided.
3. Current Template Docuemntation
The unique features that the template you purchased has, and how to implement them in the structure. These features can range from custom headers, custom navigations and custom sliders or column structures that get added inside the template!
The structure around which the item is coded is very, very important. It keeps everything in place and makes sure thins work smoothly on older devices as well ( Android 4.4.2 can oficially be called an old device, iOS 6 can oficially be called an old device since these devices get new software versions every few months to a year and the old version becomes unsupported by the developers )
In each of our products there will be a _starter template. That is contentless, empty template that consists of the main structure you should build upon, and makes it easier to understand rather than copy pasting a tone of code here and explaing it ( which we'll do anyway )
<body class="dual-sidebar"> <!-- (1) -->
<div id="preloader"> <!-- (2) --->
<div id="status">
<p class="center-text">
Loading the content...
<em>Loading depends on your connection speed!</em>
</p>
</div>
</div>
<div class="gallery-fix"></div> <!-- (3) -->
<div id="header-fixed disabled"></div> <!-- (4) -->
<div class="all-elements"> <!-- (5) -->
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left"> <!-- (6) -->
Left Sidebar
</div>
<div class="snap-drawer snap-drawer-right"><!-- (7) -->
Right Sidebar
</div>
<div id="content" class="snap-content"><!-- (8) -->
<div class="content">
<!-- CONTENT STRUCTURE CHAPTER -->
</div>
</div>
</div>
<a href="#" class="back-to-top-badge"><i class="fa fa-caret-up"></i>Back to top</a> <!-- (9) -->
</div>
<!-- (10 - Remember this for later ) -->
</body>
The above is the main structure around which the entire item is built, now, let me explain precisely why this is needed, and how each element is used. The code is commented using <!-- NUMBER --> to make it easier for you to see which points we're discussing.
(1) is the main body wrapper, as any html file, but notice it has a class called dual-sidebar. If this class is present, the page will automatically generate the structure for the dual sidebar functionallity, meaning, you can swipe left or right on the content to enable the sidebars. You can use no-sidebar to disable all sidebars or left-sidebar to enable only the left sidebar or right-sidebar to enable only the right sidebar. Each page can have a different sidebar structure by simply changing the main body class code.
(2) is the page preloader. This can be disabled if you find unnecessary or prefer oldschool pages by adding the class disabled to it or simply deleting lines 2 to 9. It's recommened you just add disabled to it.
(3) the gallery-fix class is essential for every / any page that has a gallery attached to it. Certain devices run into issues with the depth of elements presented on screen and can make the image gallery click-through-able, basically meaning, you tap the image iniside the gallery, and an event is triggered under it. The gallery-fix class fixes that by creating a dummy full screen transparent layer that protects you from clicking under the gallery. Too much technical terms? Just leave the gallery-fix class at the top of the page, and our code will take care of the rest!
(4) With this new framework, we've finally found a solution to enable a fixed header, while at the same time keeping swiping sidebars and scrolling the page while the header is fixed. However, in order for this to work, your header must be placed at the top of the page, where it is shown in the example code above. We've set it to disabled in the code since we're just explaing how it works! In a real template, it won't have the disabled class, and it will have content inside it.
(5) The all-elements class has a vital role in the functionallity of the page. It keeps the scrollbars from showing when you open the sidebars, and it's also the main housing class for all the content of the page / framework that we used!
(6) - (7) Are the classes the house the sidebars. Each of them will be enabled or disabled by using what's explained in (1)
(8) Is the content ID, attention, ID, not Class. This is unique, per page. And this is the trigger of the sidebar. This listens for swiping gestures and houses everything the framework has to offer. We'll explain more in the next chapter, Content Structure.
(9) The back to top badge, is the blue element that shows up when you scroll passed the header and almost get to the bottom of the page. This acts like a native app button, and well, has the purpose of jumping you back up!
The contet structure is pretty super simple! And this is mostly the last part where there's a tone to read! After this, we can start talking features!
In the structure chapter, there is a code comment <!-- CONTENT STRUCTURE CHAPTER --> and where that comment is placed, you can add everything from this point forward except if specifically mentioned not to.
<div class="content"></div>
This class sets the left and right padding of the page using javascript, to be 30 pixels on mobiles and 50 pixels on tablets. It's esential to have to keep your page not glued to the sides of the device.
<div class="container OPTIONAL_VALUES"></div>
The container class can be used to add columns, text, headings and everything else you want to use, and it helps keep things neetly organized into blocks. The container class is vital for things like toggles and each one needs to be added in a sperate container, but other than that, the container classes main purpose is to add a bottom margin for a better visual hierarchy
Optional Values: no-bottom, half-bottom, full-bottom
Using no-bottom, will leave the container with no margin bottom to it,
Using half-bottom, will leave the contaner with only half the bottom of it's original full value
Using full-bottom is unnecessary for containers, since the default of a container is full-bottom ( 30 pixels )
These optional values can be added to absolutely every element in the template, from paragraphs to heading to fields to boxes.
<div class="container-fullscreen OPTIONAL_VALUES"></div>
The above creates a container that is full width, ignoring it's parrents left and right margin. this can be used for things like headings or elements that you want to stretch the full width of the screen without having to close and re-open the main content class. The optional values applicable here are the ones in the container but also, a few others specific to elements such as headings, which are described in the typography chapter.
Creating columns is beyond simple. We've made columns in a language everyone understands, and with the ability to set them for mobile and tablet in different ways.
2 Columns | Mobile and Tablet
<div class="container">
<div class="one-half">
Column 1 Content
</div>
<div class="one-half last-column">
Column 2 Content
</div>
<div class="clear"></div>
</div>
The above structure generates a two column layout on tablets and mobiles alike.
3 Columns | Mobile and Tablet
<div class="container">
<div class="one-third">
Column 1 Content
</div>
<div class="one-third">
Column 2 Content
</div>
<div class="one-third last-column">
Column 3 Content
</div>
<div class="clear"></div>
</div>
The above structure generates a three column layout on mobiles and tablets alike.
2 Rows Mobile 2 Columns Tablet
<div class="container">
<div class="one-half-responsive">
Column 1 Content
</div>
<div class="one-half-responsive last-column">
Column 2 Content
</div>
<div class="clear"></div>
</div>
The above structure generates a two column layout on tablets and 2 rows on mobiles.
3 Rows Mobile 3 Columns Tablet
<div class="container">
<div class="one-third-responsive">
Column 1 Content
</div>
<div class="one-third-responsive">
Column 2 Content
</div>
<div class="one-third-responsive last-column">
Column 3 Content
</div>
<div class="clear"></div>
</div>
The above structure generates a three column layout on tablets, and 3 rows on mobiles.
Notice:
The difference between universal columns and columns that adapt to rows and columns is the simple addition of -responsive after the name of the column you choose. So having one-value will generate it both for mobile and tablet and having one-value-responsive will generate it just for tablets and keep rows on mobiles.
Simple enough, right? :)
We're using Font Awesome Version 4.3.0 in our packs. To be sure that this version is curently used, check font-awesome.css in styles.
In order to update if a new version is released, download the new font-awesome pack from the font awesome page http://fortawesome.github.io/Font-Awesome/ The do the following
1. Extract the files.
2. Copy font-awesome.css in styles css, and replace the current font-awesome.css
3. Copy and paste the content of the fonts folder inside the fonts folder from our product!
Voila!! you've successfully updated the file!
1. Everything in the item that has an i class="fa fa-value" is an icon. the value can be changed to any icon you want to use that is avialalbe for your current version on this page! http://fortawesome.github.io/Font-Awesome/icons/
That's all there is to it! You even get a search bar on that page to locate icons easier! Plus! Icons are fully resizable, vectors, can stretch to any size without breaking!
Image and video classes desrve a chapter of their own even though there isn't much to say about it!
<img src="IMAGE_LOCATION" class="responsive-image" alt="img">
Adding the clas responsive-image to your images will extend the image to the full width of it's container while maintaining it's aspect ratio.
<img class="preload-image responsive-image" data-original="IMAGE_LOCATION" alt="img">
Preloading images is done with the aid of Lazy Load. To preload an image and keep it responsive, simply use the above structure. Notice that the location of the image is no longer placed within the src attribute but inside the data-original-attribute.
<div class="responsive-video">
<iframe src="https://player.vimeo.com/video/7449107"></iframe>
</div>
Responsive videos must folllow the structure above as they are gouverened by CSS. A div class hosusing the video with the class responsive-video and within this the iframe with the location of your video.
Secondary classes or options classes are give you the ability to further customize an element. You'll see a lot of references inside the docuemntation of adding Secondary Classes to elements, and these are the available secondary classes you can use.
full-bottom: adds a margin bottom to an element, that is equal to the container spacing, to keep visual hiearchy
half-bottom: adds half the total of the margin bottom used throughout containers
no-bottom: this class can be used if you are using an element within a container that has a full bottom at the end. That will result in having a full bottom added by default from both elements. To counter this, you can add no-bottom to any of the elements to keep one of them from applying the bottom. An instant example would be if you have a parahraph inside a container. You can add the class no-bottom either to the parahraph or the container and only one of them will add the bottom margin.
Some elements such as highlighted text, headings or notifications and many others, have a background color secondary class added to them that represents the background-color of that element. By default, we chose some of the internationally used colors, but you can easily choose between the following secondary classes to change the background colors.
Teal: bg-teal-light or bg-teal-dark
Green: bg-green-light or bg-green-dark
Blue: bg-blue-light or bg-blue-dark
Magenta: bg-magenta-light or bg-magenta-dark
Yellow: bg-yellow-light or bg-yellow-dark
Red: bg-red-light or bg-red-dark
Orange: bg-orange-light or bg-orange-dark
Gray: bg-gray-light or bg-orange-dark
If you encounter a situation where you need a background color to match social media we've included the default colors of each social media ( we know are used, sorry if we missed any, but do tell us and we'll gladly update the framework with more feautres)
Facebook : facebook-color
Twitter: twitter-color
Google: google-color
Pinterest: pinterest-color
SMS: sms-color ( this is green as per default on mobile messanging apps )
Mail: mail-color ( this is blue, as most mail icons are blue )
Dribbble: dribbble-color
Tumblr: tumblr-color
Reddit: reddit-color
YouTube: youtube-color
When giving an element the social aditional class, the color of the text and the background will automaticlly change. We've included social icons and buttons as well that you can find in the Other Features Chapter
Although this feautre is not experiemental, you can change certain colors of text using aditional classes. If that doesn't work, it means the feature is deeply integrated into CSS and you'll have to locate that feature's class and change it directly from framework.css or style.css. Adding the following secondary classes to elements should change the color of the text unless explained as above
Teal: color-teal-light or color-teal-dark
Green: color-green-light or color-green-dark
Blue: color-blue-light or color-blue-dark
Magenta: color-magenta-light or color-magenta-dark
Yellow: color-yellow-light or color-yellow-dark
Red: color-red-light or color-red-dark
Orange: color-orange-light or color-orange-dark
Gray: color-gray-light or color-orange-dark
You can set the text to center, left, or right, and also modify it from bold to light, italic or regular using simple classes as well
center-text makes the text centered on all resolutions
right-text makes the text right aligned on all resolutions
left-text makes the text left aligned on all resolutions
Adding -mobile or -tablet to the the above classes will apply the setting only for those devices.
uppercase makes the text uppercased
lowercase makes the text lowercased
thin makes the text thin
bold makes the text bold ( like the default strong class )
ultrabold makes the text the maximum bold available for that font.
Now the fun begins! Let's start talking features!
The item comes with 4 optional dropcaps variations. Replace dropcaps-VALUE the value with numbers 1, 2, 3 or 4 to change the style. Examples can be found in the template.
<p class="dropcaps-1 one-half-responsive">
Aorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
Text highlights consist of two classes. A paragraph that houses the main element, and a span that has a class and a background class to initiate the highlight effect. Different backgrounds can be used, and these are located within the Secondary Classes Chapter.
<p>
<span class="highlighted bg-red-dark color-white">Highlighting text</span>
is really easy to use!
</p>
Lists used the default structure of any item in the world, with OL for ordered lists, and UL for regular lists, as shown in the example below.
Ordered List ( Number List )
<ol>
<li>Item</li>
<li>Item</li>
</ol>
Unordered List ( Disc List )
<ul>
<li>Item</li>
<li>Item</li>
</ul>
Icon List ( Font Icon List )
Using font lists is simple, but, we made a special chapter about it, that will also allow you to know exactly what the font awesome CSS library does, and how to update it if you need it. Please check the Font Icon Chapter for more details
<ul class="icon-list">
<li><i class="fa fa-user"></i> List Item</li>
<li><i class="fa fa-lock"></i> List Item</li>
<li><i class="fa fa-cog fa-spin"></i> List Item</li>
</ul>
The defult structure for checkboxes and radios applies to our item, these will take the style of the device you're browsing from.
<input id="check-label-1" class="checkbox" type="checkbox">
<label class="checkbox-label" for="check-label-1">Checkbox</label>
<input id="radio-label-1" class="radiobox" type="radio">
<label class="radio-label" for="radio-label-1">Radio Button</label>
Text fields use the default structure of HTML fields, with the adtion of classes like green-field and red-field to signify issues with the fields. The class text-field must be added to them in order for the template styling to apply.
<input class="text-field green-field" onfocus="if (this.value=='Good Field') this.value = ''" onblur="if (this.value=='') this.value = 'Good Field'" type="text" value="Good Field"> <input class="text-field red-field" onfocus="if (this.value=='Red Field') this.value = ''" onblur="if (this.value=='') this.value = 'Red Field'" type="password" value="Red Field">
Creating a text field with an icon implies adding the field within a housing contaner. It's easy to do but a structure must be followed. After doing so, the principles of the field explained above apply to these as well, and the icons presented in the icon chapter can all be used
<div class="text-icon-field">
<i class="fa fa-user"></i>
<h6>Username</h6>
<em>*required</em>
<input class="text-field green-field" onfocus="if (this.value=='Good Field') this.value = ''" onblur="if (this.value=='') this.value = 'Good Field'" type="text" value="Good Field">
</div>
We've included 5 blockquote styles, but some variations can be found in the reviews page. As for these elements, you can choose any from the below or view them in the typography page. Each has a different structure, so please follow it!
You can simply copy and paste these quotes directly from the template we provided and replace the values with your own. A mention that needs to be made is the star rating left by the customer.
fa-star = full star rating
fa-star-o = empty star
fa-star-half = half a star
These ratings can be found in the typography html file and the reviews page html file.
Fullscreen Heading, Center Text, and Background
<div class="container-fullscreen heading-style-3 bg-2">
<h3 class="heading-title">Heading Variations</h3>
<em class="heading-subtitle">This is heading style too!</em>
<div class="overlay bg-black"></div>
</div>
The heading is encased inside the container-fullscreen, and has the value heading-style-3 and bg-2 ( for bg-2 check the Secondary Classes Chapter )
This heading contains the main title, the small text, and the overlay over the background
Heading with Clickable Icon and Line Decoration
<div class="heading-style-1 container">
<a href="#"><i class="fa fa-cog"></i></a>
<h4>Demo 1</h4>
<div class="heading-block bg-red-dark"></div>
<div class="heading-decoration bg-red-dark"></div>
</div>
<div class="container heading-style-4">
<h4 class="heading-title">Demo 2</h4>
<div class="line bg-red-dark"></div>
<p class="heading-subtitle">
Larger center headings for even more information can be added as well!
</p>
</div>
<div class="container heading-style-5">
<h4 class="heading-title">Demo 3</h4>
<i class="fa fa-cog heading-icon"></i>
<div class="line bg-black"></div>
<p class="heading-subtitle">
Maybe incorporate an icon as well? Makes it even better!
</p>
</div>
<div class="container switch-box">
<h4>iOS Style 1</h4>
<a href="#" class="switch switch-1 switch-1-on">
<!-- Bellow the explanation there are 3 styles available for this button -->
<!-- The switch-1 class can be replaced with switch-2 or switch-3 -->
</a>
<em class="switch-box-subtitle">
Text Under The Title.
</em>
<div class="switch-box-content">
<p class="no-bottom">
Text that shows when toggling.
</p>
</div>
</div>
Line 1 openes the switchbox
Line 2 Is the title next to the switch
Line 3, 4, 5, 6, 7 is the button that changes when tapping it. There are 3 styles available.
Line 8 9 10 is the subtitle under the main tittle. This dissapears when typing the button.
Line 11 12 13 14 15 is the content for the toggle.
Line 16 closes the switchbox.
Style 1 for switch-1 ( green round switch )
<em>I</em> <span></span> <em>0</em>
Style 2 for switch-1 ( green round switch )
<em><i class="fa fa-times"></i></em> <span></span> <em><i class="fa fa-check"></i></em>
Creates the X and Tick toggle button
Style 3 for switch-1 ( green round switch )
<span></span>
This removes the icons and leaves just the green / red toggle button.
Style 1 for switch-2 ( gray square switch )
<span>
<em>I<br>O</em>
</span>
Style 2 for switch-2 ( gray square switch )
<span>
<em><i class="fa fa-check"></i><br><i class="fa fa-plus"></i></em>
</span>
Style 3 for switch-2 ( gray square switch )
<span></span>
Style 1 for switch-3 ( green quare switch )
<strong></strong> <span></span> <em>I</em> <em>O</em>
Style 2 for switch-3 ( green square switch )
<strong></strong> <span></span> <em>+</em> <em>-</em>
Style 3 for switch-4 ( green square switch )
<strong></strong> <span></span>
Regular toggles must be housed isnide a container, each one in a different container, to make sure the JavaScript can reach them easily and keep them dinamic.
<div class="toggle active-toggle">
<a href="#" class="toggle-title">Active Toggle<i class="rotate-toggle fa fa-plus"></i></a>
<div class="toggle-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
The above example will generate an active toggle. To activate a toggle use the secondary class active-toggle and also, the main anchor houses an icon, this icon must have the secondary class rotate-toggle. The active-toggle shows the content while the rotate-toggle changes the plus sign at the right to a red x sign.
<div class="accordion">
<h6 class="accordion-toggle">
Accordion 1
<i class="fa fa-angle-down rotate-180"></i>
</h6>
<div class="accordion-content active-accordion">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<h6 class="accordion-toggle">
Accordion 2
<i class="fa fa-angle-down"></i>
</h6>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
The accordion targets the child above it to make it active, on tap. To create an accordion, you need a class the accordion-toggle with the title and the icon, and the accordion-content where the content will be shown! Once an accordion is clicked it cannot be unclicked. To make an accordion active by default, give the accordion-content the secondary class active-accordion and you must give the icon the secondary class rotate-180
<ul class="tabs">
<li class="tab-link active-tab" data-tab="tab-1">Tab 1</li>
<li class="tab-link" data-tab="tab-2">Tab 2</li>
</ul>
<div id="tab-1" class="tab-content active-tab-content">
Lorem ipsum dolor sit amet
</div>
<div id="tab-2" class="tab-content">
Duis aute irure dolor in
</div>
Tabs are based on a very easy and simple to follow structure, but the entire structure above must be placed within a container to make sure the JS can target the tabs properly. You can use as many tabs as you want but we recommned using tops 4 considering the smallest scree (5s / 5, S3 / S4 ) have resolutions of 320 pixels. To create a new tab you need to add duplicate the list on line 3 and give it the data-tab="tab-NUMBER" and also, give the same tab-NUMBER value to a div and the class tab-content. Just like in the code example above.
<div class="static-notification bg-red-dark">
<h6><i class="fa fa-times-circle static-notification-icon"></i>This is a notification</h6>
<a class="static-notification-close" href="#"><i class="fa fa-times"></i></a>
<p>
You can use any text you want and have a close or tap to dismiss system for your notifications.
</p>
</div>
A large notification has the main title with the close icon and the representiative icon of that notification, the text, and that's all! Not really hard!
The main class static-notification is combined with a secondary class that adjusts the background. You can find more about these in the Secondary Classes Chapter
TIP: If you don't want to have an icon for the notification, give it the Secondary Class disabled. Deleting it completly may cause issues since they are targeted using CSS.
<div class="static-notification bg-red-dark tap-dismiss">
<p>
<i class="fa fa-times"></i>
This is a warning notification
</p>
</div>
Small notifications unlike their bigger brothers have no closing icon and no paragraph, yet the same principle applies. They include the same background color changes that can be found in the Secondary Class Chapter and have an aditional class that allows hiding them. If you add the secondary class tap-dismiss to your notifications, clicking them will result in them hiding.
These notifications, require some changes in the JS, but don't worry. we'll walk you through them. Also, changes to the entire structure of the page must be applied, so please, read carefuly!
The trigger of a fixed bottom or fixed top notification is simply a link / anchor, which you can place whever you want for a user to tap and activate this
<a class="show-top-notification-1" href="#">Fixed Top Notification</a>
But, if you looked at the Structure Chapter we added a number (10) there saying remember this. Well, that is the place the actualy notitification panel must be placed in. So, your trigger goes anywhere you want it, but fixed notifications contents must be added outside the structure in the place of (10) in the structure chapter.
<div class="top-notification-1 top-notification bg-blue-dark">
<h4>Did you know?</h4>
<p>
Easy way to make sure your messages get read!
</p>
<a href="#" class="close-top-notification"><i class="fa fa-times"></i></a>
</div>
A fixed top notification, like the one above is comprised of 3 classes
top-notification-1 is directly connected to the show-top-notification-1 that triggers it.
top-notification is the class that CSS uses to arange the notification to the top
bg-blue-dark is the secondary class which is discussed in the Secondary Classes Chapter that allows you to change it's colors.
NOTE: You can set notifications to timeout after 5 seconds, by adding the aditional class timeout-notification
The exact same principle applies for fixed bottom notifications, only that now you have bottom-notification-1 / bottom-notification / show-bottom-notification-1 instead of the above.
<a class="show-top-notification-VALUE" href="#">Fixed Top Notification</a>
<div class="top-notification-VALUE top-notification bg-blue-dark">
<h4>Did you know?</h4>
<p>
Easy way to make sure your messages get read!
</p>
<a href="#" class="close-top-notification"><i class="fa fa-times"></i></a>
</div>
$('.show-top-notification-VALUE').click(function(){
$('.top-notification, .bottom-notification, .timeout-notification').slideUp(200);
$('.top-notification-VALUE').slideDown(200);
});
Connecting all the pieces from N1, N2, N3 together, the only thing you have to change is the -VALUE class to a unique number. So if you have show-top-notification-5, then all the -VALUE must be 5. That's it!
We've added tones of variations of buttons, and we'll go over each and every one of them to show you how easy they are to use!
Note: the Secondary Class Chapter for background colors does not apply to buttons!
These are Secondary Classes you can add to your buttons to change their color, appearance or positioning.
button-green, button-teal, button-blue, buton-dark, button-yellow, button-orange, button-magenta are the colors available for the buttons
button-round - changes the default square border button to a rounded bordered button
green-3d, teal-3d, blue-3d, red-3d, dark-3d, yellow-3d, orange-3d, magenta-3d make the buttons have a 3D effect by adding a border bottom. Using this class is NOT compatible wih button-round
button-xl, button-l, button-s, button-xs, changes the size of the buttons
<a href="#" class="button button-green">Button</a>
This is the regular class of a simple, default button. the Secondary Classes above apply.
<a href="#" class="button button-green button-round">Button</a>
This is the regular class of a simple, round button. the Secondary Classes above apply.
<a href="#" class="button button-green green-3d">Button</a>
This is the regular class of a simple, 3D button. the Secondary Classes above apply.
<a href="#" class="button button-icon button-green"><i class="fa fa-circle"></i>Button</a>
These buttons have icons attached to them and therefore the secondary class button-icon plus an icon inside the anchor. To find out more about icons, check the Icon Chapter.
<div class="container">
<em class="speach-left-title">John Doe says:</em>
<p class="speach-left">This is just an awesome bubble! It's quite cute isn't it?</p>
<div class="clear"></div>
<em class="speach-right-title">Jane Doe replied:</em>
<p class="speach-right blue-bubble">Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!</p>
<div class="clear"></div>
</div>
Speach bubbles allow you to add conversations to your page. These must be included inside a container class as shown above.
You can add blue-bubble or green-bubble secondary classes to the paragraph to change the color of the text.
This or that line breakers allow to add the class - or - button between different offers you may have. These are simple to use and we've included 3 versions to aid you out!
<div class="or-buttons-style-1">
<a href="#" class="button button-blue button-round">
Get Pro
</a>
<em>or</em>
<strong></strong>
<a href="#" class="button button-orange button-round">
Get Basic
</a>
</div>
Line 1 has the class or-button-style-1 .These are calibrated to work properly for small screens, so adding a tone of text inside the buttons is NOT indicated. The width of each button is set to 108 pixels to ashure the quality will not diminish on smaller screens. For that, there's the next style!
<div class="or-buttons-style-2">
<a href="#" class="button button-blue button-round">Get Pro - $ 25.99</a>
<em>or</em>
<strong></strong>
<a href="#" class="button button-green button-round">Get Basic - $ 15.99</a>
</div>
Line 1 has the class or-button-style-2 . This is calibrated to have more text and therefore is setup on two lines! You can add however much text you want ( not the entire site of course ) to your buttons and they will be split into 2 lines
<div class="or-buttons-style-3">
<em>or</em>
<strong></strong>
</div>
The classic or line divider, copy and paste it whever you want it to and boom! A line decoration with an or in the middle will appear!
This is not the end of the documentaiton! Now, you know the structure of which the mobile template is built upon!
Please continue reading the individual features of the template, and of course, how to setup your pages and pageapps!