Thank you for downloading Arisn

HTML Documentation

File Structure

This theme uses the following file structure

  • /HTML
    • /css All CSS Files per theme
    • /img All images
    • /js Template JS
    • /vendor Imported JS
    • /video All Videos
    • /master SASS Files

Javascript

The /vendor files, that are imported files are:

Do not change the files included in /vendor

You can work on the files in /js

  • main.js / main.min.js In here you can control the following
    • Nav behaviour
    • Fade in on load
    • Mobile & Minimal menu functionality
    • Parallax
    • Masonry Breakpoints and behaviour
    • Owl Carousels
    • Caption Scroll
    • MatchHeight
    • Modals
    • Tabs
    • Accordions
  • googleMap.js You can go to a site such as snazzymaps.com and paste your style in here to customize your map
  • modernizr.js No need to change this

Masonry.js

Here is an example of the usage in main.js


    $(window).load(function() {
        var masonry = $('.masonry');
        if (masonry.length > 0) {
            masonry.masonry({
                itemSelector: '.grid-item',
                transitionDuration: '0',
                resize: false,
                columnWidth: '.grid-sizer',
                percentPosition: true
            });
        }
    });

This is one example of many usages in this file. Every different element is named after what it is used for in the file. You can see here which parameters you are able to change

For more helpful information on how to customise any of these settings please read here: http://masonry.desandro.com/

Owl Slider.js

Here is an example of the usage in main.js


    $('.center-nonloop-autowidth').owlCarousel({
        center: true,
        autoWidth: false,
        animateOut: 'fadeOut',
        dots: true,
        items: 2,
        loop: false,
        margin: 30,
        responsive: {
            700: {
                items: 2
            },
            1500: {
                items: 3
            }
        }
    });

This is one example of many usages in this file. Every different element is named after what it is used for in the file. You can see here which parameters you are able to change

For more helpful information on how to customise any of these settings please read here: http://www.owlcarousel.owlgraphic.com/

HTML Strcture

This template uses the Bootstrap 3 Framework - Read more here

With bootstraps HTML syntax, you can use simple HTML structure to achieve a fully responsive working website

CSS Structure

For you to understand where everything is:

All of the imports are

  • theme.css
  • theme2.css
  • theme3.css
  • theme4.css
  • theme5.css
  • theme6.css
  • theme7.css

Customising your CSS

This is best done with SASS, if you have the ability to do so, please find the sass files in /master/sass

Otherwise, take the theme that you like the most, and build on that one.

Customising the Template

Give the page borders

  • Add the class .border-light or .border-dark to your body

    • Full width navigation

  • Change the .container to .container-fluid

    • Turn any element in to full width from container

  • Change the .container to .container-fluid

    • Create a dark section or sections (Banners included)

  • Per section add the class .dark1.dark2.dark3 or to make the background grey, use: .grey. If you want to reset this to white, remove the class completely.. Use the online customiser to see examples of how you can do this: Click here

    • Navigation styles

  • To style your navigation differently you can do one of the following.
    • nav#light Will make your navigation light + smart sticky
    • nav#dark Will make your navigation dark + smart sticky
    • nav#black Will make your navigation black + smart sticky
    • nav#primary Will make your navigation your primary colour + smart sticky
    • nav#secondary Will make your navigation your secondary colour + smart sticky
    • nav.start-light Will start the navigation light, but turn to whatever style you have defined in the ID on stick
    • nav.transparent Will make the background of your navigation transparent whilst positioned on the banner

    • Make your navigation minimal / collapsed menu

    • nav.minimal Make sure .regular is removed from the nav and minimal is applied. See markup on app2 page for correct class placements.

    Using full width content parts vs contained parts

  • Just as you do with the full width or contained navigation, use either .container or .container-fluid More information is available again on the Bootstrap 3 website

    • Selecting a theme

    Using one of the existing themes is quite easy, just before the end of the head please change the theme to one that you like

    • theme1.css
    • theme2.css
    • theme3.css
    • theme4.css
    • theme5.css
    • theme6.css
    • theme7.css
    link id="theme" rel="stylesheet" href="css/theme.css"

    Using Icons

    The icons used are all from a font. Here is shown which syntax is needed to use them

    Icons from Ion Icons

    Link to the Ion Icons code sheet: http://ionicons.com/cheatsheet.html

  • Example of an alert icon is:

    • Using Video in Banners

    If you take a good look at our headers/header-video.html this following explains how to use the correct code to achieve this.

    The video gets imported with following settings:

  • Autoplay
  • Muted
  • Loop

    • The poster is a picture of the vide you will want to add to show when the video has not yet loaded. Then within, replace the banner1/format with your own video file.

    Credits

    All images are for preview purposes only.

    Javascripts

  • jQuery - Link
  • Bootstrap 3 - Link
  • Inview - Link
  • Match Height - Link

    • Fonts

  • Google Fonts - Link
  • Ion Icons - Link

    • Images

  • Pexels - Link
  • Unsplash - Link
  • Pixeden - Link
  • Graphicburger - Link
  • Freebiesbug - Link

    • Changelog

    Not changelog as of current