Overview

A bold and stylish design that will add something special to any project, Boss is a multi-purpose solution that boasts a spacious layout displaying your content in a clear and concise manner.

  • Responsive Layout
  • Isotope Filterable Portfolio
  • 17 Page Templates
  • Animate On Scroll
  • Unique Bootstrap Component Styling
  • Thumbs Gallery
  • Detailed HTML Commenting
  • LESS CSS Files

Folder Structure

Folder/File Description
/assets/css Contains all the CSS files for your template
/assets/css/animate.css CSS animations - http://daneden.github.io/animate.css/
/assets/css/bootstrap.css Bootstrap front-end framework - http://getbootstrap.com
/assets/css/fontawesome.css Font Awesome - Scalable vector fonts - http://fortawesome.github.io/Font-Awesome/
/assets/css/nexus.css Main template stylesheet
/assets/css/responsive.css Responsive template stylesheet
/assets/fonts Template fonts
/assets/fonts/*.svg Font files for legacy iOS
/assets/fonts/*.woff Font files for modern browsers
/assets/fonts/*.eot Font files for Internet Explorer
/assets/fonts/*.ttf Font files for Safari, Android, iOS
/assets/img Template images
/assets/js/bootstrap.min.js Minified jQuery Javascript library
/assets/js/jquery.isotope.js Isotope JS - Filter and sort layouts - used in portfolio
/assets/js/jquery.min.js Minified jQuery Javascript library
/assets/js/jquery.slicknav.js Responsive mobile menu plugin - http://slicknav.com/
/assets/js/jquery.stellar.js Parallax background script - http://markdalgleish.com/projects/stellar.js/
/assets/js/jquery.sticky.js Sticky Div - used for header area of your template
/assets/js/modernizr.custom.js Modernizr JavaScript library - http://modernizr.com/
/assets/js/scripts.js Template Javascript adjustment and activation
/assets/less Template LESS files
/assets/less/bootstap Bootstrap LESS files
/assets/less/font-awesome Font Awesome LESS files
/assets/less/variables.less Template and Bootstrap LESS variables
/*.html Template pages

HTML Structure

To better understand the structure of your template we have clearly commented all HTML. You will find each pages to be commented in to 3 main sections, header, footer and content. For most of your page you will find both the header section and the footer section to remain the same.

Header Section

<!-- === BEGIN HEADER === -->
...
<!-- === END HEADER === -->

This sections starts from the very beginning of each page and includes all content common to each of your pages. The header section will include the following..

  • DOCTYPE declaration
  • Opening <html> tag
  • Entire <head> of your HTML document
  • Opening <body> tag
  • Header area of your template common to each of your pages inc.
    • Top social icons
    • Logo and slogan
    • Main menu

Content Section

The content section contain your main content for each of your pages and will be where the bulk of your changes will be made.

<!-- === BEGIN CONTENT === -->
...
<!-- === END CONTENT === -->

Footer Section

The footer section contains the end of your HTML document. Similar to the header section, this section will most likely remain the same across all your pages, containing all the common elements in the foooter right down to the closing </html>.

<!-- === BEGIN FOOTER === -->
...
<!-- === END FOOTER === -->

The footer section will contain the following:

  • Footer content boxes (Contact info, disclaimer etc.)
  • Footer Menu
  • Closing </body> and </html>

CSS Structure

The following CSS files are loaded with your template in this order:

bootstrap.css

CSS for Bootsrap front-end framework

animate.css

Animations stylesheet used for on scroll animations

font-awesome.min.css

Scalable vector icons for Bootstrap.

nexus.css

The main template stylesheet. This is where you will find the bulk of your template CSS.

responsive.css

Stylesheet for responsive layout. All CSS in this file is placed within media queries applied to particular devices and screen sizes.

custom.css

Any custom CSS you wish to apply to your template can be added to this CSS files. This is the last CSS file to be loaded.

Utility Classes

A utility class is a class that defines a set of methods that perform common, often re-used functions. Your template includes a number of helpful utility classes to help style your content.

The following shows how you can use a utilty class with a H2 heading. In this example we will be adding 40px bottom padding to the heading.

<h2 class="padding-bottom-40">
    A Sample Heading
</h2>

Color Classes

Class Color
color-default
color-primary
color-red
color-blue
color-green
Class Color
color-aqua
color-yellow
color-brown
color-violet
color-orange

Background Color Classes

Class Color
background-white
background-black
background-dark
background-gray
Class Color
background-gray-dark
background-gray-darker
background-gray-light
background-gray-lighter

Padding & Margin Classes

Class
padding-top-0
padding-top-5
padding-top-10
padding-top-15
padding-top-20
padding-top-30
padding-top-40
padding-top-60
padding-bottom-0
padding-bottom-5
padding-bottom-10
padding-bottom-15
padding-bottom-20
padding-bottom-30
padding-bottom-40
padding-bottom-60
padding-horiz-10
padding-horiz-20
padding-horiz-30
padding-horiz-40
padding-horiz-60
padding-vert-10
padding-vert-20
padding-vert-30
padding-vert-40
padding-vert-60
Class
margin-top-0
margin-top-5
margin-top-10
margin-top-15
margin-top-20
margin-top-30
margin-top-40
margin-top-60
margin-bottom-0
margin-bottom-5
margin-bottom-10
margin-bottom-15
margin-bottom-20
margin-bottom-30
margin-bottom-40
margin-bottom-60
margin-horiz-10
margin-horiz-20
margin-horiz-30
margin-horiz-40
margin-horiz-60
margin-vert-10
margin-vert-20
margin-vert-30
margin-vert-40
margin-vert-60

Demo Images

All images used on the demo of this template are available free to download from the excellent http://unsplash.com/

Changelog

  1. Version 1.0 - November 1st 2014

End of Documentation

Thank you for purchasing and we hope you enjoy your template!