Template documentation

1. Layout

This template has a Responsive layout with one or two columns (varies for different sections). It's based on Bootstrap 3.3 and it's markup is structured according to bootstrap best practices. This template has 4 different layout modes - large (for 1170px and wider screens), normal (for 970px or wider screens), tablet ( for screens smaller than 970px ) and mobile (for screens smaller than 768px). Adjust your browser window size to explore them closer. Magellan uses lots of HTML5 and CSS3 features, so it will NOT support legacy browsers such as Internet Explorer 6, 7, 8 & 9.

2. HTML files

The following HTML files are included

  • magellan-blog-1.html
  • magellan-blog-2.html
  • magellan-blog-3.html
  • magellan-homepage.html
  • magellan-post-medium.html
  • magellan-post-small.html
  • magellan-post-featured.html
  • magellan-post-no-image.html
  • magellan-post-video.html
  • magellan-search-results.html
  • magellan-contact-form.html
  • magellan-photo-galleries.html
  • magellan-photo-gallery.html
  • magellan-404.html

3. LESS & CSS files

Magellan stylesheets are created using LESS technology. LESS files are located in /less/ folder. After editing any of the LESS files you have to compile magellan.less in one CSS file - magellan.css. This LESS file includes all the other files, so the resulting CSS file will also contain everything.

The main LESS file is magellan.less. All the color variables are defined in magellan-variables.less. Each of the responsive sizes has it's own stylesheet - magellan-medium.less for laptops, magellan-small.less for tablets and magellan-extra-small.less for smartphones.

There are some additional LESS files for specific sections or purposes - magellan-forms.less, magellan-iefix.less, magellan-overrides.less, planetshine-megamenu.less and planetshine-megamenu-extrasmall.less.

4. Javascript files

All the Javascript files are located in /js/ folder. This template uses jQuery Javascript library and many plugins and custom built scripts. All the template specific behaviour is written in /magellan.js. Code that handles behaviour of the mega menu is located in /js/planetshine-mega-menu.js.

It is comparatively easy to find what you need to edit in magellan.js. Just open the file and look for init function. It initialises all other functions which you can recognise by the name.

A number of additional third party JS files (mainly jquery libraries) are included that provide additional functionality for template.

5. PSD files

The following Photoshop PSD files are included

  • magellan-404-1.psd
  • magellan-blog-1.psd
  • magellan-contact-form-1.psd
  • magellan-homepage-1-news.psd
  • magellan-photo-galleries-1.psd
  • magellan-photo-gallery-1.psd
  • magellan-post-featured-1.psd

6. Image licensing notification

The images included with this template are there for testing purposes only, they are the property of their respective owners. Planetshine has acquired rights for their use in this template and the rights do not get transferred along with the purchase of template. Images may not be used by in any products created from this template.

Thank you so much for purchasing this template!