N. Agenecy | Documentation

Start

1. Installation

Follow the steps below to get started with your Site Template:

Open the nagency_vX.X/html Folder to find all the Templates Files
You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
Make sure you upload the required files/folders listed below:
- html/bootstrap - Bootstrap Folder
- html/css - Stylesheet Folder
- html/img - Images Folder
- html/inc - Plugin Folder
- html/js - Javascript Folder
- html/less - Less Folder
- html/video - Video Folder
The other files can be used according to your preferences.
You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

Note Before uploading one of the three home page, please rename it to: "index.html"

2. Html Structure

Simple Coding Structure:

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- Your Meta,Title & Stylesheets
    ============================================= -->
    ...

</head>
<body class="homepage_parallax" data-spy="scroll" data-target=".navbar-fixed-top" data-offset="100">

        <!-- Header
        ============================================= -->
        <header class="nav-transparent" id="home">

            ...

        </header>

        <!-- Site Content
        ============================================= -->
        <section id="content">

            <div class="container">

                <div class="row">

                    ...

                </div>

            </div>

        </section>

        <!-- Footer
        ============================================= -->
        <footer class="site-footer">

            <div class="container">

                ...

            </div>

        </footer>

        <!-- Back to Top
        ============================================= -->
        <a id="back-to-top">

            <i class="fa fa-angle-up">
            </i>

        </a>

        <!-- Scripts
        ============================================= -->
        ...

</body>
</html>

3. Favicons

You can add a Favicon to your Website using the following code:

<link rel="shortcut icon" href="img/favicon.png">

You can add Apple Touch Icons to your Website using the following code:

<link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">

4. Logo Setting

The Logo Container can be found in the Header Container - header

<div class="logo-container">
    <div class="logo-wrap local-scroll">
        <a href="#home"><img class="logo" src="img/logo_light.png" alt="logo" data-rjs="2"></a>
    </div>
</div>

Note For Transparent Header pLease use a light Version of your logo. Also if you want to amke your logo retina ready create another version of 2x/3x size of that logo. & upload it to the img folder. dont forget to declare data-rjs="2" or data-rjs="3". For an example if your logo name is myLogo.png, create myLogo@2x.png or myLogo@3x.png

5. Color Setting (Unlimted Variation)

Go to folder - html/less/base & edit the file vars.less. You have limitless power, choose any hex color code & entire template will be updated with your choosen color.

6. Custom css

We have include a Custom CSS File in the css Folder so that you can better handle your Customizations while updating Nagency to the Latest Version. Simply add all your Custom CSS Codes in the css/custom.css File and link it in the Document <head> after the css/style.css Linking. Also make sure that this is the Last Linked CSS File in the Document <head> so that your Custom CSS Styles are Overwritten properly. You can also edit less/custom.less. file if you wish!

Example:

<head>

    ...

    <!-- Custom CSS -->
    <link href="css/style.css" type="text/css" />
    <link href="css/custom.css" type="text/css" />

</head>

7. Setting Up Less Css (first way)

Step 1:

Change the following CSS Linking in your <head> Tag:

<link href="css/style.css" type="text/css" />

To it's LESS Linking:

1. <link rel="stylesheet/less" href="less/style.less" type="text/less" />

Step 2:

Add the LESS Script just after the js/custom.js Script Linking in your <bodt> Tag:
```
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>
```
or include less.min.js file which can be found in the "js" folder, like this:
```
<script src=js/less.min.js"></script>
```
Step 3:

Open the less/style.less and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the less/base, less/elements & less/general Folder.

8. Use LEss Compiler (second way)

You can also use applications which will manuyally compile your less file to a css stylesheet. & then you can include that stylesheet to your head We have used Prepros for our project. please visit their help page to understand how this works: https://prepros.io/help

Header

1. Header types

You can choose between 2 Types of headers while creating your Pages. Simply adding the Header Type CSS class to the Header Element will activate the Header Type. The list of Header Type Classes & its descriptions are provided below for your reference:

