Agivee HTML Documentationv2.0.0

Package contents

Once you download the zip folder, unzip it and make sure you have all the folders including dist, documentation, psd and src folder. The main file of this template is under folder dist, and the structure of file that you get should be like below.

HTML Structure

This template uses latest UIkit 3 with valid HTML5 tags, for detail information about UIkit please take a look at their website - https://getuikit.com/docs/introduction . The basic structure of this template is listed below, all of the content you will make is must under uk-grid class and you can use any width column under that class for wrap the content.

<header data-uk-sticky="top: 400; cls-active: in-sticky">
    <div class="uk-section uk-padding-remove-vertical">
        <div class="uk-container">
            <div class="uk-grid">                
                HEADER CONTENT AREA FOR LOGO AND NAVIGATION
            </div>
        </div>
    </div>
</header>

<main>
    <div class="uk-section">
        <div class="uk-container">
            <div class="uk-grid">                
                YOUR CONTENT HERE SHOULD BETWEEN UK-GRID CLASS
            </div>
        </div>
    </div>
</main>

<footer>    
    <div class="uk-section">
        <div class="uk-container">
            <div class="uk-grid">
                FOOTER INFORMATION HERE LIKE LOGO, LINK, AND SOCIAL ICONS LINK
            </div>
        </div>
    </div>
</footer>

Logo

To change the logo, replace the img src=" " and data-src=" " with your logo url.

<div class="uk-grid-collapse" data-uk-grid>
    <div class="in-header-logo">
        <a class="uk-logo" href="index.html"><img src="img/logo.svg" data-src="img/logo.svg" width="138" height="72" alt="logo" data-uk-img></a>
    </div>
</div>

note data-src=" " used for improves page speed significantly. reference ~ https://getuikit.com/docs/image

Navigation

The basic structure of navigation is like below, and for dropdown just add uk-navbar-dropdown class.

<nav class="uk-navbar-container uk-navbar-transparent uk-float-right uk-position-bottom uk-visible@m" data-uk-navbar>
    <div class="uk-navbar-right">        
        <ul class="uk-navbar-nav">
            <li>
                <a href="#url">Link parrent 1</a>
            </li>
            <li>
                <a href="#" data-uk-icon="icon: fa-sort-down; ratio: 0.023">Link parent 2</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li><a href="#url">Link child 1</a></li>
                        <li><a href="#url">Link child 2</a></li>
                    </ul>
                </div>
            </li>
        </ul>        
    </div>
</nav>

CSS files & Structure

Mainly two main CSS files are used in this theme. The first one uikit.css, second one is style.css which for this template. If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

uikit.css is easy to custom because every styling element is block commented by UIkit

/* ========================================================================
Component: Label
========================================================================== */
.uk-label {
    display: inline-block;
    padding: 0 10px;
    background: #1e87f0;
    line-height: 1.5;
    font-size: 0.875rem;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap;
    border-radius: 2px;
    text-transform: uppercase;
}

style.css is also easy to custom, same with UIkit css every custom styling by Indonez is block commented and use special prefix in- before the selector class name.

/* Indonez custom card */
.in-custom-card .uk-card {
    border: 2px solid #dbdbdb;
    border-top: none;
    border-right: none;
    box-shadow: 0px 4px 0px 0px #f8f8f8;
    border-radius: 0px;
}

SASS file customization

You can customize the sass file in scss folder inside src folder. Each element that you can modified is ready in separated folder for every specific element, and for global variable style you can modified in _custom-variable and _custom-mixins for styling that need modified with UIkit css framework.

We use Gulp to compile Sass file to Css file and recommend to use Visual Studio Code as code editor also it built in terminal.

# Install Gulp as global, skip if you already have it 
npm install -g gulp-cli

# Go to directory your template file with terminal and run this 
npm install

# To compile the sass file just run this 
npm run build

Javascript Configuration

This template imports five Javascript files. All the Javascript files can be found inside the js folder.

<!-- Javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit-icons.min.js"></script>
<script src="js/config.js"></script>
<script src="js/vendor.js"></script>

• jquery.min.js - jQuery minified version 3.4.1 hosted on cdn cloudflare
• uikit.min.js - Uikit css framework minified version 3.1.7 hosted on cdn cloudflare
• uikit-icons.min.js - Uikit default icon that needed by css framework, minified version
• config.js - Configuration file scripts for Homepage slideshow, active menu, and dynamic breadcrumb
• vendor.js - Library scripts that need in config.js also font-awesome icons library

Google map Settings

To change Google map location please follow this step

• Open Google Maps and search for the address/company you want to show.
• Once the location has been marked by the search, go into the ‘Share’ option found directly below the locations image.
  
• Inside share you will find two tabs, open the ‘embed a map tab’. This display should now show you a copy of what your embedded map will look like on your website.
  
• Once your satisfied with your maps size click the ‘copy html’ button and paste it in some text editor. Get the only https link, we don't need iframe here.
• Replace the current https google map link with the newer that you made.

<a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3965.079233417587!2d106.92343342750851!3d-6.383774895483131!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6994a5dd9c1283%3A0x17fe2652752ef425!2sMal%20Ciputra%20Cibubur!5e0!3m2!1sen!2sid!4v1567523654300!5m2!1sen!2sid"
    data-caption="Google Maps" data-type="iframe"><span class="uk-label uk-margin-small-left">View on Map</span></a>

note the current google map link located in contact.html are on the line 201

Contact form Settings

Contact form uses php to send email, please open sendemail.php file and change the current email "yourmail@here.net" with your email address.

$mailto   = "yourmail@here.net";     // Enter your mail address here. 
$name     = ucwords($_POST['name']);
$subject  = $_POST['subject'];
$email    = $_POST['email'];
$message  = $_POST['message'];

Sources & Credits

Fonts

• Rubik - https://fonts.google.com/specimen/Rubik
• Karla - https://fonts.google.com/specimen/Karla

CSS framework & Icons

• UIkit 3 - https://getuikit.com
• Font Awesome - https://fontawesome.com/icons

Javascript

• jQuery - http://www.jquery.com/
• breadcrumbs-generator - https://github.com/sutara79/jquery.breadcrumbs-generator