site menu

our industries

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.

know more

  • Automotive
  • Chemicals
  • Energy & Utilities
  • Healthcare
  • Manufacturing
  • Telecommunications
  • 07 Aug, 2017
  • Lenny L. Garner

The Truth About Automotive Is About To Be Revealed

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet nulla a felis condimentum, in elementum nisi finibus.

Read more...

  • 03 Oct, 2017
  • Jermaine A. Bell

10 Great Tips To Earn More In The Automotive Industry

Suspendisse a tellus nisl. Etiam enim nibh, maximus nec justo nec, sagittis facilisis leo. Proin quis tincidunt diam. Integer sit amet ullamcorper orci.

Read more...

  • 12 Oct, 2017
  • Norma T. King

Five Moments That Basically Sum Up Your Automotive Experience

Nulla sed vulputate dolor, non ultrices nunc. Sed nunc metus, eleifend eu suscipit ut, viverra ut tellus. Integer ut felis non nulla volutpat posuere.

Read more...

  • 04 Aug, 2017
  • Ramona T. Gerena

15 Reasons Why You Shouldn't Rely On Chemicals Anymore

Integer sodales nunc in tortor hendrerit suscipit. Pellentesque semper leo non ipsum pharetra, ut fringilla sapien tincidunt.

Read more...

  • 01 Oct, 2017
  • Anthony C. Perez

7 Chemicals Tips You Need To Learn Now

Nunc ut diam vestibulum, ullamcorper eros in, placerat ex. Aliquam eu libero lacinia, ultricies sem pulvinar, laoreet enim. Aliquam eget feugiat enim, eu aliquam lorem.

Read more...

  • 17 Oct, 2017
  • Tammy J. Esparza

What Causes The Emerging Trend Of Chemicals Industry In Asia?

Maecenas porttitor est justo, id vulputate orci ullamcorper ac. Cras venenatis eleifend magna. Etiam iaculis nisl justo, nec maximus tellus accumsan in.

Read more...

  • 11 Aug, 2017
  • Roger S. Santos

10 Secrets About Energy & Utilities That Nobody Will Tell You

Ut pretium odio ut turpis fermentum congue. Etiam molestie ultrices turpis sed lacinia. Aliquam fermentum porta sem, a gravida est facilisis non.

Read more...

  • 08 Oct, 2017
  • Andre B. McVey

Seven Reasons Why People Like Energy & Utilities

Mauris sit amet dictum quam. Phasellus fermentum pretium ante non congue. Nulla facilisi. Nam blandit eleifend tortor ut dictum.

Read more...

  • 20 Oct, 2017
  • Nicole W. Ross

15 Small But Important Things To Observe In Energy & Utilities

Vivamus pretium, odio et tincidunt sagittis, tellus elit tempus mi, at dapibus tellus tellus nec libero. Curabitur consectetur id enim sit amet varius.

Read more...

  • 01 Aug, 2017
  • Jean F. Fogle

All You Need To Know About Healthcare

Aliquam erat volutpat. Vivamus malesuada, eros eget posuere cursus, ipsum nibh mollis sapien, eget porttitor ante nunc sit amet metus.

Read more...

  • 06 Oct, 2017
  • Curtis A. Arsenault

This Year Will Be The Year of Healthcare

Nulla finibus diam sit amet velit vehicula auctor. Sed rutrum et libero vitae sollicitudin. Pellentesque non auctor enim.

Read more...

  • 14 Oct, 2017
  • Amy L. Bogle

10 Great Healthcare Ideas That You Can Share With Your Friends

Praesent id arcu nec massa condimentum efficitur. Mauris non velit sed tortor sodales rhoncus sed a lacus. In quis erat fringilla, lacinia justo ac, dictum dolor.

Read more...

  • 17 Aug, 2017
  • Geneva K. Wilson

Five Ways Manufacturing Can Improve Your Business

Maecenas blandit nunc ut arcu venenatis, quis lacinia sapien feugiat. Donec fringilla ipsum vitae faucibus elementum.

Read more...

  • 24 Oct, 2017
  • Lisa A. Bohanon

Understanding The Background Of Manufacturing Industry

Maecenas facilisis magna nisi, fringilla sollicitudin erat pulvinar a. Aenean efficitur mauris ut ex blandit, non dictum lorem vulputate.

Read more...

  • 24 Oct, 2017
  • Ronald C. Underwood

Seven Facts You Never Knew About Manufacturing

Vivamus venenatis interdum tellus, vel consequat nunc molestie id. Nunc consectetur massa in erat fermentum, eu placerat libero viverra.

Read more...

  • 24 Aug, 2017
  • Judith W. Johns

15 Telecom Trends You Should Know Before Even Starting Your Business

Proin tempus justo et enim lacinia lobortis. Aliquam urna mi, dictum nec lorem a, fringilla tempor nibh. Phasellus nec auctor magna.

Read more...

  • 11 Oct, 2017
  • Denice D. Sheffield

Now Is The Time For You To Know The Truth About Telecom

Morbi ac pretium justo, vel vestibulum ante. Cras rhoncus vestibulum sem auctor feugiat. Praesent varius ante sem, vel dictum mauris blandit a.

Read more...

  • 30 Oct, 2017
  • Ruby C. Hudson

Five Useful Tips From Experts In Telecom

Nullam tristique est diam, ac efficitur urna interdum nec. Nulla pulvinar non justo et cursus.

Read more...

you ask we answer

FAQ

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

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:

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.

Mixins

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/blog/1.jpg'},{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/blog/2.jpg'},{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/blog/3.jpg'},{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/blog/4.jpg'}];

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.

LESS

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 #141C27 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.

Credits

Font:

Poppins (free at Google Fonts).

Used plugins:

ShutterStock images:

Still have any questions?