Type Class	Features	Code Example
`.nav-solid`	Header with a White Background & Dark text. You can change the css to add any solid colored background you want. see `less/elements/nav.less` file or update the `style.css`!	<header class="nav-solid"> ... </header>
`.nav-transparent`	Header with a transparent Background & Light text.	<header class="nav-transparent"> ... </header>

2. Navbar Position

You can choose between 2 Navbar positions while creating your Pages. Simply adding the Nav Type CSS class to the Nav Element will activate the Nav Type. The list of Nav Type Classes & its descriptions are provided below for your reference:

Type Class	Features	Code Example
`.navbar-default`	It will Keep Your Header & Navigation at the top of your page.	<nav class="navbar navbar-default"> ... </nav>
`.navbar-fixed-top`	Header & Navigation will scroll with you!	<header class="navbar navbar-fixed-top"> ... </nav>

Note Other Navbar position classes are also available for bootstrap. but you might need to modify or add some css styles to your stylesheet.

Page Elements

1. Page Preloader

You can add a Page Preloader on your page to allow your content to be load first before showing the full page. Simply add the code at the top of the page just after the <body> starts:

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

2. Page Titles

Combining with some other classes we have a very simple Page title section setup. You don't have to use them all. Just use based on your requirements.

<div class="section-title>
    <h2> .... </h2>
    <div class="divider"> </div>
    <p class="section-subtitle> .... </p>
</div>

Note You can add .divider-small class to shorten the divider width. Also adding .divider-center will make sure it is center aligned. If you want color rather than the default, add: .divider-white , .divider-black or .divider-theme

3. Bootstrap Grid

Bootstrap have their own doc page which is we think the best place to start if you are new to Bootstrap Grid. Find it here:
Bootstrap Grid

4. Back To Top

You can add a Back To Top Trigger on your Page to allow your users to scroll to the Top of the Page anytime they need to. Simply add the code below at the bottom of the page just after the </footer> ends:

<a id="back-to-top"> <i class="fa fa-angle-up"> .... </i> </a>

5. Height of your section

You can make your section full height by adding following class to any div:

<div class="js-height-full"> </div>

Or You can add 3 fixed height class like this:

<!-- Fixed Height Small (600px Height) -->
<div class="fixed-height-small"> 
    <div class="js-height-parent"> 
        .....
    </div>
</div>

<!-- Fixed Height Medium (700px Height) -->
<div class="fixed-height-medium"> 
    <div class="js-height-parent"> 
        .....
    </div>
</div>

<!-- Fixed Height Large (800px Height) -->
<div class="fixed-height-large"> 
    <div class="js-height-parent"> 
        .....
    </div>
</div>

6. Vertical Content

You can place your Content vertically center in a section like this:

<div class="vertical-section"> 
    <div class="vertical-content"> 
        .....
    </div>
</div>

7. Scroll Down

Scroll Down Animated icon can be created like this:

<div class="scroll-next> 
    <a data-scroll href="#" class="scroll-down"> <i class="fa fa-angle-down scroll-down-icon"> </i></a>
</div>

8. Smooth Scroll

You can Point any Link, Button on a Page to an Element ID which on Clicking scrolls to that Element.

You can use this functionality by adding data-scroll="#html-element-ID" attribute to a Button or a Link. Simply use the following Sample Code to use this functionality:

<a data-scroll href="#home" class="btn btn-main">Scroll to Home</a>

Note: You should have a Valid & Unique Element ID on the Page where you are planning to use the ScrollTo Functionality.

9. Helper Classes

We have created some really useful helper classes for you. Here are a few of them:

