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!
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.
Using the provided content sliders, is beyond doubt extremly easy! JS and HTML too!
We'll be explaining the main homepage slider with transitions, and everyother slider in the template, works exactly the same as this one! No complications, just super simple easy code!
Line 1 is the container that expands fullscreen. The homepage-slider class is added for CSS controling the overlay and the inner sliders
Line 2 is the js function. homepage-slider-transition is used in JS to call this as our slider
Line 4, 5, 6, 7, 8, 9 is the slider item itself. Duplicate this to create new slides, change the text inside with your own, the iamge as well, and also, you can use secondary classes for text to change alignment.
Line 11 closes the homepage slider activator
Line 12 and 13 are the next and previous controls. These are inside framework.css and you can locate them there. Please note that the centering of these items is done for all sliders. You'll just have to add your own classes to the media query after the already defined ones
Line 14 closes the entire wrapper that holds the slider
Now, getting down to the javascript
$('.homepage-slider-transition').owlCarousel({
autoplay:true,
autoplayTimeout:5000,
autoplayHoverPause:true,
animateOut: 'zoomOut',
animateIn: 'zoomIn',
loop:true,
margin:10,
nav:false,
dots:false,
items:1
});
Line 1 is the class that will house the image slider
Line 2 is the autplay propery. Set this to false if you don't want to enable autoplay
Line 3 is the auto play timeout. The values are expressed in milliseconds. 5000 miliseconds = 5 seconds
Line 4 is the out animation, when the slide changes what happens to the old one.
Line 5 is the in animation, when the slide changes what happens to the new one.
Lines 4 and 5 are Animate.CSS (https://daneden.github.io/animate.css/) classes. Check the link, and use what's there for the clases.
Line 6 is the loop. What happens when the end slide is reached
Line 7 is the margin between slides when they change or when you swipe them
Line 8 is the nav. leave it set to false. We'll get to custom buttons soon!
Line 9 are the slider dots, just like on the coverpage. Set them to true to see them!
Line 10 is the number of items. The items can either be set to a fixed number on all resolutions or can be set to responsive like so. remove the entire items row and add the following
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
To create custom buttons you'll have to add the following to JS
$('.next-home-slider').click(function() {
$('.homepage-slider-transition').trigger('next.owl.carousel');
});
$('.prev-home-slider').click(function() {
$('.homepage-slider-transition').trigger('prev.owl.carousel');
});
The difference between a round gallery and a square gallery is the aditional class. Replace round-thumbs with square-thumbs and the gallery become square thumbed!
The gallery does not have to be inside a container, you can place it outside as well.
<div class="gallery round-thumbs">
<a href="images/pictures/1.jpg" class="show-gallery" title="Your caption here!"><img src="images/pictures/1s.jpg" alt="img"></a>
</div>
To create more elements, simply duplicate the anchor class inside and replace the href and the img src with with your images.
<div class="gallery-justified">
<a href="IMG_LOCATION" class="show-gallery" title="Caption"><img src="IMG_LOCATION"></a>
<a href="IMG_LOCATION" class="show-gallery" title="Caption"><img src="IMG_LOCATION"></a>
<a href="IMG_LOCATION" class="show-gallery" title="Caption"><img src="IMG_LOCATION"></a>
</div>
Adding the IMG_LOCATION to your images location will automatically generate a justified gallery. The images will be alinged in order of the design of these images. Using 16:9 images will create wide thumbs, using 1:1 images will use square thumbs and using 9:10 images will create tall thumbs.
A justified gallery means the images will always be in line with each other, basically, like a mansonry design. All the images you'll add here will automatically be alinged to a certain height. To change the height you want to display, open custom.js and locate the code below.
function apply_gallery_justification(){
var screen_widths = $(window).width();
//MOBILE SETTINGS
if( screen_widths < 768){
$('.gallery-justified').justifiedGallery({
rowHeight : 70,
maxRowHeight : 370,
margins : 5,
fixedHeight:false
});
};
// TABLET SETTINGS
if( screen_widths > 768){
$('.gallery-justified').justifiedGallery({
rowHeight : 150,
maxRowHeight : 370,
margins : 5,
fixedHeight:false
});
};
};
The code above generates the elements for each scenarion, mobile and tablet. You can replace the rowHeight value from both to change the height for different screens.
The adaptive gallery and adaptive portfolio use the same classes for refference. The difference is that one houses only images while the other can house text as well.
<div class="portfolio-adaptive portfolio-adaptive-three"><!--(1)-->
<div class="portfolio-adaptive-controls">
<h4>Change View</h4>
<a class="portfolio-switch adaptive-three active-adaptive" href="#"><i class="fa fa-th"></i></a><!--(2)-->
<a class="portfolio-switch adaptive-two" href="#"><i class="fa fa-th-large"></i></a>
<a class="portfolio-switch adaptive-one" href="#"><i class="fa fa-navicon"></i></a>
<div class="clear"></div>
<p>
Your Text Here
</p>
</div>
<div class="decoration"></div>
<div class="portfolio-item"><!--(3)-->
<a class="show-gallery" href="images/pictures/1.jpg" title="Add captions here!"><img src="images/pictures/1s.jpg" alt="img" class="responsive-image"></a><!--(4)-->
<h4>Item 6</h4><!--(5)-->
<p><!--(6)-->
Portfolio Text Here
<a href="#" class="adaptive-more right-text">
Read More
<i class="fa fa-long-arrow-right"></i>
</a><!--(7)-->
</p>
</div>
</div>
The code is highlighted with some numbers which we'll explain exactly what each do.
(1) The secondary class, portfolio-adaptive-three sets the default state of the portfolio, currently, it loads showing 3 items, if you want it to show 1 column set it to portfolio-adaptive-one and if you want it it to show 2 columns set it to portfolio-adaptive-two
(2) The buttons that change the portfolio can be selected by adding the secondary class active-adaptive to any button. This will turn it orange, showing it's activated.
(3) Duplicating the entire portfolio-item class will generate a new item for the portfolio or gallery. In order to generate a gallery, you will only need to leave item (4) in there. Items (5), (6), (7) can be removed. This way, you will have an adaptive image gallery. To keep the portfolio aspect of the item, simply leave (5), (6), (7) in there and add your content to them.
<div class="portfolio-one"><!--(1)-->
<div class="portfolio-item container">
<a href="images/pictures/1.jpg" class="show-gallery">
<img src="images/pictures/1w.jpg" alt="img" class="responsive-image image-fullscreen"><!--(2)-->
</a>
<h4>Portfolio Title 1</h4>
<em class="color-red-dark">Optional Subtitle or Prefered Text</em>
<p>
Portfolio Text
</p>
<a href="#" class="portfolio-link"><i class="fa fa-link"></i>Read More</a>
<a href="#" class="portfolio-share show-share-bottom"><i class="fa fa-retweet"></i>Share</a>
</div>
</div>
Line 1 generates the portfolio-one container. This class and housing is esential
Line 2 generates the portfolio item and adds a full bottom by having the secondary class container. Duplicating lines 2 - 13 will generate a new portfolio item
Line 3 creates the tappable image that opens a gallery connected to that image.
Line 4 Is the image that is shown. The class responsive-image and image-fullscreen are esential. The image-fullscreen extends the image from edge to edge of the screen
Line 5 closes the gallery activation
Line 6 is the portfolio title
Line 7 is the subtitle. Set the secondary class disabled if you do not require it.
Line 8, 9, 10 is where your description of the item will go
Line 11 is the read more link
Line 12 is the sharing bottom opener. This will share the entire page, not only this portfolio item. This is a site template, sharing individual elements can be done only using databases and a CMS.
Line 13 closes the portfolio item. Duplicating the entire element from line 2 until here generates a new item
Line 14 closes the portfolio-one wrapper, which houses all the 1 column portfolio items.
Portfolio 2 Columns uses the exact same structure with 2 exceptions!
(1) has to be changed to portfolio-two
(2) the aditional class image-fullscreen must be removed.
Doing that, will generate a two columm portfolio.
<div class="portfolio-wide container-fullscreen">
<div class="portfolio-item">
<a href="#" class="wide-title show-wide-text">
<h3>Wide Portfolios</h3>
<em>With captions and galleries</em>
<div class="overlay bg-black"></div>
<img src="images/pictures/1w.jpg" alt="img">
</a>
<div class="wide-text">
<p>
Your Text Here
</p>
<a href="#" class="portfolio-close"><i class="fa fa-times"></i>Close</a>
<a href="#" class="portfolio-share show-share-bottom"><i class="fa fa-retweet"></i>Share</a>
<a href="#" class="portfolio-link"><i class="fa fa-link"></i>More</a>
<div class="clear"></div>
</div>
</div>
</div>
Line 1 genrates the portfolio-wide. It's class is esential. Adding the secondary class container-fullscreen makes the portfolio stretch from edge to edge
Line 2 openes the portfolio item. Duplicating lines 2 to 19 will create a new portfolio item
Line 3 is the image that will be tapped to open the text
Line 4 is the title big caption over the image
Line 5 is the small text over the caption
Line 6 is the black overlay over the image
Line 7 is the image in the background
Line 8 closes the captioned image that will be tapped
Line 10 opens the wide portfolio text where the portfolio description and buttons will be
Line 11, 12, 13 is the text of the item when the caption is tapped
Line 14 is the close icon
Line 15 will open the bottom share, again, this will share the entire page, not just the article
Line 16 is the read more link
Line 17 clears the floatation of the buttons
Line 18 closes the portfolio text
Line 19 closes the entire portfolio item. Duplicating the lines from here to line 2 will generate a new item
Line 20 closes the entire fullscreen portfolio
<div class="portfolio-filter">
<div class="portfolio-filter-categories">
<a href="#" class="filter-category selected-filter" data-rel="all-cat">All</a>
<a href="#" class="filter-category" data-rel="cat1">Websites</a>
<a href="#" class="filter-category" data-rel="cat2">Flyers</a>
</div>
<div class="clear"></div>
<div class="portfolio-filter-wrapper">
<div class="cat1 all-cat portfolio-filter-item">
<a href="#"><img src="images/pictures/1.jpg" class="responsive-image" alt="img"></a>
<h4>Item 1</h4>
<p class="half-bottom">
Your Text
</p>
<a href="#" class="read-more-link full-bottom"><i class="fa fa-link"></i>More</a>
</div>
</div>
</div>
Line 1 creates the filterable portfolilo and houses it
Line 2 holds the portfolio categories
Line 3 is the all categories buttons. Tapping this will show all the categories. By default, this item is selected and should not be changed.
Line 4 and 5 are the categories. To add a new category give it the attribute data-rel="catVALUE" with the value being a unique number. You can add more if you require, just remember, having more than 4 increase the chances of breaking the design on smaller screens.
Line 6 closes the categories
Line 7 clears the floating of the categories.
Line 8 opens the portfolio items
Line 9 is the portfolio item itself. Duplicate lines 9 to 16 to create a new portfolio item. Notice that this item has the secondary classes cat1 all-cat .Cat 1 is the unique category that will remain visible when clicking the data-rel="cat1" button. The all-cat button will show all the portfolio items again, regardless what category they are in
Line 10 is the image shown in the portfolio. This doesn't have a gallery attached to it, but adding the class show-gallery and adding the location of your desired image in the href will enable the gallery
Line 11 is the portfolio item title
Line 12 , 13, 14 is the text of the portfolio
Line 15 is the read more link
Line 16 closes the portfolio item. Duplicating the lines 9 to 16 will generate a new item. JUst remember to change the cat1 all-cat to the value you want for the category selected on the buttons in line 4,5.
Line 17 closes the portfolio items housing
Line 18 clsoes the entire filter portfolio.
An activity page is nothing more than a list of events that happened that you'd like to show off!
<div class="activity-item container">
<img class="activity-item-image" src="images/pictures/3s.jpg" alt="img">
<h5>Collin <strong class="color-red-dark">called</strong> you.</h5>
<em><i class="fa fa-phone"></i>13th January 2024</em>
<a href="#" class="activity-item-toggle"><i class="fa fa-plus"></i></a>
<div class="activity-item-detail">
You can add more details to your activity feed. You can add most of the items features
in here without any issue. Just copy and paste.
</div>
</div>
Line 1 opens the activity-item and adds the secondary class container to have a bottom added to it.
Line 2 is the image thumbnail of the activity
Line 3 is the of the activity. You can add classes for changing the colors as mentioned in the secondary classes chapter
Line 4 is the icon and text under the activity
Line 5 is the icon that will toggle the activity
Line 7,8,9 10 are the details of this activity if more than 1 row is not enough.
Line 11 closes the entire activity element. Duplicate lines 1 to 11 to create more.
<div class="calendar-titles">
<a class="light-titles" href="#">S</a>
<a href="#">M</a>
<a href="#">T</a>
<a href="#">W</a>
<a href="#">T</a>
<a href="#">F</a>
<a class="light-titles" href="#">S</a>
</div>
<div class="decoration half-bottom"></div>
<div class="calendar-days">
<!--   adds a space for the single numbers, this way they can be centered in boxes -->
<a class="light-day" href="#"><i class="fa fa-circle"></i> 1</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 2</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 3</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 4</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 5</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 6</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 7</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 8</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i> 9</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>10</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>11</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>12</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>13</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i>14</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i>15</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>16</a>
<a class="taken-day" href="#"><i class="fa fa-circle"></i>17</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>18</a>
<a class="close-day" href="#"><i class="fa fa-circle"></i>19</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>20</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i>21</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i>22</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>23</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>24</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>25</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>26</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>27</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i>28</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i>29</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>30</a>
<a class="clear-day" href="#"><i class="fa fa-circle"></i>31</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 1</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 2</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 3</a>
<a class="light-day" href="#"><i class="fa fa-circle"></i> 4</a>
</div>
Lines 1 to 9 are the calendar days, you can rearange these as you wish. Adding light-day class to any anchor will make it look grayer, maybe signify a date that is of no importance to you or a weekenda day.
Lines 13 to 50 are the calendar days. These are created by simply adding more anchor classes.
clear-day is a day with no background circle around it.
light-day is a day that is made to look like the days of the week, a little less dark.
taken-day will create a green circle around the day
close-day will create a red circle around the day
<div class="calendar-hours">
<a href="#" class="calendar-hour calendar-hour-taken">
<strong class="cal-from">0:00 AM</strong>
<strong class="cal-to"> 9:00 AM</strong>
<h4>Closing Hours</h4>
<em><i class="fa fa-map-marker"></i>Melbourne Victoria</em>
</a>
<a href="#" class="calendar-hour calendar-hour-clear">
<strong class="cal-time">10:00 AM</strong>
<h4> </h4>
<em> </em>
</a>
<a href="#" class="calendar-hour calendar-hour-taken">
<strong class="cal-time">11:00 PM</strong>
<h4>Lunch</h4>
<em><i class="fa fa-cutlery"></i>Restaurant, Miami Beach</em>
</a>
</div>
Line 1 creates the calendar housing box.
Line 2 to 7 is the calendar event itself. This event has a cal-from and a cal-to class. These represent the time from and the time to event. You can change the title in line 5 and the icon and "location" in line 6. Hovering this will show up as red. The hover effect is determined b the calendar-hour-taken class.
Line 8 to 12 is an empty date. This callendar will have nothing on it, hence, hovering it will show up as green, determined by the calendar-hour-clear class.
Line 13 to 17 is a simple date, taking only one hour on the calendar. This has the class cal-time. This will also light up red on hover due to the same calendar-hour-taken class.
To generate a chart you require some JS knowledge. Let's get started and explain
THE HTML for BAR CHARTS
<div class="container" id="bar-chart">
<canvas id="generate-bar-chart"></canvas>
</div>
THE JAVASCRIPT
var barChartData = { // (1)
labels : ["One","Two","Three","Four","Five", "Six"],
datasets : [{
fillColor : "rgba(0,0,0,0.1)",
strokeColor : "rgba(0,0,0,0.2)",
highlightFill: "rgba(0,0,0,0.25)",
highlightStroke: "rgba(0,0,0,0.25)",
data : [20,10,40,30,10, 80]
}]
}
window.onload = function(){
var bar_chart_1 = document.getElementById("generate-bar-chart").getContext("2d");// (2)
window.bar_chart_1 = new Chart(bar_chart_1).Bar(barChartData);// (3)
};
The most improtant part of the pie is the JS. The HTML is just a container that houses a canvas class in whihc the chart will be generated
In the JS:
Line 1, creates the variable for the chart
Line 2, creates the labels, in this case, 6 labels for the chart
Line 3 creates the data sets
Line 4 is the fill color of the bars
Line 5 is the border / stroke color of the charts
Line 6 is hte hover effect fill color of the chart
Line 7 is the hover efect stroke color of the chart
Line 8 is the value for each label of the chart, One - 20 | Two - 10 | Three - 40 and so on.
The window load parameter has a variable, give it whatever name you wish, just be sure to call it on the second line.
Voila! you generated a bar chart!
Duplicate the exact same code as above, but replace the variables from (1) (2) and (3) with unique new names. These variables are barChartData bar_chart_1 and make sure you replace the ID from generate-bar-chart to a new unique one as well.
The absolute same principle applies for pie charts as well, but the only difference is that pie charts datasets looks a bit different in JS
var pieData = [
{ value: 25, color: "#c0392b", highlight: "#c0392b", label: "Red" },
{ value: 20, color: "#27ae60", highlight: "#27ae60", label: "Green" },
{ value: 15, color: "#f39c12", highlight: "#f39c12", label: "Yellow" },
{ value: 30, color: "#2980b9", highlight: "#34495e", label: "Dark Blue" }
];
Each part of the pie has a different line, and values, colors, and highlights are added on separate new lines.
<div class="page-login full-bottom">
<a href="#" class="page-login-logo"></a>
<div class="login-input">
<i class="fa fa-user"></i>
<input type="text" value="Username" onfocus="if (this.value=='Username') this.value = ''" onblur="if (this.value=='') this.value = 'Username'">
</div>
<div class="login-password">
<i class="fa fa-lock"></i>
<input type="password" value="password" onfocus="if (this.value=='password') this.value = ''" onblur="if (this.value=='') this.value = 'password'">
</div>
<a href="#" class="login-forgot"><i class="fa fa-eye"></i>Forgot Credentials</a>
<a href="#" class="login-create">Create Account<i class="fa fa-user"></i></a>
<div class="clear"></div>
<a href="#" class="login-button button button-small button-green button-fullscreen full-bottom">Login</a>
<div class="decoration"></div>
<div class="clear"></div>
<a href="#" class="facebook-login facebook-color"><i class="fa fa-facebook"></i>Login with Facebook</a>
<a href="#" class="twitter-login twitter-color"><i class="fa fa-twitter"></i>Signin with Twitter</a>
<a href="#" class="google-login google-color"><i class="fa fa-google-plus"></i>Register with Google</a>
</div>
Line 1 creates the login page, and adds a full bottom. We used the full-bottom class instead of the container class because this page is centered. The container class wouldn't work in this case. you can remove the full-bottom if the login page is alone.
Line 2 is the login-logo. You can replace it by using CTRL + F or CMD + F in framework.css and searching for page-login-logo
Line 3,4, 5, 6 is the input field for the username
Line 7, 8, 9, 10 is the input field for the password
Line 12 is the forgot link
Line 13 is the create link
Line 14 clears the floation of buttons
Line 15 Is the login button
Line 16 is the line decoration after the button
Line 17 clears the floatation of the buttons
Line 18,19, 20 are the login with social networks buttons
ATTENTION
This is only a page template! Using it with a CMS requires connecting it to your panel! This is NOT included in page templates.
<div class="page-login full-bottom">
<a href="#" class="page-login-logo"></a>
<div class="login-input">
<i class="fa fa-user"></i>
<input onfocus="if (this.value=='Username') this.value = ''" onblur="if (this.value=='') this.value = 'Username'" type="text" value="Username">
</div>
<div class="login-mail">
<i class="fa fa-envelope-o"></i>
<input onfocus="if (this.value=='E-Mail') this.value = ''" onblur="if (this.value=='') this.value = 'E-Mail'" type="email" value="E-Mail">
</div>
<div class="login-date">
<i class="fa fa-calendar-o"></i>
<input class="set-today" type="date">
</div>
<div class="login-password">
<i class="fa fa-lock"></i>
<input onfocus="if (this.value=='password') this.value = ''" onblur="if (this.value=='') this.value = 'password'" type="password" value="password">
</div>
<a href="#" class="login-already">Already Registered?</a>
<a href="#" class="login-button button button-small button-green button-fullscreen full-bottom">Register</a>
</div>
The register page uses the same main classes as the login page.
Line 1 opens the login page and adds a full-bottom to it. If you don't have anytother content you can remove the full-bottom secondary class
Line 2 is teh page-login-logo, you can replace it by opening framework.css and CTRL + F or CMD + F to locate page-login-logo.
Line 3, 4, 5, 6 is the username field
Line 8, 9 ,10, 11 is the password field
Line 13, 14, 15, 16 is the date. The clas set-today changes the date to today's date by default.
Line 18 19 20 21 is the password field
Line 22 is the button for already registerd users
Line 23 is the button to initiate registration.
NOTE
This is a site template, so this page is just a template! Connecting this page to a CMS requires Databases which are not included!
<div class="map-fullscreen container-fullscreen">
<div class="map-text">
<h3>Get in touch!</h3>
<p>
Tap to interact with the map, you can disable it easily to continue reading
</p>
</div>
<a class="deactivate-map button button-red button-fullscreen" href="#">Turn Off Map</a>
<div class="bg-black map-overlay"></div>
<iframe src="https://maps.google.com/?ie=UTF8&ll=47.595131,-122.330414&spn=0.006186,0.016512&t=h&z=17&output=embed"></iframe>
</div>
Using a fullscreen google map embed is easy. You can use the Google API as well but we didn't incorporate it by default since the API changes quite often and can cause hassles to you.
Line 1 is the map-fullscreen and the secondary class container-fullscreen expands the map from edge to edge
Line 2 creates the map text that is over the map, prior to activation.
Line 3 is the title
Line 4, 5, 6 is the text
Line 7 closes the map overlay text
Line 8 is the button that deactivates the map once you click the text and it activates
Line 9 is the iframe with the link to your map, which you can generate on Google Maps Website.
Why did we make the map activatable and deactivatable? Because the map scrolls. And having the map set to fullscreen and scrollable would render the page unusable if there is anyother content underneeth it.
Reviews are just like quotes, but can house much more information!
<div class="review-1 container">
<strong>5.00</strong><em>John Doe Said:</em>
<br>
<div class="review-stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<img class="review-image" src="images/pictures/3s.jpg" alt="img">
<p>
Review Text
</p>
<a href="#">By aboyington on <u>Swipebox Mobile & Tablet</u></a>
</div>
Line 1 opens the review style 1. The container asures a bottom margin
Line 2 is the rating given and what the user said
Line 3 breaks the line
Line 4, 5, 6, 7, 8, 9, 10, are the star ratings. You can use fa-star-o and fa-star-half to change the stars.
Line 11 is the thumbnail image
Line 12, 13, 14 is the review text
Line 15 is the rater and rated item
Line 16 closes review style 1.
Duplicate the entire 1 to 16 lines to create another element
Uses the same code as review-style-1 just the elements are possition in a different place when the design is rendered
<div class="container">
<div class="review-3">
<div class="one-half-responsive">
<h4>John Doe said:</h4>
<h5>A few words from our customer</h5>
<p>
Review Text
</p>
</div>
<div class="one-half-responsive last-column">
<div class="review-line">
<strong>Performance</strong>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="review-line">
<strong>Documentation</strong>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="review-line">
<strong>Loading Speed</strong>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="review-line">
<strong>Code Quality </strong>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="review-line">
<strong>No Stars Here </strong>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
<div class="review-line-last">
<strong>Overall Rating</strong>
<i class="fa fa-star-o"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="clear"></div>
</div>
</div>
This review gives the ability to add specific information about elements
Line 1 creates a contaienr to house everything in, this is because the elements inside are floated to the left and we need to clear them afterwards
Line 2 is the review 3 housing box
Line 3 is the first half of the review on tablets. This containers the text, the review text, and the author
Line 11 holds the second part of the text, which holds the stars and the stars on each individual aspect
These are added in individual divs called review-line
<div class="review-4">
<img src="images/pictures/1s.jpg" alt="img">
<h4>Alexander Q.</h4>
<div class="review-stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="clear"></div>
<p>
<strong>PROS:</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia mauris est.
Etiam eget sollicitudin augue, ut tristique lectus.
</p>
<p>
<strong>CONS:</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia mauris est.
Etiam eget sollicitudin augue, ut tristique lectus.
</p>
<p>
<strong>OVERALL:</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia mauris est.
Etiam eget sollicitudin augue, ut tristique lectus.
</p>
</div>
This review has a an image thumbnail, a title of the author, the star rating and after these elements are added, you can add indivdual parapraphs to describe each aspect of being reviewed. Review and Review 5 are basically the same structure wise, their designs differ when rendered.
<div class="review-6">
<h4>
<i class="fa fa-quote-right"></i>
Worth 5 stars for code quality, design, and documentation.
Keep your hard work and produce more quality themes! I'm so
happy with my purchase!
</h4>
<div class="review-stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<strong>ThemeForest Buyer</strong>
</div>
The 6th review style includes a large centered text for the review message, with an icon at the top
The bottom includes the star ratings and the author that said it.
<a href="#" class="checklist-square checklist-square-selected">Prepare a Design</a> <a href="#" class="checklist-square">Optimize for Mobiles</a>
The first line has the selected secondary class checkist-square-selected the second class is an unselected element
<a href="#" class="checklist-round">Prepare a Design</a> <a href="#" class="checklist-round checklist-round-selected">Optimize for Mobiles</a>
Same as the above, the class checklist-round-selected selects the checklist.
<a href="#" class="tasklist-item">
<i class="fa fa-check"></i>
<h5>Optimize for Mobiles</h5>
</a>
The tasklist-item can have some aditional classes that are important.
tasklist-completed - makes the item complete
tasklist-green, tasklist-blue, tasklist-green, tasklist-yellow, tasklist-orange, tasklist-magenta - change the color of the border to the left of the tasklist item
<a href="#" class="reminder reminder-check-square">
<strong>Design New Features</strong>
<em><i class="fa fa-clock-o"></i>Tue, 25 August, 2030</em>
</a>
<a href="#" class="reminder reminder-check-square reminder-check-square-selected">
<strong>Create Simple Code</strong>
<em><i class="fa fa-clock-o"></i>Tue, 25 August, 2030</em>
</a>
The first 4 lins are a reminder that is pending, taping it will make it less visible / completed
The last 4 lines, are a reminder that is completed, it has the class reminder-check-square-selected
<a href="#" class="reminder reminder-check-round reminder-check-round-selected">
<strong>Design New Features</strong>
<em><i class="fa fa-clock-o"></i>Tue, 25 August, 2030</em>
</a>
<a href="#" class="reminder reminder-check-round">
<strong>Create Simple Code</strong>
<em><i class="fa fa-clock-o"></i>Tue, 25 August, 2030</em>
</a>
The first 4 lins are a reminder that is pending, taping it will make it less visible / completed
The last 4 lines, are a reminder that is completed, it has the class reminder-check-round-selected
<div class="error-page bg-3 cover-screen">
<div class="error-content cover-center">
<div class="unboxed-layout">
<h3>404 Error</h3>
<h4>Nothing to see, move along!</h4>
<p>
Let's pretend this never happend and show you some lovely other page
like the homepage for example? It's just a 404 error, you know!
</p>
<a href="#" class="back-home"><i class="fa fa-home"></i></a>
</div>
</div>
<div class="overlay bg-black"></div>
<a href="#" class="left-button"><i class="fa fa-home"></i>Back Home</a>
<a href="#" class="right-button">Boxed Version <i class="fa fa-star"></i></a>
</div>
The error page is very, very simple to use. It gets added inside the id="content" and is not to be added inside containers or content classes. This page will expand the full width and height of the screen.
Line 1 has the class-error page that generates the elements within it and the secondary classes bg-3 and cover-screen. bg-3 represents the background-image used ( can be changed within framework.css ) and cover-screen is a variable used by JS to expand to the full size of the screen
Line 2 is the wrapper content of the internal text and icon of the error page. The aditional cover-center class is used to aling the content to the center of the screen
Line 3 unboxed-layout represents if you want to have a image for a background, or a boxed white background text for a background. Replace unboxed-layout with boxed-layout to change between them
Line 4 is the page title.
Line 5 is the subtitle
Line 6 is the text of the page
Line 7 is the button to take the user back home. You must replace the href with the location of the homepage
Line 8 closes teh unboxed/boxed layout
Line 8 closes the centering of the elements
Line 9 adds a background overlay
Line 10 is the button on the bottom to the left for more actions
Line 11 is the button on the bottom to the right for more actions
Line 12 closes the entire error page!
Voiila! you have a 404 page!
<div class="countdown-page bg-5 cover-screen">
<div class="countdown-content cover-center">
<div class="unboxed-layout">
<h3>Coming Soon</h3>
<h4>We're working really hard on it!</h4>
<p>
We're working really hard to bring you this as fast as we can! Here's
an estimate on completion!
</p>
<div class="countdown-class"></div>
<div class="clear"></div>
</div>
</div>
<div class="overlay bg-black"></div>
<a href="#" class="left-button"><i class="fa fa-home"></i>Back Home</a>
<a href="#" class="right-button">Boxed Version <i class="fa fa-star"></i></a>
</div>
Like the error page, this page must be added just inside the id="content" and not inside containers and content classes.
Line 1 has the class-error page that generates the elements within it and the secondary classes bg-3 and cover-screen. bg-3 represents the background-image used ( can be changed within framework.css ) and cover-screen is a variable used by JS to expand to the full size of the screen
Line 2 is the wrapper content of the internal text and icon of the error page. The aditional cover-center class is used to aling the content to the center of the screen
Line 3 unboxed-layout represents if you want to have a image for a background, or a boxed white background text for a background. Replace unboxed-layout with boxed-layout to change between them
Line 4 is the title
Line 5 is the subtitle
Line 6, 7, 8 9 is the text of the page
Line 10 is the countdown timer itself. To change the date, go to custom.js and locate this code
var endDate = "June 7, 2015 15:03:25";
$(function() {
$('.countdown-class').countdown({
date: "June 7, 2087 15:03:26"
});
});
Replace the date there with your finish date
Line 11 clears the flotation of the countdown elements
Line 12 closes the boxed/unboxed layout
Line 13 closes the countodnw centered content
Line 14 adds a overlay to the background
Line 15 is the button on the bottom to the left for more actions
Line 16 is the button on the bottom to the right for more actions
Line 17 closes the entire error page!
<div class="pageapp-signup bg-5 cover-screen">
<div class="pageapp-signup-content cover-center">
<div class="unboxed-layout">
<a class="pageapp-signup-logo" href="#"></a>
<div class="pageapp-signup-field">
<i class="fa fa-user"></i>
<input onfocus="if (this.value=='Username') this.value = ''" onblur="if (this.value=='') this.value = 'Username'" type="text" value="Username">
</div>
<div class="pageapp-signup-field">
<i class="fa fa-envelope-o"></i>
<input onfocus="if (this.value=='E-Mail') this.value = ''" onblur="if (this.value=='') this.value = 'E-Mail'" type="email" value="E-Mail">
</div>
<div class="pageapp-signup-field">
<i class="fa fa-calendar-o"></i>
<input class="set-today" type="date">
</div>
<div class="pageapp-signup-field">
<i class="fa fa-lock"></i>
<input onfocus="if (this.value=='password') this.value = ''" onblur="if (this.value=='') this.value = 'password'" type="password" value="password">
</div>
<a href="#" class="pageapp-signup-button button button-small button-green button-fullscreen">Register</a>
</div>
</div>
<div class="overlay bg-black"></div>
<a href="#" class="left-button"><i class="fa fa-user"></i>Alredy registerd?</a>
<a href="#" class="right-button">Page Version <i class="fa fa-star"></i></a>
</div>
The signup page is very, very simple to use. it gets added inside the id="content" and is not to be adde inside container or contet classes. This page will expand to the full width and height of the screen
Line 1 has the pageapp-signup page that generates the elements within it and the secondary classes bg-5 and cover-screen. bg-3 represents the background-image used ( can be changed within framework.css ) and cover-screen is a variable used by JS to expand to the full size of the screen
Line 2 is the wrapper content of the internal text and icon of the error page. The aditional cover-center class is used to aling the content to the center of the screen
Line 3 unboxed-layout represents if you want to have a image for a background, or a boxed white background text for a background. Replace unboxed-layout with boxed-layout to change between them
Line 4 is the page logo. To change it open framework.css and locate pageapp-signup-logo.
Lines 6 7 8 9 are the username field.
Lines 11 12 13 14 are the email field
Lines 16 17 18 19 are the calendar field. The class set-date will set the current date using JS
Lines 21 22 23 24 are the password field.
Line 25 is the register button
Line 26 closes the unboxed layout
Line 27 closes the cover-center
Line 28 is the dark overlay
Line 29 and 30 are the buttons are the bottom left and right of the screen
Line 31 closes the page-signup wrapper / cover-center
<div class="pageapp-login bg-5 cover-screen">
<div class="pageapp-login-content cover-center">
<div class="unboxed-layout">
<a class="pageapp-login-logo" href="#"></a>
<div class="pageapp-login-field">
<i class="fa fa-user"></i>
<input type="text" value="Username" onfocus="if (this.value=='Username') this.value = ''" onblur="if (this.value=='') this.value = 'Username'">
</div>
<div class="pageapp-login-field">
<i class="fa fa-lock"></i>
<input type="password" value="password" onfocus="if (this.value=='password') this.value = ''" onblur="if (this.value=='') this.value = 'password'">
</div>
<a href="#" class="pageapp-login-button button button-small button-green button-fullscreen">Login</a>
<div class="decoration"></div>
<a href="#" class="facebook-login facebook-color"><i class="fa fa-facebook"></i>Login with Facebook</a>
<a href="#" class="twitter-login twitter-color no-bottom"><i class="fa fa-twitter"></i>Signin with Twitter</a>
</div>
</div>
<div class="overlay bg-black"></div>
<a href="#" class="left-button"><i class="fa fa-question"></i>Don't have an account?</a>
<a href="#" class="right-button">Page Version <i class="fa fa-star"></i></a>
</div>
The login page is very, very simple to use. it gets added inside the id="content" and is not to be adde inside container or contet classes. This page will expand to the full width and height of the screen
Line 1 has the pageapp-signup page that generates the elements within it and the secondary classes bg-5 and cover-screen. bg-3 represents the background-image used ( can be changed within framework.css ) and cover-screen is a variable used by JS to expand to the full size of the screen
Line 2 is the wrapper content of the internal text and icon of the error page. The aditional cover-center class is used to aling the content to the center of the screen
Line 3 unboxed-layout represents if you want to have a image for a background, or a boxed white background text for a background. Replace unboxed-layout with boxed-layout to change between them.
Line 4 is the page logo. To change it open framework.css and locate pageapp-login-logo.
Line 6 7 8 9 is the username field
Line 11 12 13 14 is the password field
Line 16 is the login button
Line 17 is the decoration under the login button
Line 18 and 19 are the social login buttons
Line 20 closes the unboxed layout
Line 22 is the overlay
Line 23 and 24 are the bottom buttons
Line 25 closes the login page completly.
<div class="container-fullscreen coverpage-slider"> <!--Slides Go Here --> </div>
The coverpage is structured in a very easy fashion. The above structure houses different slides, that the user can swipe through
<div class="cover-slide cover-screen bg-5">
<div class="cover-center">
<i class="fa fa-cog cover-icon-center cover-icon-round full-bottom"></i>
<h3 class="center-text bold uppercase">Coverpages</h3>
<p class="center-text">
We love building awesome stuff, and nothing
says awesome stuff like a coverpage slider!
</p>
<a href="#" class="button button-cover button-center">Read More</a>
</div>
<div class="overlay bg-black"></div>
</div>
Line 1 creates the slide, covers the screen using cover-screen and adds the background bg-5 that can be edited in framework.css
Line 2 creates a center slide
Line 3 is the icon
Line 4 is the title
Line 5, 6, 7, 8 is the text
Line 9 is the button
Line 10 closes the center cover
Line 11 is the overlay
Line 12 closes the slide.
<div class="cover-slide cover-screen bg-6">
<div class="cover-left">
<h2 class="ultrabold">
FIND<br>
THE<br>
PERFECT<br>
DESIGN
</h2>
<p>
Play along with the coverpage<br>
to find the perfect design<br>
that suits you!
</p>
<a href="#" class="button button-cover">Read More</a>
</div>
<div class="overlay bg-black"></div>
</div>
Line 1 creates the slide, covers the screen using cover-screen and adds the background bg-5 that can be edited in framework.css
Line 2 creates a left slide, to change it to a right slide replace cover-left with cover-right
Line 3 4 5 6 7 8 creates the large text. The secondary class ultrabold is explained the secondary classes chapter.
Line 9 10 11 12 13 creates the paragraph
Line 14 creates the button
Line 15 closes the cover left
Line 16 is the overlay for the cover slide.
This is the second part of the docuemntation! The last part deals with simple things like the menus structure, changing the main logo and the sliders present in the template you purchased!
The features you've read so far are structure and framework related!