Version: 1.0 | Last update: 13 December 2018 Introduction Getting Started HTML Structure Logo Fonts Sliders Helper Classes Contact Form Grid Browser Support Source & Credits Introduction Thank you for purchasing Novas template! This documentation will give you an understanding of how Novas is structured and guide you in performing common functions. If you require further assistance not covered in this documentation, please contact us in our Support Portal http://support.aucreative.co/ If you need custom customization, please contact us from here: http://themeforest.net/user/Eagle-Theme Thank you so much! AU CREATIVE Getting Started What's Included Once you have download the package you will see the following folder structure in " template" Folder css- Main Stylesheet Files fonts- Fonts file and css for fonts images- Images Files js- Javacripts Folder includes- PHP Files (contact form... etc) vendor- Vendor Files (jquery, bootstrap... etc) audio- Audio Files (mp3... etc) In order to use in your website, you need to upload template files ( inside the folder www) to your web server with the help of one of the FTP-clients (for example, WinSCP or Total Commander etc). HTML Structure Novas template is based on Bootstrap Framework ( http://getbootstrap.com/) Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Below is a sample coding structure: <!DOCTYPE html> <html lang="en-US"> <head> </head> <body> ... ... ... </body> </html> Logo Settings Default site logo is placed insideheader container. Changing Fonts By default Novas Template uses One fonts from google library: 'Poppins' from the Google Fonts Library If you wish to add/change the site fonts, please take a look in thehead part of the website and you will find this tag: To include new font you can simply add another line like this: Or add an| seperator and pasteLato:400,300,800,700,600 after default website fonts link. Sliders Novas includes 1 sliders that gives you all the options they need. Owl Carousel 2: Is an touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. Owl Carousel 2 data config This excellent carousel slider can be controler usuing HTML5 data attirbutes, see the full list below: items - Type: Number The number of items you want to see on the screen. loop - Type: Boolean Infinity loop. Duplicate last and first items to get loop illusion. nav - Type: Boolean Show next/prev buttons. navText - Type: Array HTML allowed. navElement - Type: String DOM element type for a single directional navigation link. dots - Type: Boolean Show dots navigation. autoplay - Type: Boolean Autoplay. responsive - Type: Object Object containing responsive options. Can be set to false to video - Type: Boolean Enable fetching YouTube/Vimeo/Vzaar videos. animateIn - Type: String/Boolean Class for CSS3 animation in. remove responsive capabilities. The full documentation of Owl Carousel 2 can be found here Slider Revolution Novas includes 1 slideshow that gives you all the options they need. Slider Revolution: An All-Purpose Slide Displaying Solution that can show any kind of media with highly customizable transitions, effects and animations. The full documentation of Slider Revolution can be found here Helpers Novas helper css classes allow you to build your custom layout without touching any CSS code These classes are generic helper classes predifined in the CSS of pages, here is quick view what they can do Margins You can add this helper class to any element in your HTML code to set Margins First Prefix ( m*) m for margin Second Prefix(m-t/b/l/r-*) t : top, b : bottom, l : left, r : right Last Prefix(m-t$value) 5,10,15,20, ... 150 example : m-t-10 which means Margin Top 10px m-b-20 which means Margin Bottom 20px m-l-5 which means Margin Left 5px m-r-35 which means Margin Right 35px Note:Value can not be anything, 1,2,4,5,6. It has a step of 5px, eg: 5,10,15 Other options: To remove margin from a HTML element add the class no-margin Paddings You can add this helper class to any element in your HTML code to set paddings First Prefix ( p*) Second Prefix(p-t/b/l/r-*) Last Prefix(p-t-$value) Prefix ( p- t : top, b : bottom, l : left, r : pFirst for padding Second Prefix(p-t/b/l/r-*) right *) 5,10,15,20, ... 150 Last Prefix(p-t-$value) example : p-t-10 which means padding Top 10px p-b-20 which means padding Bottom 20px p-l-5 which means padding Left 5px p-r-35 which means padding Right 35px Note:Value can not be anything, 1,2,4,5,6. It has a step of 5px, eg: 5,10,15 Contact Form You need to modify email address and email title onincludes/config.json in includes folder,line 2 andline 3 "MAIL_HOST": "info@yourdomain.com" "MAIL_TITLE": "[Novas] Contact Form Message" with your or company contact email address and the title mail you want. Note: Your server must support php sendmail()function to make contact form work properly Grid Bootstrap grid includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works: You must start withrow There are pre-define classes of columns starting from 1 to 12, examplecol-md-1 tocol-md-12 Each of these value represent a percentage of the screen, 1 being the smallest and 12 being 100% You can create different grid pattern that finally forms 12 For more information about Bootstrap, visit: http://getbootstrap.com/ example : .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-8 .col-md-4 .col-md-4 .col-md-4 .col-md-4 .col-md-6 .col-md-6 NoteBootstrap includes different grids for different screen sizes, "col-md" md stands for medium screen, the following table explains: Grid behavior Container width Class prefix # of columns Column width Gutter width Nestable Offsets Column ordering Extra small devices Phones ( Small devices Tablets Medium devices Desktops Large devices Desktops <768px) (≥768px) (≥992px) (≥1200px) Horizontal at all times Collapsed to start, horizontal above breakpoints None (auto) 750px 970px 1170px .col-xs- .col-sm- .col-md- .col-lg- ~81px ~97px 12 Auto ~62px 30px (15px on each side of a column) Yes Yes Yes Browser Support Novas is built keeping mind to support a wide range of browsers and devices. We all major browers Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and Above Chrome Android iOS Mac OS X Windows Firefox Internet Explorer Supported Supported Supported N/A N/A Opera Safari Not Supported N/A Not Supported Supported Supported Supported Supported Supported Supported Supported Supported Supported Not Supported Source & Credits All images are only for demonstration purpose, however you can re-download them in sites below. Almost all (not including overclothing.com, Daniel Zenda, Freepik etc...) images are released free of copyrights under Creative Commons CC0. Images & Mockups All Free Stocks http://allthefreestock.com Pexels https://www.pexels.com/ Scripts jQuery http://www.jquery.com/ Owl Carousel 2 http://kenwheeler.github.io/slick/ Slider Revolution https://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/ Media Element https://www.mediaelementjs.com noUiSlider https://refreshless.com/nouislider/ Countdown http://hilios.github.io/jQuery.countdown/ FancyBox http://fancybox.net/ CSS & Fonts Bootstrap Framework http://getbootstrap.com/ Line Icons https://linearicons.com/free Material Design Iconic Font http:http://zavoloklom.github.io/ Google Fonts https://www.google.com/fonts