.no-padding - Remove Padding From section.
.no-margin - Remove margin From section.
.p-top-10 - Padding of 10px on the top side.
.p-bottom-10 - Padding of 10px on the bottom side.
```
also available: 20,30,40,50,60,80,100,140
```
.m-top-10 - Margin of 10px on the top side.
.m-bottom-10 - Margin of 10px on the bottom side.
```
also available: 20,30,40,50,60,80,100,140
```
.parallax-bg - For Parallax background.
.image-bg - For Image background.
.light-bg - For Light Colored background.
.dark-bg - For Dark Colored background.
.overlay-light - Create Light Colored Overlay over your background image/video.
.overlay-dark - Create Dark Colored Overlay over your background image/video.
.rs-video-overlay - Create Dark Colored Overlay over your Revolution Slider video.
.multi-columns-row - Add this class if you have multiple columns in between one row. It will clear unwanted content overlapping or switching.
.white-color - Make Font Color White in any section (add this class to parent div).
.dark-color - Make Font Color Dark in any section (add this class to parent div).
.theme-color - Make Font Color like your Theme in any section (add this class to parent div).

Slider

N.Agency use Revolutino slider for its hero sliders. You can find the Revolution Slider related Documentation here.
Read Revolution Slider Docs

Blog

Posts use Simple Markup. Use the Code Sample below:

<div class="postSingle">

        <!-- Post Image -->
        <div class="postMedia">
            <img src="img/blog/image.jpg">
        </div>

        <!-- Post Meta -->
        <div class="postMeta clearfix">
            <div class="postMeta-info">
                <span class="metaAuthor"><i class="fa fa-user"></i> <a href="#">Admin</a></span>
                <span class="metaCategory"><i class="fa fa-folder"></i> <a href="#">Category Name</a></span>
                <span class="metaComment"><i class="fa fa-comments"></i> <a href="#">3 Comments</a></span>
            </div>
            <div class="postMeta-date">
                <span class="metaDate"><i class="fa fa-calender"></i> <a href="#">12 January 2017</a></span>
            </div> 
        </div>

        <!-- Post Title -->
        <div class="postTitle">
            <h1>Post With Featured Image</h1>
             <div class="divider-small"></div>
        </div>

        <!-- Post Content -->
        .....................

        <!-- Post Tags -->
        <div class="postTags clearfix">
            <h4><i class="fa fa-tags"></i>Tags :</h4>
            <ul class="list-inline>
                <li><a href="#">Research</a></li>
                <li><a href="#">Wordpress</a></li>
                <li><a href="#">Branding</a></li>
            </ul>
        </div>

</div>

Portfolio

N.agency provides a very elegant way to showcase your work. Setting up Portfolio is simple. Please use the following codes:

Setting up Portfolio Filter:

<ul class="pf-filter text-center list-inline">
    <li><a href="#" data-filter="*" class="iso-active iso-button">All</a></li>
    <li><a href="#" data-filter=".graphic" class="iso-button">Graphic</a></li>
    <li><a href="#" data-filter=".webdesign" class="iso-button">Web Design</a></li>
    <li><a href="#" data-filter=".branding" class="iso-button">Branding</a></li>
    <li><a href="#" data-filter=".video" class="iso-button">Video</a></li>
</ul>

Note: If you want filter button background color gray (suitable for white background body), please also add .pf-filter-gray class to the ul with .pf-filter

Setting up Portfolio Items:

<div class="portfolio portfolio-isotope col-3 gutter">

    <!-- Portfolio Item -->
    <div class="pf-item branding">
        <a href="img/portfolio/1.jpg clas="pf-style lightbox-image mfp-image">
            <div class="pf-image">
                <img src="img/portfolio/1.jpg" alt="portfolio image">
                <div class="overlay">
                    <div class="overlay-content">
                        <div class="pf-info white-color">
                            <h4>Project Name</h4>
                            <p>Branding</p>
                        </div> <!-- .pf-info -->
                    </div> <!-- .overlay-content -->
                </div> <!-- .overlay -->
            </div> <!-- .pf-image -->
        </a> <!-- .pf-style -->
    </div>      

</div>

Note: If you want to remove space between Portfolio items, remove class .gutter Columns are available to you: col-2, col-3, col-4

N.Agency - Responisve Landing Page for Agency

Documentation - v.1.0