Ana Menü

Çözüm Odaklı Kaliteli Hizmet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus nisl, consectetur posuere tellus id, semper congue mi. In elementum nisi ut ligula aliquam, at varius tellus pharetra.


you ask we answer


learn more about us

frequetly asked questions

Below you’ll find some of our most commonly asked questions and answers that will explain more about Williams HTML Template. If you have a question that is not listed, please feel free to contact us at our profile page.

  • get started
  • Jade
  • LESS
  • Contact Forms
  • Development & Deploy
  • Credits

get started

For the first thanks for you interesting in Williams HTML Template. The multipurpose html template for quick starting any new project.

What is inside?

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.

How to use this template?

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.

What environment should I have?

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.

Done. What is next?

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.


Jade is an elegant templating language focused on enabling quick HTML coding. No more XML situps and percent prefixes for tags. It is HTML templating how it should be. Learn more about Jade here.

Ok. Now we are ready to edit jade templates. All these jade files are in app/jade folder.

What is a file structure?

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

    <!-- Mobile menu start -->
    include inc/head.jade
    <!-- Mobile menu end -->
    title Williams Business Template
    link(rel="stylesheet" href=",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 -->
    <!-- Preload start -->
    <!-- Preload end -->
      <!-- 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)
    .post-thumbnail: figure
      img(src=post.image alt=post.title)
        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
        li.meta-date: a(href="")
        li.meta-author: a(href="")
        li.meta-category: a(href="")=post.category
        li.meta-comments: a(href="")=post.comments
      h4.title: a(href="#")=post.title
      p: a.w-btn.third(href="#")

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

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


Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable. Learn more about LESS here.

app/less folder is a main place customize comes from. Here is a structure of this folder:

  • components
  • page
  • utils
  • import.less
  • style.less
  • williams.less

app/less/components folder is a place where css rules for all template components (like widgets, header, menu, posts and others) are defined.

app/less/page folder contains some css rules for the components which are on the specific pages only.

app/less/utils folder contains some css rules for the child components which are on any pages.

app/less/import.less is a file with bootstrap less files importing (so there is no need to link bootstrap.css in the head).

app/less/style.less is the main file where all components are included.

app/less/williams.less is a default template settings.

So to customize the template you should change app/less/williams.less file and make sure to include it in app/less/import.less file.

What is in app/less/williams.less file?

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

Name Default value Description
@side-padding 100px Padding space for the content sections.
@side-md-padding 100px Padding space for the content sections for the middle devices.
@side-sm-padding @side-padding / 2 Padding space for the content sections for the small devices.
@side-xs-padding side-padding / 2 Padding space for the content sections for the extra small devices.
@body-bg #fff Body background color.
@brand-primary #f4ad21 Primary color for the template.
@brand-secondary #233d7f Secondary color for the template.
@brand-third #eee Third color for the template.
@body-font-family 'Poppins', sans-serif Body font family.
@body-text-color #333 Body text color.
@body-font-size 14px Body font size.
@line-height 1.71 Base line height.
@a-regular @body-text-color <a>; text color.
@a-hover darken(@brand-primary, 10%) <a>; hover text color.
@a-active lighten(@brand-primary, 10%) <a>; active text color.
@a-regular-text-decoration underline <a>; regular text decoration.
@a-hover-text-decoration none <a>; hover text decoration.
@a-active-text-decoration .4s CSS transitions duration.
@transition-duration 100px Padding space for the content sections.
@transition-timing-function ease CSS transitions timing function.
@heading-font-family @body-font-family Font family for the h1 ... h6 elements.
@heading-font-weight 700 Font weight for the h1 ... h6 elements.
@heading-text-color @body-text-color Text color for the h1 ... h6 elements.
@heading-text-transform capitalize Text transform for the h1 ... h6 elements.
@leading 30px Layout leading.
@grid-gutter-width @leading * 2 Grid gutter width.
@header-main-bar-height 100px Height of the header main bar which contains logo, menu and contacts.
@header-main-bar-bg-color #fff Header main bar background color.
@header-menu-a-color @body-text-color Header main bar menu <a>; regular text color.
@header-menu-a-hover @brand-primary Header main bar menu <a>; hover text color.
@header-menu-a-text-transform uppercase Header main bar menu <a>; text transform.
@header-menu-a-font-weight 700 Header main bar menu <a>; font weight.
@header-menu-a-text-decoration none Header main bar <a>; text decoration.
@header-menu-a-hover-text-decoration none Header main bar <a>; hover text transform.
@logo-padding-top @leading Logo top padding.
@logo-padding-right @leading Logo right padding.
@logo-padding-bottom @leading Logo bottom padding.
@logo-padding-left @leading Logo left padding.
@logo-max-height 50px Logo max height.
@w-mega-bg-color @brand-third Background color for mega menus.
@w-mega-a-regular @body-text-color Mega menu <a>; regular text color.
@footer-bg-color @brand-secondary Footer background color.
@footer-text-color #999 Footer text color.
@footer-a-regular #fff Footer <a>; regular text color.
@footer-a-hover @a-hover Footer <a>; hover text color.
@footer-a-active @a-active Footer <a>; active text color.
@footer-heading-color #fff Text color for the footer h1 ... h6 elements.
@btn-text-transform uppercase Buttons text transform.
@btn-font-weight 700 Buttons font weight.
@dropdown-bg-color @brand-third Dropodown menu background color.
@dropdown-width 200px Dropdown menu width.

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.

Contact Forms

This template includes ability to send emails through the html forms in the footer and on the contacts page. Some settings you can find in app/email.php file. But it is a quite simple mechanism. So be sure your customers send correct information.

Development & Deploy

While you are in development mode you can use some great Gulp features. There are some tasks in gulpfile.js which you can use. Here some commands you can run in the root folder with console:

  • gulp
  • gulp connect
  • gulp bower
  • gulp less
  • gulp build

gulp runs the default task. It includes starting web server, compiling jade and less files and automatic refreshing the page in your web browser.

gulp connect just runs the web servcer.

gulp bower compiling jade and less files.

gulp less compiling less files only.

gulp build creates a publish-ready project. It compiles and copies all necessary files (css and js files, images and fonts folders) from app folder into dist folder.

So the general way of development process looks like this: you make changes in jade and less files, when you are done you run gulp bower command and get some results (html files in app folder). You look forward and repeat these steps while you get all you want. At the end you run gulp build and get size-optimized and high-speed html template in dist folder ready to be published on your web server.



Poppins (free at Google Fonts).

Used plugins:

ShutterStock images:

Still have any questions?