Here is a package structure:

• app
• dist
• .bowerrc
• bower.json
• gulpfile.js
• package.json

App folder contains developer version of the template with bower_components folder, css with all compiled css style sheets, jade folder with all jade template files and less folder with all less files. Also here are all compiled html files for the template from jade generation.

Dist folder is what you need if you want to start a project quickly. It contains all necessary files which are ready for uploading on your server. All css and js files from bower components are compiled and minified to dist/js/vendor.js and dist/css/vendor.css files respectively. dist/js/framework.js is a main file with jquery template plugins for mega menus, accordions, tabs and info blocks. dist/fonts foolder contains FontAwesome and GliphIcons fonts. Also here are all ready-to-use html files. In general, you need just to paste your text and images and your website is ready.

.bowerrc is a file of bower configuration. It specify the folder where bower components will be downloaded.

bower.json is a bower file with a list of used components.

gulpfile.js is a file with gulp tasks to run.

package.json is a file with all node modules used in the development process.

Well, there is 2 ways to crete a website using this template. The first is to edit all html and css files manualy (so, you should know the basics of html and css langs) in the dist folder. But I do not think this is a best way to go. So there is a second one: the Path of Developer. It assumes that the template buyer is familiar with modern front-end technologies. But if you are not, this is not a big problem. I'll walk with you through all steps to get good product at the end. So the second way is to use modern web technologies such as less, jade and gulp for easy customization and developing. The idea of the template is to get much result with less movings. But to achieve this you should have some development environment on you working computer.

For the first you should have NodeJS installed on you computer. You can download it on the official website here. You are do not have to be NodeJS guru. You need just to download and install it

After that you need to install Gulp. What is Gulp and how to use it you can learn here. But all what the template requires from you is to run the following command in your console:

npm install --global gulp-cli

The next step is to install Bower. Bower - it is a package manager. Learn more about Bower here. To install it run in your console:

npm install -g bower

Be informed that Bower requires node, npm and git.

Now you need all modules and packages to be intalled. It requires 2 simple steps.

The first. Go to the root folder where package.json files is located and run in console:

npm install

The second. Run in console:

bower install

That is all. Your computer is ready to work with the template.

All jade files of the template has the similar base. Here is how it looks:

doctype
html
  head
    <!-- Mobile menu start -->
    include inc/head.jade
    <!-- Mobile menu end -->
    title Williams Business Template
    link(rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,700")
    <!-- build:css css/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css css/style.css -->
    link(rel="stylesheet" href="css/style.css")
    <!-- endbuild -->
  body
    <!-- Preload start -->
    #williams-preload
      .w-preload-inner
        #w-preload-1.w-preload-item
        #w-preload-2.w-preload-item
        #w-preload-3.w-preload-item
        #w-preload-4.w-preload-item
        #w-preload-5.w-preload-item
        #w-preload-6.w-preload-item
        #w-preload-7.w-preload-item
        #w-preload-8.w-preload-item
    <!-- Preload end -->
    #williams-wrapper
      <!-- Mobile menu start -->
      include inc/mobile-menu.jade
      <!-- Mobile menu end -->
      <!-- Header start -->
      include inc/header.jade
      <!-- Header end -->
      <!-- Page title start -->
      include inc/page-title/page-title-name.jade
      <!-- Page title -->

      ...some content goes here

      <!-- Footer start -->
      include inc/footer.jade
      <!-- Footer end -->
    <!-- build:js js/vendor.js -->
    <!-- bower:js -->
    <!-- endbower -->
    <!-- endbuild -->
    include inc/scripts.jade

You should take your attention to the include directives. It includes files with code that is on all pages of the template. You can edit one of these files and changes will apprear on all pages automaticly.

In some files you can find things like this one:

var posts = [ {title:'Ten Reasons Why People Like Consulting',date:'01 Aug, 2017',author:'Williams Consulting',category:'news and events',comments:'2 comments',excerpt:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus dictum erat, lacinia maximus turpis aliquam eget. Aliquam venenatis blandit eleifend. Duis justo mauris, aliquet vitae orci id, egestas rhoncus metus. Ut purus lacus, facilisis vel vehicula ac, semper viverra odio.',image:'images/900x600.png'},{title:'Top Five Trends In Consulting To Watch',date:'07 Aug, 2017',author:'Williams Consulting',category:'news and events',comments:'5 comments',excerpt:'Donec eu turpis eu nisl egestas elementum. Nunc enim leo, facilisis ut tincidunt dignissim, ullamcorper eu mi. Suspendisse eu eleifend dui, non lacinia felis. Cras hendrerit suscipit quam, ut placerat felis volutpat nec. Vivamus non luctus turpis. Mauris gravida urna ex, id auctor purus vehicula a. Sed eu justo tristique, luctus magna id, viverra erat. Duis bibendum tellus purus, vitae auctor ex dignissim et.',image:'images/900x600.png'},{title:'Here\'s Why You Should Attend Consulting',date:'12 Aug, 2017',author:'Williams Consulting',category:'news and events',comments:'Be the first to comment',excerpt:'Maecenas eu viverra ante. Quisque cursus sollicitudin tortor, et sodales quam gravida ut. Curabitur sagittis, arcu aliquet ornare viverra, nunc nulla consequat enim, vitae dapibus felis ante et sem. Cras aliquet elit vel dolor mollis, at lacinia urna blandit. Sed consequat dolor tristique mattis hendrerit. Vestibulum pharetra fermentum ullamcorper. Donec efficitur ultrices ipsum eget consequat. ',image:'images/900x600.png'},{title:'Seven Consulting Trends You Should Know Before Even Starting Your Business',date:'15 Aug, 2017',author:'Williams Consulting',category:'news and events',comments:'7 comments so far',excerpt:'Duis nisi dolor, ornare ac eleifend at, tempus vel metus. Fusce in orci et velit sollicitudin auctor. Vestibulum at facilisis neque, et placerat felis. Morbi enim magna, dapibus a pulvinar id, rhoncus id eros. Phasellus dignissim non eros vel pulvinar. Curabitur ac ipsum id lorem accumsan porta. In mattis convallis turpis, quis finibus neque aliquet ac. Cras finibus rutrum tincidunt.',image:'images/900x600.png'}];

This is a list of items to display. In general after that code follows something like this:

mixin postOutput(post)
  article.post
    .post-thumbnail: figure
      img(src=post.image alt=post.title)
      .hover
        a.w-btn.primary(href="#"): i.fa.fa-link
        a.w-btn.primary.w-popup-image(href=post.image title=post.title): i.fa.fa-expand
      ul.meta
        li.meta-date: a(href="")=post.date
        li.meta-author: a(href="")=post.author
        li.meta-category: a(href="")=post.category
        li.meta-comments: a(href="")=post.comments
      h4.title: a(href="#")=post.title
      p=post.excerpt
      p: a.w-btn.third(href="#") Read more...

This is a template which used to display the data list above. It is a good way to prevent unnecessery code editing in many places. You just define data and define the output template for that data.

To out put this data template the next construction used:

for item in posts
  +postOutput(item)

So if you need to change the output you should make a change in only on place (in the mixin). Pretty simple.

Here is a list of less variables you can change to customize the template.

So there are many variables to work with to get pretty unique product. You need just to paste your new values and save. Pretty simple.