Assemblyline

General documentation

This part of the doc will help you to quick start your project and will you a basic idea about how pages work. for any assistance you are always welcomed to drop a mail at support@assemblyline.in

Get Started »

Requirements

Installing the Assembly Builder

After downloading the .zip file that you have purchase from Themeforest, extract the contents to your localhost environment (WAMP/XAMP). Make sure your your localhost environment runs PHP (latest version recommended) and zip library is installed to ensure export of project.

Download WAMP - steps for installing WAMP
Download XAMPP - Steps for installing XAMPP

Note: You will enable  PHP zip Library to run the Assembly Builder

Getting Started

Structure

Assembly is an Multipurpose HTML Design Template.All pages reside in the "root" Folder itself.Javascript and CSS files are located at JS and Css Folder repectively.

Note: you do not need Builder folder to be uploaded when deploying your theme on your development server, when you choose Export only HTML mode on builder.


Getting Components


We have simplified the process of extracting components from the theme by making an seprate tool for the puropose Component Markup.
To get a component just navigate to Component markup from Nav then Click on the component whose markup is to used.it will genrate the code as you click on the component thumbnail and you can copy the HTML markup.

Tip: After selecting the component just paste it on the page where you want particular component.

Responsive Paddings

Reponsive padding Classes will enable you to create proper spacing between the elements. all the classes are present in the utility.css in css folder.

Options

Class Name Default
 (Large and MD Devices)
Devices max-width 767px
  (Tabs & SM Devices)
.padd-top-xxs  16px 16px
.padd-bottom-xxs 16px16px
.padd-top-xs 26px 16px
.padd-bottom-xs 26px 16px
.padd-top-sm 35px 20px
.padd-bottom-sm 35px 20px 
.padd-top-md 48px 32px
.padd-bottom-md 48px 32px
.padd-top-lg 68px 41px
.padd-bottom-lg 68px 41px
.padd-top-2x 104px 72px
.padd-bottom-2x 104px 72px
.padd-top-3x 150px 80px
.padd-bottom-3x 150px 80px
.padd-top-4x 184px 96px
.padd-bottom-4x 184px 96px
.padd-top-5x 240px 128px
.padd-bottom-5x 240px 128px

Typography

The below chart will give you a brief desscription about the typography throughout the theme. for more details refer utility.css

Options

Class Name Default
 (Large and MD Devices)
Devices max-width 767px
  (Tabs & SM Devices)
h1 56px 32px
h2 40px32px
h3 32px 24px
h4 24px 18px
h5 16px 16px
h6 12px
.big 72px 56px
.big2x 100px 72px
.big3x 130px 90px
.text-xs 12px -
.text-sm 16px -
.text-md 18px -
.text-lg 25px -
.text-xxs 10px -

Navigations

We have tried to simplify the navigation of bootstrap default nav. navigation comes with three color variants transparent , white and sticky.
Navigation background color can be manipulated using .bg-* color classes. you can specify text color using .nav-dark for light text color , whereas .nav-light will give you dark text color ie : black


   <nav class="navbar nav-dark navbar-transparent">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->

      <div class="navbar-header">
        <a class="navbar-toggle collapsed icon ion-navicon nav-collapse-icon" 
        data-target="#mainmenu" data-toggle="collapse"></a> <a class="navbar-brand" href="index.html">
        <img class="img-responsive" src="img/logo.png"></a>
      </div><!-- Collect the nav links, forms, and other content for toggling -->

      <div class="collapse navbar-collapse" id="mainmenu">
        <ul class="nav navbar-nav navbar-right">
         
          <li>
            <a href="#">Link</a>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

creating mega menu

