Bonno - Documentation

Version 1.2

Cross Browser, High Quality and Responsive Multipurpose HTML Template.

Thank you very much for purchasing our template. It is built with the latest HTML5 and CSS3 technologies, but at the same time it is also made compatible with older browser versions. If you have any questions that aren’t covered in this article, please feel free to email us on our user page, you can find the contact form here.

Don’t forget to rate this template, it helps us improve our products.

We invite you to view our portfolio.

Thanks so much!

Getting Started

Requirements

For installing this template you need to make sure that you have the following extensions on your webserver. You will need to contact your webhost if the following requirements are missing.

  • PHP 5.2+;
  • PHP Mail support;
  • Enabling JavaScript in the web browser.

Installation

Unzip the downloaded files to the local disk on your computer. Inside the extracted folder there will be contents and folder with documentation. Copy all contents, except from folder with documentation, to your server via FTP client.

Preloader

Before the main contents of the site are loaded, there is an opportunity to show the animate preloader of the site. It can be any image, a gif-animated icon. You can change the path to the image.

css/style.css
                    208 : #status {  background-image: url(../images/preloader.gif); }
                

If you don’t need the preloader, you can delete div with id preloader.

                    
                    <div id="preloader">
                     <div id="status"> </div>
                    </div>
                

Favicon

To change the favicon of your site, you need to load a new image in a site root or to point out a new address of the image.

                    8 : <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
                

Modular grid

The Template is built on the system by using a responsive 12-column markup. With the help of the given system you can create almost any modular grid and insert a necessary content in created modules.

Creating Columns

A <div class="section"> tag creates a 12-column markup of the page that is adjusted to the center of the browser window. The given content can contain div blocks from col span_1_of_12 to col span_12_of_12 classes, where the width of a column and the content inside it is specified by numbers from 1 to 12. A span_1_of_12 class has a minimal width equal to one column. A span_12_of_12 class takes the highest possible width that is in the settings of the template.

                    
                    <div class="section">
                     <div class="col span_4_of_12">
                      <h3>Our Approach</h3>
                     </div>
                     <div class="col span_3_of_12">
                      <p>Dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since, when an unknown.</p>
                     </div>
                     <div class="col span_5_of_12">
                      <p>Mellentesque habitant morbi tristique senectus et netus et malesuada famesac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi.</p>
                     </div>
                    </div>
                    
                

To highlight one of the columns with another color and to make their angles rounded it’s necessary to add class highlight and class rounded:

                    <div class="col span_3_of_12 highlight">
                         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
                    </div>
                

To change background color or add new class you should edit file css/style.css.

css/style.css
                    113 : .highlight  {
                     background-color: #F3F3F3;
                     border-radius: 4px;
                    }
                

Content align

To adjust the content inside a structural element it’s necessary to add the classes aligned left, aligned center or aligned right to the parent tag.

Class equal sets up the same height to all inserted blocks, thanks to which you can adjust the content inside blocks vertically.

                    <div class="section aligned center equal">
                     <div class="col span_4_of_12 aligned left">The column is aligned to the upper left edge</div>
                     <div class="col span_4_of_12 aligned">The column is aligned to the center edge</div>
                     <div class="col span_4_of_12 aligned right">The column is aligned to the right edge</div>
                    </div>
                

To centering any block, you have to add auto class to parent block.

Content

Typography

To adjust all font settings you have to edit typography section in css/style.css file:

css/style.css
                    139 : h1{ font-size: 48px; … }
                    140 : h2{ font-size: 38px; … }
                    141 : h3{ font-size: 30px; … }
                    176 : blockquote {
                      font-size: 17px;
                      line-height: 26px;
                      color: #555;
                      font-weight: 300;
                      margin: 0 0 30px 20px;
                    }
                

Links on the site can be stylized and represented in any way. The best common case is a <a> tag. For examplе:

                    <a href="" class="button">Button</a>
                    <a href="" class="button hover">Button</a>
                    <a href="" class="button free">Button</a>
                

In this example you can see a link in the view of a button with an icon and a text. The order of the text and icon layout depends on the code bar order in the file.

Links and buttons can be stylized at your discretion. By default there are some created classes that you can add to the existing buttons, for example: hover, free. You can add or change styles of links-buttons in the css/style.css file.

