Raleway Documentation

Thank you for purchasing. If you have any questions that are beyond the scope of this help file email me at [email protected]

× Remember! The features / plugins are explained on the LIVE corresponding features pages. And also the githubs/websites are linked below.

General Markup

The general template structure is the same throughout the template. Simply remove the CSS files you do not need (colors and full or boxed width) and customize the page accordingly.

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta Info -->
  <!-- Apple Touch Icons -->
  <!-- Title -->
  <!-- CSS Files -->
</head>
<body>
  <!-- Royal Preloader -->
  <!-- Style Switcher -->
  <!-- Boxed / Full Width Wrappers -->
    <!-- Header (top bar, navigation, and breadcrumbs) -->
    <!-- Content Sections -->
    <!-- Footer -->
  <!-- End Boxed / Full Width Wrappers -->
  <!-- JS Files -->
</body>
</html>

Carousel Item Structure

The home page carousel structure is pretty basic, there is an div commented with Item BG where you will set your background. That same div is used for the parallax on that carousel item data-0="background-position:0px 0px;" data-500="background-position:0px -250px;" we are using skrollr.js for this.

We are also using animate.css to animate slides: class="fadeInRight-animated" data-animation="fadeInRight" read more about the animations here.

<!-- Begin Item 1 -->
<div class="item active">
  <!-- Item BG -->
  <div class="background-main" style="background-image:url('images/backgrounds/bg1.png');" data-0="background-position:0px 0px;" data-500="background-position:0px -250px;">
    <div class="container">
      <div class="row carousel-content center-vertically-right">
        <!-- Content -->
        <div class="fadeInRight-animated" data-animation="fadeInRight">
          <div class="carousel-description col-sm-5">
            Content
          </div>
        </div>
      </div><!-- /content container -->
    </div><!-- /container -->
  </div><!-- /bg div -->
</div><!-- /item -->
<!-- End Item 1 -->

Navigation Dropdowns

The navigation has steep dropdown ability, see the structure here of a dropdown inside the navbar here:

<li class="dropdown active">
  <a href="index.html" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="300" data-close-others="true">Link<span class="fa fa-angle-down dropdown-arrow"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Sub Link</a></li>
    <li class="dropdown-submenu">
      <a class="trigger">Sub Link w Sub Link</a>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Sub Link</a></li>
      </ul>
    </li>
  </ul>
</li>

Stylesheets

Here's a list of the stylesheet files I'm using with this template. Not listed here are the colors CSS files and the full/boxed width CSS files. You can find more information opening each file or visiting the links:

File Name	Description
`bootstrap.min.css`	Bootstrap main CSS file.
`style.css`	Main theme CSS file.
`bootstrap-social.css`	Bootstrap social buttons CSS file. Docs - Features Page
`animate.min.css`	Animate.css animation plugin file. Docs - Features Page
`owl.carousel.css`	Owl carousel main CSS file. Docs
`jquery.snippet.css`	Syntax highlighter CSS file. Docs
`buttons.css`	Buttons library CSS file. Docs - Features Page
`style-switcher.css`	Style switcher CSS file.
`ionicons.min.css`	Ionicons icon fonts CSS file Docs - Features Page
`font-awesome.css`	Fontawesome icon fonts CSS file Docs - Features Page
`royal_preloader.css`	Preloader CSS file.

CSS Structure

Style.css contains all of the specific stylings for the template, the table of contents is listed to the right. If you are editing styles 99% of changes will be done here.

/* =Table of Contents
--------------------------------------------------------------
  =Common Styles
  =Typography
  =Buttons
  =Alerts
  =Icon Fonts
  =Navigation
  =Sidebar Navigation
  =Forms
  =Zoom Fade
  =Carousel
  =Quote Carousel
  =Team Carousel
  =Owl Carousel
  =Heading
  =Header 1 + 2
  =Header Parallax
  =Panels
  =Tabs
  =Pricing Tables
  =Call to Action
  =Accordion
  =Content Section
  =Parallax Content
  =Timeline
  =Thumbnails
  =Shadows
  =Dividers
  =Modals
  =Labels and Badges
  =Progress Bars
  =Content Sections
  =Team
  =Recent Posts
  =Clients
  =404
  =Top Bar
  =Portfolio
  =Comments
  =Blog
  =Portfolio
  =Footer
  =Media Queries
*/