you create megamenu using assembly by following the given structure.use .mega-content class for creating a menu. .span*_no will allow you to specify the width of megamenu content.


   <nav class="navbar nav-dark make-sticky navbar-transparent">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->

      <div class="navbar-header">
        <a class="navbar-toggle collapsed icon ion-navicon nav-collapse-icon" 
        data-target="#mainmenu" data-toggle="collapse"></a> <a class="navbar-brand" href="index.html">
        <img class="img-responsive" src="img/logo.png"></a>
      </div><!-- Collect the nav links, forms, and other content for toggling -->

      <div class="collapse navbar-collapse" id="mainmenu">
        <ul class="nav navbar-nav navbar-right">
         
          <li>
            <a href="#">Link</a>
          </li>
          <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Elements <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                      <li>
                          <!-- Content container to add padding -->
                          <div class="mega-content  span4">
                              <ul class="col-md-6 list-unstyled">
                                  <li><a href="#" class="xs-hidden"> lorem ispum</a> </li>
                                  <li><a href="#" class="xs-hidden"> lorem ispum</a> </li>
                              </ul>
                              <ul class="col-md-6 list-unstyled">
                                  <!-- content -->
                              </ul>
                            </div>
                      </li>
                  </ul>
              </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

making nav sticky

For making navsticky on scroll you have to add .make-sticky to the navbar class. you can change CSS as you need by manupilating .has-scrolled class in utiltity.css


   <nav class="navbar nav-dark make-sticky navbar-transparent">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->

      <div class="navbar-header">
        <a class="navbar-toggle collapsed icon ion-navicon nav-collapse-icon" 
        data-target="#mainmenu" data-toggle="collapse"></a> <a class="navbar-brand" href="index.html">
        <img class="img-responsive" src="img/logo.png"></a>
      </div><!-- Collect the nav links, forms, and other content for toggling -->

      <div class="collapse navbar-collapse" id="mainmenu">
        <ul class="nav navbar-nav navbar-right">
         
          <li>
            <a href="#">Link</a>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

Slideshows

Assembly uses Slick Slider for slideshow throughout the theme.for more details refer Slick Docs.
To intialize slider you need to following structure.


  <div class="slideshow">
     <div class="slide">
<!-- your content -->
</div> </div>

To make controls dark use .dark-control with slideshow
List of Slideshow UI Classes

  • .no-controls show no controls
  • .hide-arrows show no side arrows
  • .hide-dots show no thumb dots


  Example with dark-controls and hidden thumb dots

  <div class="slideshow dark-control hide-dots">
     <div class="slide">
<!-- your content -->
</div> </div>

Parallax

Assembly uses stellar.js for parallax scrolling animations. refer Docs for more information on the plugin just use data-stellar-background-ratio="0.5" for setting the parallax ratio. it is adivsable to use .bg-img class with .parallax-content to achieve smooth results.


  <div class="bg-img parallax-content" data-stellar-background-ratio="0.5">
    <!-- add content divs here -->
  </div>

Note: Parallax animations are disabled on the mobile screens for better performance.

Portfolio Masonry

Portfolio's Masonry layout is achieved using Desandro jquery plugin.it enables you to create a compact grid layout for your presentations.you refer the docs over here


  <div class="masonry-container">
    <!-- begin masonry-container container -->
      <div class="masonry_item col-md-3 col-sm-3">
          <!-- your content -->
      </div>
  </div>   

Instagram feed

Assembly components allow you to import instagram content using jquery plugin Spectagram. by specifing the username in data-insta-username attribute. spectagram requires instagram access token.you can follow jelled.com tutorial.
Attributes that can be configured are

  • data-insta-username your instagram handle/ username
  • data-insta-length number of images that can be loaded
  • data-insta-wrapper markup that you need to wrap around the instagram image


  
   <div class=" instafeed" data-insta-username="weddingphotoinspiration" data-insta-length="12 " 
            data-insta-wrapper="<div class='col-md-2 no-padding col-xs-2 '></div>">
   </div>

Google Maps

We have integrated google maps with assembly for providing contact information in your contact pages.

  
  <div class="maps" data-latitude="40.7454526" data-longitude="-73.9361703" 
  data-zoom="12" id="map1"></div>


   <script src="https://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>

Note: Remember to add google map script to page inorder to run the maps.

BG Videos

youtube videos

You can play youtube videos in background using YTPlayer plugin for background videos. docs are available here

  
  <div class="player full-height mb_YTPlayer" 
     data-property="{videoURL:'http://youtu.be/gXwK2NgQ70s',containment:'self',autoPlay:true, mute:true, 
     startAt:10,stopAt: 200 ,opacity:1, showControls:false}">
  </div>


    $(".player").YTPlayer();