css/style.css
                    180 : .button        { font-size: 16px; color:#e7543d; line-height: 46px; height: 46px; padding: 0 41px; border-radius: 5px; border: 2px solid #E7543D; background-color: transparent; text-decoration: none; }

                    183 : .button:hover{ background-color: #E7543D; color:#fff; }
                

Links can be external and internal. All links and buttons in sections are external by default, it means that you will go to another page by clicking the button. An internal link will scroll the content to the necessary block on a page. You need to add the class internal and to point out # and id sections in the href attribute for an internal link.

                    <a class="internal" href="#portfolio">Portfolio</a>
                

Images

All images on the site can be pointed out in the marked view as they are written in the html code:

                    <img alt="" src="images/img-macbook.png">
                

There is a special view of images on which you can “hang” links and stylize them in a custom way. In the standard template such images are shown in the Meet Our Team section. For example:

                    <a href="blogPost.html" class="img">
                     <figure class="circle"><img src="images/blog/blog-5.jpg" alt=""></figure>
                     <div>
                      <ul>
                       <li class="date">12 september, 2014</li>
                       <li class="comms">3 comments</li>
                      </ul>
                     </div>
                    </a>
                

An unmarked list can contain any links such as external ones which lead to another page and internal ones – by clicking them the page is scrolled to the necessary section with the pointed id. For internal links you need to add the class internal. If you want to look at the article on creating sections with a particular id go to the special section.

The class circle or the class rounded can be set to both an image and another block. Thanks to them corners become rounded. In the css/style.css file you can change the radius of the created class or create a new one.

css/style.css
                    108 : .circle, .circle:after, .circle img {
                       border-radius: 100%;
                    }
                

Icons

This template has included Font Awesome icons. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. A very large variety of icons, which you can use on your site. Look icons and choose what you need. After that, write tag i with needed class. You can paste icons in any needed place on your website. Icons inherit all styles from parent block and from block, which are nested.

                    
                

Counter

Counters allow you to see the process of increasing any meaning to the required one when the counter area is in the visible browser area. There can be several counters. To add a counter to the site, use the following structure:

                    <div class="num">
                     <ins data-num="850.57" data-increment="10.55" data-fractional="2">0</ins><sup>$</sup>
                    </div>
                

Create the div block with the class num and we set an ins tag in it and we add obligatory attributes to it:

  • data-num - the final meaning to the size of which the counter will increase;
  • data-increment - how necessary it is to increase a counter during every iteration;
  • data-fractional - the number of important figures after a comma. If the number is integral, this attribute can be omitted or you can point out 0.

To add measurement units you need to insert a sup, and to change an external view of figures you need to edit the css/typography file.

css/style.css
                    422 : .pricing .num{ font-size: 80px; line-height: 80px; font-weight: 300; color:#4d4d4d; margin-bottom: 5px; }
                    465 : .num{ color: #000; font-size: 48px; line-height: 48px; }
                

Sliders

Sliders allow you to save space, animate and decorate your site. In the template there can be several sliders with different settings.

The slider occupies the whole section by adding a special class slider to the block and some additional markup in it. In each of them there can be 12-column system with various elements. Let’s have a look at the example of creating a random slider:

Logos Slider

                    
                    <div class="section slider logos">
                         <div class="sliderwrap">
                          <ul data-auto="false" data-fx="crossfade">
                           <li><a href="clients.html"><img src="images/logos/logo-1.jpg" alt=""></a></li>
                           <li><a href="clients.html"><img src="images/logos/logo-2.jpg" alt=""></a></li>
                           <li><a href="clients.html"><img src="images/logos/logo-3.jpg" alt=""></a></li>
                           <li><a href="clients.html"><img src="images/logos/logo-4.jpg" alt=""></a></li>
                           <li><a href="clients.html"><img src="images/logos/logo-5.jpg" alt=""></a></li>
                          </ul>
                         </div>
                         <div class="navbar">
                          <a href="#" class="arrow prev"></a>
                          <a href="#" class="arrow next"></a>
                          <nav class="pagination"></nav>
                         </div>
                    </div>
                    
                
  1. We add an obligatory class slider into a div block;
  2. you can add/change 2 data-attribute parameters in this div:
    • data-fx - the slider flip effect, fade or slide;
    • data-auto - autoscroll, true or false.
  3. create a familiar Section structure in a div;
  4. A block with the content class contains a slider – an unmarked list;
  5. Sliders li elements can contain align classes;
  6. There is a content with a 12-column markup and a random set of elements in the slider;
  7. Also the div navbar class can contain two links – switching slides back and forward in the view of 2 cursors that are at the both sides of the section and has pagination line.

Cursors and pagination are not obligatory. If the true definition is set up in the data-auto attribute, it means that slides will switch in a specified period of time without these elements. This period of time and the speed of switching can be changed.

js/custom.js
                    5 : sliderInterval: 6000,
                    6 : speedAnimation: 800
                

One Image Slider

Another type of slider is one image slider. Full responsive one image slider has similar structure and also you can write some title to each slide.

                    
                    <div class="section oneslider">
                     <ul data-auto="false" data-fx="crossfade">
                      <li>
                       <a href="about.html">
                        <img src="images/slide-1.jpg" alt="">
                        <span class="title black">Our Philosophy</span>
                       </a>
                      </li>
                      <li>
                       <a href="team.html">
                        <img src="images/slide-2.jpg" alt="">
                        <span class="title">Our Beautiful Team</span>
                       </a>
                      </li>
                     </ul>
                    </div>
                    
                

Portfolio

You can organize your work according to the preset filters. At first, you create works navigation with category:

                    
                

Items of this list have obligatory class filter and data-filter attribute. Data-filter helps you divide works on needed category. After navigation create container with class works-container and not obligatory additional class small (or medium or large.

                    
     
   Drops Branding   
 …  
     
   Allowson Branding   
 …  
     
   Fear Branding   

Each of mix block should has filtering class: branding, logotypes and etc. Some words about your work. When you click one of the description, you will go to single page.

You may see an example in contacts.page. This map is unique for the template and can be created only in one copy:

                            
                             <div class="section map" id="map"></div>
                            
                        

To set Google maps you need to edit the js/custom.js file. To get the longitude and latitude you can use the following service. Click a map and replace a marker into the place you need after switching to a link. Then insert the received coordinates into the js/custom.js file. Also you can edit infobox in this js file.

js/custom.js
                            7 : zoom : 14,
                            8 : locations: [54.690669, 25.268196]
                        

Form Feedback

The feedback can contain the following blocks:

  • <input type="text"> - a one line standard text area;
  • <input type="email"> - a text area for an e-mail address;
  • <textarea> - a more than one line area for a message;
  • <input type="submit"> - a sending form button;
  • <h4 class="succs-msg"> - delivery report.

Let’s have a look at the example of creating the countdown on the site.

                    

Contact Form

              

message was sent

All the areas must be in the form tag. The tag must have obligatory attributes:

  • action - – it shows the path to the php-file which deals with processing the form, it remains the same by default;
  • method - post remains the same by default;
  • id - a unique identifier, send-form remains the same.

Each area in the form must contain unique forms id, the name attribute and a not obligatory placeholder attribute. Id and name attributes must remain the same as shown above for the proper work and its further processing. The placeholder is a text which is shown to the user before inputting the main text in the area.

The sending button can be stylized by the code in the style sheet or by adding/changing the existing class. The text on the button is set up with the help of the value attribute.

If form areas are filled in the right way, after pressing the button there will appear a message with the class succs-msg. This block can be in any place of the page. You can set up an external view in the css/style.css file and it takes styles according to what element the succs-msg class is added to, in our case – to the h4 heading. If areas are filled in the incorrect way or aren’t filled at all, the class invalid is added to the area that hasn’t been validated. The invalid area style can be changed.

css/style.css
                    512 : input:invalid,
                       input.invalid,
                       textarea:invalid,
                       textarea.invalid{
                      color:#e7543d;
                    }

                    524 : .succs-msg {
                      margin-left: 3.5rem;
                      display: inline-block;
                    }
                

In the php/email.php file you can change the address of message receiving, a message topic, also the whole text that will deliver to the administrator of the site.

  • define('EMAIL_ADMIN_SENT_TO', 'admin@gmail.com'); - an e-mail address to which a letter will be sent for the administrator template;
  • define('EMAIL_ADMIN_SUBJECT', 'Feedback letter from contacts form on Bonno'); - the topic of a letter for the administrator template;
  • define('EMAIL_CLIENT_SUBJECT', 'Feedback letter from Bonno'); - the topic of a letter for the sender;
  • line 32 $letterToAdmin = … - the template of a letter for the administrator;
  • line 44 $letterToClient = … - the template of a letter for the sender;
  • an e-mail on behalf of whom a letter is sent to the sender: line 13: $headers .= "From: feedback@bonno.local\r\n";. \r\n obligatory to save at the end of the line.

Font Settings

To change the font-family you will have to edit the file css/style.css. If the font is a standard one, built the system by default, you can just write it here.

                    94 : html { font-family: 'Arial', sans-serif;  } // or whatever you want (e.g. "Verdana")
                

Also you can use Google Font and connect it to your website.

  1. Just go to http://www.google.com/fonts.
  2. Choose the appropriate font.
  3. Click the Quick-use button ().
  4. Choose the styles that you want;
  5. Choose the character sets that you want.
  6. Below that click on the @import tab and copy this line.
  7. Paste this line to that css/typography.css file on 3d line instead of the default (e.g.):
                                3 : @import url(http://fonts.googleapis.com/css?family=Open+Sans);
                            
  8. At last, copy font-family name from Google Fonts website and paste on css/typography.css:
                                51 : html { font-family: 'Open Sans', sans-serif;  }