/* =Section
-------------------------------------------------------------- */

/* =Section
-------------------------------------------------------------- */

JavaScript Files

These are the JS files used in this theme, follow links inside of credits sections for the docs.

Tag	Description
`jquery.min.js`	jQuery is a Javascript library, version 2.1.3 is used in this theme.
`bootstrap.min.js`	The bootstrap main JS file.
`jquery.easing.min.js`	Required script for the theme.
`jquery.mixitup.min.js`	JS used for portfolio sorting and transitions.
`scrollReveal.js`	Script used to activate animations when in viewport.
`owl.carousel.min.js`	A carousel plugin used in the theme.
`jquery.magnific-popup.min.js`	Lightbox script used to open imgs + video on any link.
`jquery.snippet.min.js`	Syntax JS plugin.
`jquery.fitvids.js`	JS script for responsive video.
`style-switcher.js`	JS script for the style switcher.
`activate-snippet.js`	Activates syntax plugin.
`skrollr.min.js`	Very flexible JS plugin used for parallax + more.
`royal_preloader.min.js`	The preloader plugin.
`main.js`	Theme JS file.

Magnific Popup Lightbox

This is the js activating our image zoom, simply add class image-zoom-link to your a tag and the link to your image as the href. It works the same way for videos and maps as well.

// image zoom
$(document).ready(function() {
    $('.image-zoom-link').magnificPopup({
        type: 'image',
        mainClass: 'mfp-fade',
        fixedContentPos: false
    });
});

// video zoom links
$(document).ready(function() {
    $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: false
    });
});

Mixitup.js portfolio code

This is the js activating our portfolio sorting.

// run mixitup portfolio
$(function() {
    $('#myPortfolio').mixitup({
        targetSelector: '.item',
        transitionSpeed: 600
    });
});

Skrollr.js code

This is the js activating skrollr.js used for parallax (disabled on mobile) and many other features, check out the github in the credits for more info.

//activate skrollr.js
$(function() {
    if ($(window).width() > 1024) {
        skrollr.init({
            forceHeight: false,
            smoothScrolling: true,
            smoothScrollingDuration: 1500
        });
    }
});

× Notice: The remaining JS inside main.js is required for full functionality but does not need any customization. Everything in this theme works out the box.

I've used the following images, icons or other files as listed.

JavaScript

jquery.min.js — jQuery is a Javascript library, version 2.1.3 is used in this theme.
bootstrap.min.js — The bootstrap main JS file.
jquery.easing.min.js — Required script for the theme.
jquery.mixitup.min.js — JS used for portfolio sorting and transitions.
scrollReveal.js — Script used to activate animations when in viewport.
owl.carousel.min.js — A carousel plugin used in the theme.
jquery.magnific-popup.min.js — Lightbox script used to open imgs + video on any link.
jquery.snippet.min.js — Syntax JS plugin.
jquery.fitvids.js — JS script for responsive video.
skrollr.min.js — Very flexible JS plugin used for parallax + more.

CSS

bootstrap-social.css — Bootstrap social buttons CSS file.
animate.min.css — Animate.css animation plugin file.
owl.carousel.css — Owl carousel main CSS file.
jquery.snippet.css — Syntax highlighter CSS file.
buttons.css — Buttons library CSS file.
ionicons.min.css — Ionicons icon fonts CSS file
font-awesome.css — Fontawesome icon fonts CSS file.

Images

Shutterstock — Images used in this template.
Pierre Borodin — Images used in this template.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on Wrapbootstrap or any of the plugins used, you might consider visiting the Stackoverflow or the Github page of the plugin and asking your question.

Raleway - HTML5 Template

Markup Markup customization and highlights