Tip:
To edit Video Link in Builder just replace your video ID
https://www.youtube.com/embed/your-youtube-id-here?autoplay=0&rel=0&wmode=opaque

local videos

Running local videos is possible with theme by using .vid-bg for creating container for runnig the video.make sure you have a proper ascept ratio for running the full screen video

  
  <section class="full-height vid-bg">

    <div class="localBgvid" >
        <video autoplay muted loop>
                          <source src="video/video.webm" type="video/webm">
                           <source src="video/video.mp4" type="video/mp4">
        </video>
    </div>
    <div class="bg-img full-height"  style="background-image:url(img/adventure-2.jpg)">
    </div>
    <div class="overlay absolute">
      <div class="v-align">
        <div class="h-align  color-white">
          <h1 class="title big">local video.</h1>
          <p class="hero-subtitle padd-bottom-xs">explore your limits</p>
          <a href="#"  class="btn btn-bg-white-border">
            Buy Now  
          </a>
        </div>
      </div>
    </div>
  </section>

inline videos videos

To add inline videos which are available in content-10 & content-8 add URL as follows

  1. For youtube :
      
    
      adding video from youtube eg link --->  https://www.youtube.com/embed/video_id 
    
      eg if youtube video URL on browser is
          https://www.youtube.com/watch?v=0uaquGZKx_0  <---- in browser 
     
      then embed url will be  
     
          https://www.youtube.com/embed/0uaquGZKx_0 <-------- add this link for video in builder
      just add video id in trail of url
      
  2. For vimeo :
      
    
      adding video from vimeo eg link --->  https://player.vimeo.com/video/video_id
    
      eg if vimeo video URL on browser is
          https://vimeo.com/43005056  <---- in browser 
     
      then embed url will be  
     
         https://player.vimeo.com/video/43005056 <-------- add this link for video in builder
      just add video id in trail of url
      

Video backgrounds are disabled on mobile devices.

lightbox

lightbox video

Assembly uses sachinchoolur's JQuery lightbox box plugin for implementing lightbox videos and galleries. we have used Plugins Here in our theme.


  </ul>
   <!-- lightbox video example -->
  <a class="open_video open_lightbox" href="#demovideo">
                <i class="icon ion-ios-play" 
                data-src="https://www.youtube.com/embed/AhOdPnA3rhs?autoplay=0&rel=0&wmode=opaque"></i>
  </a>


  $(".open_lightbox").lightGallery();

lightbox Gallery

for creating a lightbox gallery as seen in demos,add open_lightbox_image in the anchor tag you want use , to create a thumbnail gallery add lightbox-gallery to parent container and then add open_lightbox_image for each child.
following is an example markup for gallery

  <div class="row masonry-container lightbox-gallery no-margin no-padding">
    <!-- <begin masonry-container container> -->
                
               
                <div class=" masonry_item  padd-top-md col-md-6 col-sm-6">
                    <div class="shadow-z3 placeholder">
                    <a href="img/works/2.jpg" class="open_lightbox_image">
                        <img alt="image" class="img-responsive"  src="img/works/2.jpg">

                        <div class="txt-placeholder overlay">
                            <div class="v-align">
                                <div class="h-align">
                                    <h2 class="big color-primary"><i class="ion-ios-close-empty"></i></h2>                               
                                     </div>
                            </div>
                        </div>
                        </a>
                    </div>
                </div>
                  <div class=" masonry_item  padd-top-md col-md-6 col-sm-6">
                    <div class="shadow-z3 placeholder">
                    <a href="img/works/2.jpg" class="open_lightbox_image">
                        <img alt="image" class="img-responsive"  src="img/works/2.jpg">

                        <div class="txt-placeholder overlay">
                            <div class="v-align">
                                <div class="h-align">
                                   <h2 class="big color-primary"><i class="ion-ios-close-empty"></i></h2>                               
                                    </div>
                            </div>
                        </div>
                        </a>
                    </div>
                </div>
      </div>         

Javascript Code for gallery. for more, refer main.js in js/ folder


  $(".lightbox-gallery").lightGallery();

Support

We have outlined the bare bones of theme in the documentation.if you have any query regarding the theme just drop us an email support@assemblyline.in. we would be happy to help with your issue.

Copyright

Copyright © 2016 Assemblyline.in