ZAMA Documentation

Overview

Easy to use! That was the primary thing I had in my mind while creating this template. There is a separate HTML file for each functionality or page. The core files are in the assets folder. There are also demo images in the assets folder but we have created a list of mandatory files, if you want to use the core files only.

The pages on the demo website are the same as in the repo.

Mandatory files

The following files are mandatory for the core functionality


    -> assets
        -> js
            -> bundle.min.js
            -> scripts.js
        -> css
            -> bundle.min.css
            -> style.css
        -> img
            -> loader.svg
            -> 404.svg
            -> left.svg
            -> right.svg
            -> thumbs-down.svg
            -> thumbs-up.svg
            -> patterns (whole folder)

    -> index.html // Can be any html file

Where to start

Following is the single sidebar (left) structure


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link src="./assets/css/bundle.min.css" rel="stylesheet" >
        <link src="./assets/css/style.css" rel="stylesheet" >
    </head>
    <body>
        <header>
            <!-- Left Hamburger menu, only visible in small devices -->
            <a class="btn-left-menu" uk-icon="menu"></a>
            
            <div class="links">
                <!-- Header menu items will go here -->
            </div>
    
            <!-- Right side hamburger menu used, only visible in small screens -->
            <a class="btn-right-menu" uk-icon="more-vertical"></a>
            <div uk-dropdown="mode: click; pos: bottom-right">
                <ul class="uk-nav uk-dropdown-nav main-menu-items"></ul>
            </div>
        </header>
    
        <!-- Left sidebar -->
        <aside></aside>
    
        <!-- Main content -->
        <main></main>
    
        <script src="./assets/js/bundle.min.js"></script>
        <script src="./assets/js/scripts.js"></script>
    </body>
    </html>

Following is the two sidebars structure, the right sidebar will have a scrollspy to activate the current viewing item on the screen.


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link src="./assets/css/bundle.min.css" rel="stylesheet" >
        <link src="./assets/css/style.css" rel="stylesheet" >
    </head>
    <body>
        <header>
            <!-- Left Hamburger menu, only visible in small devices -->
            <a class="btn-left-menu" uk-icon="menu"></a>
            
            <div class="links">
                <!-- Header menu items will go here -->
            </div>
    
            <!-- Right side hamburger menu used, only visible in small screens -->
            <a class="btn-right-menu" uk-icon="more-vertical"></a>
            <div uk-dropdown="mode: click; pos: bottom-right">
                <ul class="uk-nav uk-dropdown-nav main-menu-items"></ul>
            </div>
        </header>
    
        <!-- Left sidebar -->
        <aside></aside>
    
        <!-- Button for right sidebar, visible on small screens only -->
        <div class="menu-btn-scrollspy">
            Links on this page
        </div>
    
        <!-- Right sidebar -->
        <section class="scrollspy"></section>
    
        <!-- Main content -->
        <main></main>
    
        <script src="./assets/js/bundle.min.js"></script>
        <script src="./assets/js/scripts.js"></script>
    </body>
    </html>

How to use the dark theme

You have to add the following css classes accordingly to achieve the dark theme


    <!-- Add "uk-light uk-background-secondary" to the header tag -->
    <header class="uk-light uk-background-secondary"></header>

    <!-- Add "dark" to the aside tag -->
    <aside class="dark"></aside>

    <!-- Add "uk-light" to the .scrollspy -->
    <section class="scrollspy uk-light"></section>

    <!-- Add "uk-light uk-background-secondary" to the main tag -->
    <main class="uk-light uk-background-secondary"></main>

How to change the base color

We are using css variables for colors, you can easily change its value. Open the assets/css/style.css and change the value on the second line, like below:


    /* Change it to your color */
    --color-base: #E91E63;

How to change the sidebar pattern

Add a css class pattern-1 to the aside tag, the pattern value is range from 1 to 10


    <aside class="pattern-3"></aside>

How to use icon

To use the icon, add the uk-icon attribute to a <span> or <a> element. To display the actual icon, you need to append the icon: NAME parameter to the attribute.


    <span uk-icon="heart"></span>

    <a href="#" uk-icon="heart"></a>

Created by Asfand with