Index

Name
Realtyspace - Responsive Real Estate Template
Created by
codefactory47
Support
support@codefactory47.com

Thank you for purchasing Realtyspace - Responsive Real Estate Template. If you have questions that are beyound the scope of this help file, please feel free to email us at support@codefactory47.com

Table of contents

Getting started

About

Realtyspace is a fully functional HTML5 template designed and developed for Real Estate agents and agencies.

It is 100% responsive template based on Twitter Bootstrap 3.0 framework that works well on all screen sizes from the bigger ones to smartphones.

The theme is based on Bootstrap 3 framework.

Structure

  • template/ - is recommended quick & easy way to start using Realtyspace theme, no setup needed, more details here.
  • template-src/ - contains source Jade templates, SASS stylesheets and JS modules from which you can build the template yourself. If these abbreviations are unknown to you, just ignore this folder and use this instead. More details here.
  • docs/ - Documentation

Source version

The source version is located in the template-src/ directory and is intended for people that are proficient with tools like SASS, Jade, NPM, etc.

Structure

  • template-src/gulpfile.js/ - Build system, that compiles all jade, sass, js modules into ready to use, standalone html, css and js files
  • template-src/src/jade/ - Template files from which final HTML templates are built
  • template-src/src/assets/js/ - JS modules from which final js files in js/ are built
  • template-src/src/assets/sass/ - SASS files from which final css files in css/ are built
  • template-src/src/assets/img/ - Images that are used in the theme
  • template-src/src/assets/media-demo/ - Demonstration images licensed under Creative Commons, please replace them with your own assets.
  • template-src/bower.js - Bower package manager configuration
  • template-src/package.json - NPM package manager configuration

Setup

Requirements for running the builds:

Please follow the links above in order to get installation instructions for each application. Once you have installed the required applications, open a console and navigate to your/path/to/template-src

Run the following command to install the gulp build system:

npm install -g gulp

Install packages listed in template-src/packages.json (npm will load automatically this file and read its list of required modules):

npm install

Available commands

gulp build:dev - developer mode

To run the build in developer mode, navigate to your/path/to/template-src and run:

gulp build:dev

and access the dev-server on http://localhost:4000

When to use

During development in order to preview the changes made in src directory.

Features and differences:
  • The changes in sass files, jade files, etc. are automatically detected and the page is refreshed.
  • Sourcemaps are attached to js and css in order to simplify debugging.
  • The build process is tuned to skip some time-consuming tasks (like building stylesheets for all color schemes).

gulp build:release - release mode

To run the build in release mode, run:

gulp build:release

After executing this command, the build will be located in template-build/ directory.

When to use

After you’ve finished editing the source files and you’d like to receive the compiled, compressed and minified version of the theme. The resulting files are similar to the ones that you’ve got in template/ directory and are located in template-build/ folder.

Features and differences:
  • The css and js files are compressed and can be found next to non-compressed files in js/ and css/ directories.
  • Unlike running the build in dev-mode, the non-default color schemes are also generated.

gulp server - production server

To start production server, run:

gulp server
When to use

After you’ve run gulp build:release and you’d like to view the resulting template.

CSS

About

All css files that you will need are located in template/css folder

vendor.css
Styles from Bootstrap and other plugins
font-awesome.css
Styles for Font-Awesome
theme-default.css
Styles for Realtyspace default color theme
theme-*.css
Styles for other Realtyspace color themes
custom.css
Empty file, you can add here your custom styles

Tip

We are using BEM methodology for theme development. It promotes a specific naming convention, style reuse and clean, bloat-free code. If you’d like to follow this methodology, please consult this list of tutorials.

Normally you should connect the following files in your html template:

<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600,700,400italic,700italic&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/vendor.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/theme-default.css">
<link rel="stylesheet" href="css/style.css">

Note

The theme css code is split into vendor.css and theme-default.css for compatility reasons, because IE9 has 4095 rule limit per one stylesheet.

How do I...

...change color scheme?

Just replace the stylesheet

<link rel="stylesheet" href="css/theme-default.css" id="link-styles">

with

<link rel="stylesheet" href="css/theme-pink_yellow.css" id="link-styles">

to use pink_yellow color scheme.

JavaScript

About

All js files that you will need are located in template/js folder

vendor.js
contains vendor libraries (Bootstrap3, Jquery, Chosen, etc) already compiled into a single file, with versions that are verified to work with our theme. Normally, you should not edit that file.
app.js
JavaScript library code that Realtyspace theme relies on, in order to function properly. Normally, you should not edit this file or add your own code there. This file exposes a very simple API that you can use in your own code.
demodata.js
This file is used for demonstration purposes and contains example property items, that are mostly used to render markers on the map. You can safely delete this file, after you’ve adapted the demo.js code to use your own data.
demo.js
the main file, that you should modify (or create another one). It contains lots of examples of plugin usage, with detailed comments about specific sections of the code. This is the file that runs most of the code defined in vendor.js and app.js, therefore you can easily make changes in this file, which will affect the way the theme works.

Here is the correct order to connect these JavaScript in your template:

<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=places&amp;sensor=false"></script>
<script type="text/javascript" src="js/vendor.js"></script>
<script type="text/javascript" src="js/demodata.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/demo.js"></script>

F.A.Q.

...Can i use create my own file intead of demo.js?

Totally! We’ve created this file so you can look at examples of module and plugin initialization. But if you know what you’re doing, you can remove the line

<script type="text/javascript" src="js/demo.js"></script>

from the template and connect instead your own file with the code that you need.

HTML structure

Realtyspace is a responsive theme with 2 column layout (1 column is also supported). This is a basic structure:

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1"><![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- Loading Source Sans Pro font that is used in this theme-->
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600,700,400italic,700italic&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css">
    <!-- Boostrap and other lib styles-->
    <link rel="stylesheet" href="assets/css/vendor.css">
    <!-- Font-awesome lib-->
    <link rel="stylesheet" href="assets/css/font-awesome.css">
    <!-- Theme styles, please replace "default" with other color scheme from the list available in template/css-->
    <link rel="stylesheet" href="assets/css/theme-default.css" id="link-styles">
    <!-- Your styles should go in this file-->
    <link rel="stylesheet" href="assets/css/custom.css">
    <link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
  </head>
  <body>
    <div class="box">
      <!-- BEGIN HEADER-->
      <header class="header"></header>
      <!-- END HEADER-->
      <!-- BEGIN NAVBAR-->
      <div id="header-nav-offset"></div>
      <nav id="header-nav" class="navbar-main"></nav>
      <!-- END NAVBAR-->

      <!-- YOUR CONTENT -->

      <!-- BEGIN FOOTER-->
      <footer class="footer"></footer>
      <!-- END FOOTER-->
    </div>
    <!-- BEGIN SCRIPTS and INCLUDES-->
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=places&amp;sensor=false"></script>
    <!--
    Contains vendor libraries (Bootstrap3, Jquery, Chosen, etc) already compiled into a single file, with
    versions that are verified to work with our theme. Normally, you should not edit that file.
    -->
    <script type="text/javascript" src="js/vendor.js"></script>
    <!--
    This file is used for demonstration purposes and contains example property items, that are mostly used to
    render markers on the map. You can safely delete this file, after you've adapted the demo.js code
    to use your own data.
    -->
    <script type="text/javascript" src="js/demodata.js"></script>
    <!--
    The library code that Realtyspace theme relies on, in order to function properly.
    Normally, you should not edit this file or add your own code there.
    -->
    <script type="text/javascript" src="js/app.js"></script>
    <!--
    the main file, that you should modify. It contains lots of examples of
    plugin usage, with detailed comments about specific sections of the code.
    -->
    <script type="text/javascript" src="js/demo.js"></script>
    <!-- END SCRIPTS and INCLUDES-->
  </body>
</html>

UI Elements

You can see working examples on this page.

Address

Source

Sass styles are in folder template_src/src/assets/sass/widgets/_address.sass

Jade source are in template_src/src/jade/partials/widgets/address.jade

Example

<!-- modificator 'address--footer' because this is a part of footer -->
<section class="address address--footer">
  <div class="address__header">
    <h3 class="address__title">Contact</h3>
    <h4 class="address__headline">Our office</h4>
  </div>
  <address class="address__main">
    <!-- put here any contact details, use tags 'span' or 'a', to have better styles -->
    <span>1950 New York, NY, Ave NW, California, DC 3000600, USA</span>
    <span>08 - 17 mon-fr</span>
    <a href="tel:+442240052225">+1 202 555 0135</a>
    <a href="tel:+442240052225">+1 202 555 0135</a>
    <span>Fax: +1 202 555 0135</span>
    <a href="mailto:hello@example.com">hello@example.com</a>
  </address>
</section>

Article

Source

Sass styles are in folder template_src/src/assets/sass/widgets/_article.sass

Jade sources are in template_src/src/jade/partials/widgets/article.jade

Js sources are in template_src/src/assets/js/module/ui/show-hide-btn.js

// widget show on mobile
var $widgetShow = $('.js-widget-show');

$widgetShow.on('click', function () {
    $(this).closest('.js-widget-block').addClass('opened');
});

Note

This is a common behavaior for many blocks, be careful when change it.

Variations

There are 6 variations of the article block

  • article--index wide grid articles

    _images/article--index.png

  • article--sidebar article item in sidebar

    _images/article--sidebar.png

  • article--list list of articles

    _images/article--list.png

  • article--details articles details

    _images/article--list-item.png

  • article--empty when no article

    _images/article--empty.png

  • article--footer in footer

    _images/article--footer.png

Example

<!-- BEGIN SECTION ARTICLE -->
<!-- class 'js-widget-block' and button 'js-widget-show' works together for showing this block on mobile devices -->
<section class="article js-widget-block article--index">
  <!-- Button is required on mobiles devices -->
  <button type="button" class="widget__show js-widget-show">Show articles</button>
  <div class="container">
    <div class="article__header">
      <h3 class="article__title">News/Blog</h3>
      <h4 class="article__headline">Insights, tips how-to guides on selling property and preparing your home or investment property for sale and working to maximise your sale price.</h4>
    </div>
    <!-- end of block .article__header-->
    <div class="article__list">

      <div class="article__item">
        <a href="blog_details.html" class="article__photo">
          <img src="assets/media-demo/news/news-1.jpg" alt="News title" class="article__photo-img">
          <time datetime="2005-09-01" class="article__time">SEP<strong>01</strong></time>
        </a>
        <div class="article__details">
          <a href="blog_details.html" class="article__item-title">You've been approved for a rental home. Now what?</a>
          <div class="article__intro">
            <p>If you bought a home in these four areas during the downturn, you�ll make a tidy profit if you want to sell today.</p>
          </div>
          <a href="blog_details.html" class="article__more">Read more</a>
        </div>
      </div>
      <!-- end of block .article__item-->
      <!-- no limit to news items -->
      <...>
      <!-- div 'loading' is usable when you mask block, and load through ajax more items -->
      <div class="loading"></div>
    </div>
    <!-- end of block .article__list-->
    <a href="blog.html" class="article__btn-more">More articles...</a>
  </div>
</section>
<!-- END SECTION ARTICLE -->

Auth

Source

Sass source are in template_src/src/assets/sass/block/_auth.sass

Jade source are in folder template_src/jade/partials/chunks/auth

JS source are in template_src/src/assets/js/module/ui/auth-btn.js

Variations

  • auth--login - register form

    _images/auth--login.png 
    <div class="dropdown-menu auth auth--login">
  <!-- BEGIN AUTH LOGIN-->
  <h5 class="auth__title">Login in your account</h5>
  <form action="#" class="auth__form js-login-form">
    <div class="auth__row form-group">
      <label for="login-username" class="auth__label control-label">Username</label>
      <input type="text" name="username" id="login-username" required data-parsley-trigger="keyup" data-parsley-minlength="6" data-parsley-validation-threshold="5" data-parsley-minlength-message="Login should be at least 6 chars" class="auth__in auth__in--text form-control">
    </div>
    <div class="auth__row auth__row--password form-group">
      <label for="login-password" class="auth__label control-label">Password</label>
      <input type="password" name="password" id="login-password" required class="auth__in auth__in--text form-control">
    </div>
    <div class="auth__row">
      <button type="button" class="auth__forgot js-user-restore">Forgot password ?</button>
      <button type="submit" class="auth__in auth__in--submit">Sign in</button><span class="auth__remember">
        <input id="remember_in" type="checkbox" class="in-checkbox">
        <label for="remember_in" class="in-label">Remember me</label></span>
    </div>
    <div class="auth__row"><span class="auth__links">Not a user yet?
        <button type="button" class="js-user-register">Get an account</button></span></div>
  </form>
  <!-- end of block .auth__form-->
  <!-- END AUTH LOGIN-->
</div>

  • auth--register - register form

    _images/auth--register.png 
    <div class="dropdown-menu auth auth--register">
  <!-- BEGIN AUTH REGISTER-->
  <h5 class="auth__title">Sign up a new account</h5>
  <form action="#" class="auth__form js-register-form">
    <div class="auth__coll form-group">
      <label for="register-name" class="auth__label control-label">First name</label>
      <input type="text" name="username" id="register-name" required class="auth__in auth__in--text form-control">
    </div>
    <div class="auth__coll auth__coll--right form-group">
      <label for="register-lastname" class="auth__label control-label">Last name</label>
      <input type="text" name="name" id="register-lastname" required class="auth__in auth__in--text form-control">
    </div>
    <div class="auth__coll auth__coll--email form-group">
      <label for="register-email" class="auth__label control-label">E-mail</label>
      <input type="email" name="email" id="register-email" required class="auth__in auth__in--text form-control">
    </div>
    <div class="auth__coll auth__coll--right form-group">
      <label for="register-password" class="auth__label control-label">Password</label>
      <input type="password" name="password" id="register-password" required class="auth__in auth__in--text form-control">
    </div>
    <div class="auth__row"><span class="auth__links">Back to
        <button type="button" class="js-user-login">Log In</button></span>
      <button type="submit" class="auth__in auth__in--submit">Sign up</button>
    </div>
  </form>
  <!-- end of block .auth__form-->
  <!-- END AUTH REGISTER-->

  • auth--restore - register form

    _images/auth--restore.png 
    <div class="dropdown-menu auth auth--restore">
    <!-- BEGIN AUTH RESTORE-->
    <h5 class="auth__title">Reset password</h5>
    <form action="#" class="auth__form js-restore-form">
      <div class="auth__row form-group">
        <label for="restore-email" class="auth__label control-label">Enter your User Name or Email</label>
        <input type="email" name="email" id="restore-email" required class="auth__in auth__in--text form-control">
      </div>
      <div class="auth__row">
        <button type="submit" class="auth__in auth__in--submit">Reset password</button>
      </div>
      <div class="auth__row"><span class="auth__links">Back to
          <button type="button" class="js-user-login">Log In</button>or
          <button type="button" class="js-user-register">Registration</button></span>
        <!-- end of block .auth__links-->
      </div>
    </form>
    <!-- end of block .auth__form-->
    <!-- END AUTH RESTORE-->
  </div>

  • auth--logged-in - register form

    _images/auth--loggedin.png 
    <div class="dropdown-menu auth auth--logged-in js-user-logged-in">
  <!-- BEGIN WORKER PROFILE-->
  <div class="worker worker--navbar">
    <div class="worker__item">
      <h3 class="worker__name">Jenniffer Hartnet</h3>
      <div class="worker__photo">
        <div class="worker__avatar">
          <svg>
            <use xlink:href="#icon-avatar"></use>
          </svg>
        </div>
        <button class="worker__avatar-upload">Upload your profile picture</button>
      </div>
      <nav class="worker__nav">
        <ul>
          <li><a href="my_listings.html">My listing</a></li>
          <li><a href="my_profile.html">My Profile</a></li>
          <li><a href="my_profile.html">Settings</a></li>
        </ul>
      </nav>
      <!-- end of block .worker__nav-->
    </div>
    <!-- end of block .worker__item-->
  </div>
  <!-- END WORKER PROFILE-->
</div>

  • auth--inline - inline form, remove class dropdown-menu , add class auth--inline

    _images/auth--inline.png 
    <div class="auth auth--login auth--inline">

Note

Pay attention to input’s attributes data-parsley-* this are rules for validation, see documentation Parsleyjs

Checkboxes and radioboxes

Source

Sass sources are in template_src/src/assets/sass/block/_checkbox.sass

Options

<!-- Checkbox -->
<!-- add class 'in-checkbox' for checkbox -->
<input id="option_1" type="checkbox" class="in-checkbox">
<!-- add class 'in-label' for label -->
<label for="option_1" class="in-label">Wireless Internet</label>
<!-- radiobox -->
<!-- add class 'in-radio' for radio -->
<input id="option_2" type="checkbox" class="in-radio">
<!-- add class 'in-label' for label -->
<label for="option_2" class="in-label">Wheelchair Accessible</label>

Note

Important to connect label and input with “for” and “id” attributes.

Faq

Overview

Expandable plugin, provided by bootstrap, more documentation and options look here

Source

Sass source are in template_src/src/assets/sass/layout/_faq.sass

Jade source are in folder template_src/jade/faq.jade

Example

<div id="accordion" role="tablist" aria-multiselectable="true" class="faq">
    <dl class="faq__item">
      <dt id="heading-0" role="tab" class="faq__title">
        <!-- heading questions -->
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse-0" aria-expanded="true" aria-controls="collapse-0" class="faq__expander collapsed">How do we determine how much we can afford to pay for a home?</a>
      </dt>
      <dd id="collapse-0" role="tabpanel" aria-labelledby="heading-0" class="faq__content collapse">
        <div class="faq__body">
          <!-- issue response -->
          <p>In order to determine how much you can afford, we need to understand debt to income ratios. First, we must determine what your gross annual income is and divide that income by 12. (12 months). Second, we must determine your long term debt. For example: home mortgage (principal &amp; interest), taxes &amp; insurance (T &amp; I), school loan, car loan, credit card debt, etc. and calculate the monthly payments. Third, the debt to income ratio is established by dividing the monthly debt by the monthly income. The debt to income ratio should, in most cases not exceed 35%.     Forth, if the debt to income ratio is 35% or less and your credit rating is decent, there is a good chance you will be able to get approved for a mortgage loan.</p>
        </div>
        <div class="faq__footer">
          <!-- close button -->
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse-0" aria-controls="collapse-0" class="faq__close">Close</a>
        </div>
      </dd>
    </dl>
    <!-- end of block .faq__item-->
    <...>
</div>
<!-- END FAQ-->

Note

Attributes id="heading-0" where 0 are in all controls, must be correlated, for this you can just increment it.

Form

Source

Sass styles are in folder template_src/src/assets/sass/widgets/_form.sass .

Jade source are in template_src/src/jade/partials/chunks/form.jade .

Variations

  • <div class="form form--properties"> - form on property details page
  • <div class="form form--comment"> - comment form
  • <div class="form form--contacts"> - contacts form
  • <div class="form form--workers"> - worker’s form
  • <div class="form form--sidebar-workers"> - sidebar worker’s form
  • <div class="form form--footer"> - form in footer

Example

You can use rangeSlider insteand of simple selects,

<div class="form form--properties">
  <form action="#" method="POST" class="form__wrap js-contact-form">
    <!-- wrap each inputs group in row -->
    <div class="form__row form-group">
      <!-- include standrart bootstraps classes 'control-label', 'form-control', 'form-group', very usable for some plugins -->
      <label for="in-form-name" class="form__label control-label">Your Name</label>
      <input id="in-form-name" type="text" name="name" required class="form__in form__in--text form-control">
    </div>
    <!-- modificators 'form__row--tel' and 'form__row--email' are usable when it should be aligned in columns -->
    <div class="form__row form__row--tel form-group">
      <label for="in-form-phone" class="form__label control-label">Telephone</label>
      <input id="in-form-phone" type="text" name="phone" class="form__in form__in--text form-control">
    </div>
    <div class="form__row form__row--email form-group">
      <label for="in-form-email" class="form__label control-label">E-mail</label>
      <input id="in-form-email" type="email" name="email" required data-parsley-trigger="change" class="form__in form__in--text form-control">
    </div>
    <div class="form__row form-group">
      <label for="in-form-message" class="form__label control-label">Message</label>
      <textarea id="in-form-message" name="message" required data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-validation-threshold="10" data-parsley-minlength-message="You need to enter at least a 20 caracters long comment.." class="form__in form__in--textarea form-control"></textarea>
    </div>
    <div class="form__row">
      <button type="submit" class="form__submit">Submit</button>
    </div>
  </form>
</div>
<!-- end of block form-->

Note

Pay attention to input’s attributes data-parsley-* this are rules for validation, see documentation Parsleyjs

Map

Source

Sass styles are in folder template_src/src/assets/sass/widgets/_form.sass .

Js source are in template_src/src/js/module/gmap .

Variations

  • <div class="map map--properties"> - map on property details page

    _images/map--property-details.jpg

  • <div class="map map--index"> - map on page

    _images/map--index.png

  • <div class="map map--contacts"> - map on contacts

    _images/map--contacts.png

  • <div class="map map--submit"> - map on submit page

    _images/map--submit.jpg

Options

Initialize map on index page
/***************************************************************
 * Initialize map on index page
 ==============================================================*/
function initIndexMap() {
    // Array with sample properties, used to display markers on the map
    var properties = window.demodata;
    // Default map zoom
    var zoom = 10;
    // We're using here sample coordinates, please replace them with real ones
    var coordinates = new google.maps.LatLng(33.74229160384012, -117.86845207214355);
    // jQuery object with map container
    var $mapCanvas = $('.js-map-index-canvas');
    // Temporary array for storing markers for clustering
    var markers = [];


    /**
     * This is a wrapper around original Google Maps object,
     * which brings some user experience improvements for mobile users,
     * So that, when user loads the map on small-screen device, it
     * is replaced by a button, clicking on it will open full screen
     * popup with the map in it.
     *
     * If you don't want/need that, you can call `google.maps.Map` contructor directly
     *
     * See https://developers.google.com/maps/documentation/javascript/
     * for more examples and options
     */
    app.createGoogleMap(
        // Map container
        $mapCanvas,

        /**
         * See more options
         * https://developers.google.com/maps/documentation/javascript/reference#MapOptions
         */
        {
            zoom: zoom,
            center: coordinates,
            // Disable scrolling wheel for usability purposes
            scrollwheel: false,
            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.RIGHT_CENTER
            },
            scaleControl: true,
            scaleControlOptions: {
                position: google.maps.ControlPosition.RIGHT_TOP
            },
            panControl: true,
            panControlOptions: {
                position: google.maps.ControlPosition.RIGHT_TOP
            }
        },

        // A button, clicking on which will display the map in a fullscreen popup on small screens
        $('.js-map-btn'),

        /**
         * This callback is executed when the Google Map is loaded
         * As first agrument it receives the google map object
         *
         * Please place here all the code that needs the google map object
         */
        function (map) {
            markers = [];
            // Loop over demo properties to create markers over map
            _.each(properties, function (item) {
                var infoboxHtml = generateMarkerHTML(item);

                /**
                 * app.createInfoboxMarker is a helper which contains:
                 * - preconfigured Marker object (see docs https://developers.google.com/maps/documentation/javascript/markers)
                 * - preconfigured Infobox object (see docs http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs)
                 * to make sure they work and look good with our theme.
                 *
                 * If you want something more sophisticated, please use these libraries directly
                 */
                var marker = app.createGmapInfoboxMarker(
                    map,
                    new google.maps.LatLng(item.lat, item.lng),
                    item.address,
                    infoboxHtml,
                    // You can pass directly the 'white' or 'dark' value or get it some other way
                    $mapCanvas.data('infoboxTheme')
                );
                // Save the created marker for later use for clustering
                markers.push(marker);
            });

            /**
             * Wrapper object for MarkerClustererPlus library preconfigured to work with our theme
             * See http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/docs/reference.html
             * for examples
             *
             * You can use it directly instead of wrapper if you want to customizer its options
             * Remove this if you don't want to cluster properties.
             */
            app.createGmapClustering(map, markers);
        });
}
Initialize map on preperty details page
function initPropertyMapAndPanorama() {
    // Getting first sample property to display marker for it
    var property = window.demodata[3];
    // We're using here sample coordinates, please replace them with real ones
    var coordinates = new google.maps.LatLng(property.lat, property.lng);
    // Default map zoom
    var zoom = 10;
    // jQuery object with map container
    var $mapCanvas = $('.js-map-canvas[data-type="map"]');
    var $panoramaCanvas = $('.js-map-canvas[data-type="panorama"]');

    var $mapBtn = $('.js-map-btn');
    var $panoramaBtn = $('.js-panorama-btn');
    var active;

    /**
     * This is a wrapper around original Google Maps object,
     * which brings some user experience improvements for mobile users,
     * So that, when user loads the map on small-screen device, it
     * is replaced by a button, clicking on it will open full screen
     * popup with the map in it.
     *
     * If you don't want/need that, you can call `google.maps.Map` contructor directly
     *
     * See https://developers.google.com/maps/documentation/javascript/
     * for more examples and options
     */
    app.createGoogleMap(
        // Map container
        $mapCanvas,

        /**
         * See more options
         * https://developers.google.com/maps/documentation/javascript/reference#MapOptions
         */
        {
            zoom: zoom,
            center: coordinates,
            // Disable scrolling wheel for usability purposes
            scrollwheel: false,
            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.RIGHT_CENTER
            },
            scaleControl: true,
            scaleControlOptions: {
                position: google.maps.ControlPosition.RIGHT_TOP
            },
            panControl: true,
            panControlOptions: {
                position: google.maps.ControlPosition.RIGHT_TOP
            }
        },

        // A button, clicking on which will display the map in a fullscreen popup on small screens
        $mapBtn,

        /**
         * This callback is executed when the Google Map is loaded
         * As first agrument it receives the google map object
         *
         * Please place here all the code that needs the google map object
         */
        function (map) {
            var infoboxHtml = generateMarkerHTML(property);

            /**
             * app.createInfoboxMarker is a helper which contains:
             * - preconfigured Marker object (see docs https://developers.google.com/maps/documentation/javascript/markers)
             * - preconfigured Infobox object (see docs http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs)
             * to make sure they work and look good with our theme.
             *
             * If you want something more sophisticated, please use these libraries directly
             */
            app.createGmapInfoboxMarker(
                map,
                coordinates,
                property.address,
                infoboxHtml,
                // You can pass directly the 'white' or 'dark' value or get it some other way
                $mapCanvas.data('infoboxTheme')
            );
            // Save the created marker for later use for clustering
        });

    /**
     * This is a wrapper around original Google Maps Panorama object,
     * which brings some user experience improvements for mobile users,
     * So that, when user loads the panorama on small-screen device, it
     * is replaced by a button, clicking on it will open full screen
     * popup with the panorama in it.
     *
     * If you don't want/need that, you can call `google.maps.StreetViewPanorama` contructor directly
     *
     * See https://developers.google.com/maps/documentation/javascript/
     * for more examples and options
     */
    app.createGooglePanorama(
        // Map container
        $panoramaCanvas,

        /**
         * See more options
         * https://developers.google.com/maps/documentation/javascript/streetview#StreetViewMapUsage
         */
        {
            position: coordinates,
            pov: {
                heading: 34,
                pitch: 10
            },
            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.RIGHT_CENTER
            },
            panControl: true,
            panControlOptions: {
                position: google.maps.ControlPosition.RIGHT_TOP
            }
        },

        // A button, clicking on which will display the map in a fullscreen popup on small screens
        $panoramaBtn);

    if (app.gridSize !== 'xs') {
        active = $mapBtn.add($panoramaBtn).filter('.active');
        $mapBtn.on('click', function () {
            toggleActive(this);
            $panoramaCanvas.css({zIndex: 5});
            $mapCanvas.css({zIndex: 10});
        });
        $panoramaBtn.on('click', function () {
            toggleActive(this);
            $panoramaCanvas.css({zIndex: 10});
            $mapCanvas.css({zIndex: 5});
        });

        function toggleActive(newActive) {
            if (active) {
                active.removeClass('active');
            }
            active = $(newActive);
            active.addClass('active');
        }
    } else {
        $mapBtn.removeClass('active');
    }
}
Initialize Leaflet map
/***************************************************************
 * As an alternative to Google Maps, you can use Leaflet
 * which uses data from OSM and tiles from MapBox
 ==============================================================*/
function initLeafletMap() {
    // Array with sample properties, used to display markers on the map
    var properties = window.demodata;
    // Default map zoom
    var zoom = 10;
    // We're using here sample coordinates, please replace them with real ones
    var coordinates = new L.LatLng(33.74229160384012, -117.86845207214355);
    // jQuery object with map container
    var $mapCanvas = $('.js-map-canvas');

    /*
     * This is a wrapper around original Leftlet map object,
     * which brings some user experience improvements for mobile users,
     *
     * If you don't want/need that, you can call ` L.map` contructor directly
     *
     * See http://leafletjs.com/reference.html
     * for more examples and options
     ==============================================================*/
    app.createLeafletMap(
        // Map container
        $mapCanvas,
        /* Leaftlet map options
         * http://leafletjs.com/reference.html#map-options
         ==============================================================*/
        {
            zoom: zoom,
            center: coordinates,
            zoomControl: false,
            // Disable scrolling wheel for usability purposes
            scrollWheelZoom: false
        },

        // A button, clicking on which will display the map in a fullscreen popup on small screens
        $('.js-map-btn'),

        /**
         * This callback is executed when the Leftlet is loaded
         * As first agrument it receives the Leftlet object
         *
         * Please place here all the code that needs the Leftlet object
         */
        function (map) {

            // Loop over demo properties to create markers over map
            _.each(properties, function (item) {
                var infoboxHtml = generateMarkerHTML(item);

                /**
                 * app.createLeafletInfoboxMarker is a helper which contains:
                 * - preconfigured Marker object (see docs http://leafletjs.com/reference.html#marker)
                 * - preconfigured Popup object (see docs http://leafletjs.com/reference.html#popup)
                 * to make sure they work and look good with our theme.
                 *
                 * If you want something more sophisticated, please use these objects directly
                 */
                app.createLeafletInfoboxMarker(
                    map,
                    new L.LatLng(item.lat, item.lng),
                    item.address,
                    infoboxHtml,
                    // You can pass directly the 'white' or 'dark' value or get it some other way
                    $mapCanvas.data('infoboxTheme')
                );
            });
        });
}
Html content for infoboxes
// Simple helper for generating html content for infoboxes
function generateMarkerHTML(data) {
    return "<span class='map__address'>" + data.address +
        "</span> <span class='map__info'>" +
        "<img  class='map__photo' src='assets/media-demo/properties/277x180/" + data.image +
        ".jpg'/><span class='map__details'> " +
        "<dl><dt>Type:</dt> <dd>" + data.type + "</dd></dl>" +
        "<dl><dt>Area:</dt> <dd>" + data.area + " m2</dd></dl>" +
        "<dl><dt>Bedrooms:</dt> <dd>" + data.bedrooms + "</dd></dl>" +
        "</span></span> <span class='map__price'><strong>$" + data.price +
        "</strong></span> <a  class='map__more' href='property_details.html'>Details</a>";
}

Examples

Map on index page
<div class="map map--index">
  <div class="map__buttons">
    <button class="map__change-map js-map-btn active">Property Map</button>
  </div>
  <div class="map__wrap">
    <div style="" data-infobox-theme="white" class="map__view js-map-index-canvas"></div>
  </div>
  <div class="container">
    <!-- BEGIN SEARCH-->
    <div class="search js-search-form search--map-sidebar">
      <button type="button" class="search__show js-search-form-show"></button>
    <...>
    </div>
  </div>
</div>
Map on property details page
<div class="map map--properties">
  <div class="map__buttons">
    <button class="map__change-map js-map-btn active">Property Map</button>
    <button class="map__change-panorama js-panorama-btn">Street view</button>
  </div>
  <div class="map__wrap">
    <div style="" data-type="map" class="map__view js-map-canvas"></div>
    <div style="" data-type="panorama" class="map__view map__view--panorama js-map-canvas"></div>
  </div>
</div>

Partners

Source

Sass styles are in folder template_src/src/assets/sass/widgets/_partners.sass .

Jade source are in template_src/src/jade/partials/widgets/partners.jade .

Js initialization are in template_src/src/js/demo.js .

Ooptions

/**
 * Slick slider for "Our partners" block
 * See documentation for options http://kenwheeler.github.io/slick/
 ==============================================================*/
var $partnersSlider = $('#partners-slider');

$partnersSlider
    .find('.js-slick-slider')
    .slick({
        dots: false,
        infinite: true,
        speed: 300,
        slidesToShow: 5,
        autoplay: true,
        prevArrow: $partnersSlider.find('.js-partners-prev'),
        nextArrow: $partnersSlider.find('.js-partners-next'),
        responsive: [
            {
                breakpoint: 1100,
                settings: {
                    slidesToShow: 4
                }
            },
            {
                breakpoint: 1000,
                settings: {
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1
                }
            }
        ]
    });

Example

<!-- BEGIN PARTNERS-->
<section class="partners">
  <div class="container">
    <header class="partners__header">
      <h3 class="partners__title">Our Partners</h3>
      <h4 class="partners__headline">
        At RS, our partners make great digital experiences possible by offering our products, consulting
         expertise and the products of our technology partners
      </h4>
    </header>
    <!-- end of block .partners__header-->
    <div id="partners-slider" class="partners__list">
      <div class="partners__slider js-slick-slider">
        <div class="partners__item"><img src="assets/media-demo/partners/logo-company-1.png" alt=""></div>
        <!-- end of block .partners__item-->
        <...>
      </div>
      <div class="partners__controls">
        <button class="partners__arrow partners__arrow--prev js-partners-prev"></button>
        <button class="partners__arrow partners__arrow--next js-partners-next"></button>
      </div>
      <!-- end of block .partners__controls-->
    </div>
    <!-- end of block .partners__list-->
  </div>
</section>
<!-- end of block .partners-->
<!-- END PARTNERS-->

Pnotify

Source

Sass styles are in folder template_src/src/assets/sass/block/pnotify.sass .

Js are in template_src/src/js/demo.js and template_src/src/assets/js/module/notifier.js .

Options

Use global triggers for generating notifications:

  • app.notifier.showSuccess('You have been successfully subscribed!'); - success notification.
  • app.notifier.showError('Subscription failed! Please try again.'); - error notification.

Example

/**
 * Subscribe form validation initialization as well as
 * displaying PNotify global message on error/success
 *
 * app.notifier.showSuccess/showError is a wrapper around `PNotify` function
 * with predefined defaults to make it look good in this theme
 *
 * if you would like to modify it, feel free to use the PNotify
 * plugin directly
 ==============================================================*/

var subscribeForm = $('.js-subscribe-form');

if (subscribeForm.length) {
    subscribeForm
        .parsley()
        .on('form:success', function (formInstance) {
            // trigger here success notification
            app.notifier.showSuccess('You have been successfully subscribed!');
            return false;
        })
        .on('form:error', function (formInstance) {
            // trigger here error notification
            app.notifier.showError('Subscription failed! Please try again.');
            return false;
        })
    ;

}

Note

More documentaion PNotify

Pricing

Source

Sass styles are in folder template_src/src/assets/sass/widgets/_pricing.sass .

Jade source are in template_src/src/jade/pricing.jade .

Variations

RS come with 3 variants of pricing blocks:

  • 3 columns

    _images/pricing--col-3.jpg

  • 4 columns

    _images/pricing--col-4.jpg

  • Table

    _images/pricing--table.jpg

Example

<div class="pricing">
    <div class="pricing__row">
      <div class="pricing__col3">
        <div class="pricing__item">
          <dl class="pricing__list">
            <dt class="pricing__type">Free</dt>
            <dd class="pricing__total"><span class="pricing__currency">$</span><span class="pricing__summa">0</span><span class="pricing__period">/monthly</span></dd>
            <dd class="pricing__feature"><strong>2</strong>Properties</dd>
            <dd class="pricing__feature"><strong>1</strong>Agent Profiles</dd>
            <dd class="pricing__feature">Agency Profiles</dd>
            <dd class="pricing__feature">Featured Properties</dd>
          </dl>
          <div class="pricing__actions">
            <button class="pricing__button">Sign in</button>
          </div>
        </div>
      </div>
      <...>
    </div>
</div>

Properties

Source

Sass styles are in folder template_src/src/assets/sass/widgets/_properties.sass .

Jade source are in template_src/src/jade/partials/chunks/properties_item.jade .

Variations

  • properties--index properties on index page
  • properties--grid properties grid
  • properties--list properties list
  • properties--similar properties similar widget
  • properties--workers properties on workers page
  • properties--sidebar properties in sidebar
  • properties--gallery properties gallery

Options

<div class="properties properties--grid">
  <div class="properties__list">
    <div class="properties__item">
      <div class="properties__thumb">
          <a href="property_details.html" class="item-photo">
              <img src="assets/media-demo/properties/830x540/02.jpg" style="" alt="">
              <figure class="item-photo__hover">
                  <span class="item-photo__more">View Details</span>
              </figure>
          </a>
          <span class="properties__ribon">For rent</span>
      </div>
      <!-- end of block .properties__thumb-->
      <a href="property_details.html" class="properties__address">649 West Adams Boulevard, Los Angeles, CA 90007, USA</a>
      <dl class="properties__param">
        <dt>Property type:</dt>
        <dd>Self Storage</dd>
        <dt>Area:</dt>
        <dd>371 m2</dd>
        <dt>Bedrooms:</dt>
        <dd>2</dd>
        <dt>Bathrooms:</dt>
        <dd>1</dd>
      </dl>
      <!-- end of block .properties__param--><span class="properties__price">$ 4,555<span class="properties__price-period">per month</span></span><a href="property_details.html" class="properties__more">View Details</a>
    </div>
    <!-- end of block .properties__item-->
    <...>
  </div>
</div>

Review

Source

Sass styles are in template_src/src/assets/sass/widgets/_review.sass .

Jade source are in template_src/src/jade/partials/widgets/review.jade , template_src/src/jade/partials/chunks/review_item.jade .

Variations

  • review--wide - wide review

    _images/review--wide.jpg

  • review--list - list review

    _images/review--list.jpg

Options

Review wide
<!-- BEGIN SECTION REVIEW-->
<section class="review review--wide">
  <div class="container">
    <div class="review__header">
      <h3 class="review__title">Testimonials</h3>
      <h4 class="review__headline">Some nice words from our clients. The funds are strictly designed to help single-family homeowners retrofit their residences for safety purposes.</h4>
    </div>
    <!-- end of block .review__header-->
    <div id="review-slider" class="review__list">
      <div class="review__slider js-slick-slider">
        <div class="review__item">
          <div class="review__photo"><img src="assets/media-demo/testimonials/01.jpg" alt="ALT" class="review__photo-img"></div>
          <div class="review__details"><span class="review__name">Vanessa Kasinsky</span><span class="review__post">Back-End Developer</span>
            <div class="review__stars"><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i></div>
          </div>
          <!--.clearfix-->
          <div class="review__info">
            <div class="review__info-quote review__info-quote--open">&rdquo;</div>
            <p>Mariusz always addressed my questions professionally and in a very timely manner. Working with him was a pleasure and would come with my recommendation.
            </p>
            <div class="review__info-quote review__info-quote--close">&ldquo;</div>
          </div>
        </div>
        <!-- end of block .review__item-->
        <...>
      </div>
      <div class="review__controls">
        <button class="review__arrow review__arrow--prev js-review-prev"></button>
        <button class="review__arrow review__arrow--next js-review-next"></button>
      </div>
    </div>
    <!-- end of block .review__list-->
  </div>
</section>
<!-- END SECTION REVIEW-->
Review wide initialization
function initReviewSlider() {
    /***************************************************************
     * Initialize sliders for user reviews
     * See http://kenwheeler.github.io/slick/ for more options
     ==============================================================*/
    var $reviewSlider = $('#review-slider');
    $reviewSlider
        .find('.js-slick-slider')
        .slick({
            dots: false,
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            autoplay: true,
            prevArrow: $reviewSlider.find('.js-review-prev'),
            nextArrow: $reviewSlider.find('.js-review-next')
        });
}
Review list
<section class="review review--list">
  <div class="review__list">
    <div class="review__item">
      <div class="review__photo"><img src="assets/media-demo/testimonials/01.jpg" alt="ALT" class="review__photo-img"></div>
      <div class="review__details"><span class="review__name">Vanessa Kasinsky</span><span class="review__post">Back-End Developer</span>
        <div class="review__stars"><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i><i class="glyphicon glyphicon-star"></i></div>
      </div>

      <div class="review__info">
        <p>Mariusz always addressed my questions professionally and in a very timely manner. Working with him was a pleasure and would come with my recommendation.This summer helper is smokin' hot! Porter is a multi-purpose BBQ tray that eliminates extra trips between your kitchen and grill. Containers with lids keep raw food safely separated.</p>
      </div>
    </div>
    <!-- end of block .review__item-->
    <...>
  </div>
</section>

Slick Slider

Documentation and examples
http://kenwheeler.github.io/slick/

Animations

We have included for you a list of animations that the Slick slider can use, to transition from one slide to another.

To apply an animation to specific slider, add it as its class. For example, if we want to use zoomIn animation, we will use a slider-zoomIn class, that we append to slider’s class list like this:

<div id="simple-slider" class="slider slider--wide slider-zoomIn">
    <div class="slider__block js-slider-block">

Source

Sass styles are in folder template_src/sass/widgets/slider.sass

Jade source are in:

  • template_src/jade/partials/widgets/wide_slider.jade - wide slider with caption
  • template_src/jade/partials/widgets/small_slider.jade - small slider with counters

Js initialization are in assets/src/assets/js/demo.js

  • initWideSlider() - function which init wide slider
  • initBlogSlider() - initilize blog’s page slider
  • initPropertyDetailsPage() - initilize slider on property details page

Variations

There is 2 varioations of slider

  • slider--wide with caption
  • slider--small with counters

Options

Slider are reponsive, touchbased, and free to change. You can remove caption from wide slider, or hide arrows through sass.

Importants js configuration:

  • autoplay - enable autoplay
  • infinite - continuous scrolling
  • speed - speed slide’s change

Examples

Wide slider
_images/fullslider.gif 
<!-- START SLIDER-->
<div id="simple-slider" class="slider slider--wide">
    <div class="slider__block js-slider-block">
        <div class="slider__item">
            <img src="media-demo/properties/1168x550/01.jpg" class="slider__img">
            <div class="slider__caption"><img src="img/icon-marker-white.svg" class="slider__marker">
                <a href="property_details.html" class="slider__address">
                    <span>4011 South Sycamore Street, Santa Ana, CA 92701, USA</span>
                </a>
                <div class="slider__params">
                    <dl>
                        <dt>Area:</dt>
                        <dd>460m2</dd>
                        <dt>Elevator:</dt>
                        <dd>Yes</dd>
                    </dl>
                    <dl>
                        <dt>Bedrooms:</dt>
                        <dd>1</dd>
                        <dt>Baths:</dt>
                        <dd>1</dd>
                        <dt>Kitchen:</dt>
                        <dd>Yes</dd>
                    </dl>
                </div>
                <!-- end of block .slider__params-->
                <span class="slider__price"><strong>$ 8780</strong>per month</span>
                <a href="/" class="slider__more">Details</a>
            </div>
            <!-- end of block .slider__caption-->
        </div>
        <!-- end of block .slider__item-->
    </div>
    <!-- end of block .slider__block-->
    <div class="slider__controls">
        <button class="slider__control slider__control--prev js-banner-prev"></button>
        <button class="slider__control slider__control--next js-banner-next"></button>
    </div>
</div>
<!-- END SLIDER-->

var $indexBanner = $('#simple-slider');

$indexBanner
        .find('.js-slick-slider')
        .slick({
            dots: false,
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            centerMode: true,
            variableWidth: true,
            prevArrow: $indexBanner.find('.js-banner-prev'),
            nextArrow: $indexBanner.find('.js-banner-next'),
            responsive: [
                {
                    breakpoint: 1300,
                    settings: {
                        centerMode: false,
                        variableWidth: false,
                        arrows: true
                    }
                }
            ]
        }
);
Small slider example
_images/shortslider.gif 
<div id="slider-small-example" class="slider slider--properties">
    <div class="slider__block js-slick-items">
        <div class="slider__item"><img src="media-demo/properties/1740x960/02.jpg" style="" alt=""></div>
        <div class="slider__item"><img src="media-demo/properties/1740x960/03.jpg" style="" alt=""></div>
        <div class="slider__item"><img src="media-demo/properties/1740x960/11.jpg" style="" alt=""></div>
    </div>
    <div class="slider__controls">
        <button type="button" class="slider__control slider__control--prev js-banner-prev"></button>
        <span class="slider__current js-properties-banner-current">1 /</span>
        <span class="slider__total js-properties-banner-total"></span>
        <button type="button" class="slider__control slider__control--next js-banner-next"></button>
    </div>
</div>

var $simpleSlider = $('#counter-slider'),
        $simpleSliderCurrent = $simpleSlider.find('.js-properties-banner-current'),
        $simpleSliderTotal = $simpleSlider.find('.js-properties-banner-total');

var totalItems = $simpleSlider.find('.slider__item').length;

$simpleSliderTotal.html(totalItems);
$simpleSlider
        .find('.js-slick-items')
        .slick({
            dots: false,
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            prevArrow: $simpleSlider.find('.js-banner-prev'),
            nextArrow: $simpleSlider.find('.js-banner-next')
        }).on('afterChange', function (event, slick, currentSlide) {
            $simpleSliderCurrent.html(currentSlide + 1 + ' /');
        });

Subscribe

Source

Sass styles are in template_src/src/assets/sass/widgets/_subscribe.sass .

Jade source are in template_src/src/jade/partials/widgets/subscribe.jade .

Example

<!-- BEGIN SUBSCRIBE-->
<div class="subscribe">
  <div class="container">
    <div class="subscribe__row">
      <form action="#" class="subscribe__form js-subscribe-form">
        <h4 class="subscribe__title">Newsletters</h4>
        <div class="subscribe__field form-group">
          <label class="sr-only">Newsletters</label>
          <input type="email" placeholder="Input your e-mail" name="email" required data-parsley-trigger="change" class="subscribe__in subscribe__in--text form-control js-subscribe-email">
        </div>
        <button type="submit" class="subscribe__in subscribe__in--submit js-subscribe-submit">SUBMIT</button>
      </form>
      <!-- end of block .subscribe__form-->
    </div>
  </div>
</div>
<!-- END SUBSCRIBE-->

/**
 * Subscribe form validation initialization as well as
 * displaying PNotify global message on error/success
 *
 * app.notifier.showSuccess/showError is a wrapper around `PNotify` function
 * with predefined defaults to make it look good in this theme
 *
 * if you would like to modify it, feel free to use the PNotify
 * plugin directly
 ==============================================================*/

var subscribeForm = $('.js-subscribe-form');
if (subscribeForm.length) {
    subscribeForm
        .parsley()
        .on('form:success', function (formInstance) {
            app.notifier.showSuccess('You have been successfully subscribed!');
            return false;
        })
        .on('form:error', function (formInstance) {
            app.notifier.showError('Subscription failed! Please try again.');
            return false;
        })
    ;

}

Note

More documentaion PNotify

Note

Pay attention to input’s attributes data-parsley-* this are rules for validation, see documentation Parsleyjs

Workers

Source

Sass styles are in template_src/src/assets/sass/widgets/_worker.sass .

Jade source are in template_src/src/jade/partials/widgets/worker.jade .

Variations

  • worker--index

    _images/worker--index.jpg

  • worker--grid

    _images/worker--grid.jpg

  • worker--list

    _images/worker--list.jpg

  • worker--details

    _images/worker--details.jpg

  • worker--navbar

    _images/worker--navbar.jpg

  • worker--properties

    _images/worker--properties.jpg

  • worker--sidebar

    _images/worker--sidebar.jpg

  • worker--sidebar-advanced

    _images/worker--sidebar-advanced.jpg

  • worker--sidebar-nav

    _images/worker--sidebar-nav.jpg

Options

Worker index page
<!-- BEGIN SECTION WORKER INDEX-->
<section class="worker worker--index">
  <div class="container">
    <header class="worker__header">
      <h3 class="worker__title">Our Agents</h3>
      <h4 class="worker__headline">Our agents are licensed professionals that specialise in searching, evaluating and negotiating the purchase of property on behalf of the buyer. They will sell you real estate. Insights, tips &amp; how-to guides on selling property and preparing your home or investment property for sale and working to maximise your sale price.</h4>
    </header>
    <!-- end of block .worker__header-->
    <div class="worker__list">
      <div class="worker__item vcard">
        <h3 class="worker__name fn">Christopher Pakulla</h3>
        <div class="worker__photo">
          <a href="agent_listing.html" class="item-photo">
            <img src="assets/media-demo/workers/worker-1.jpg" alt="Christopher Pakulla" class="photo">
            <figure class="item-photo__hover">
              <span class="item-photo__more">View Details</span>
            </figure>
          </a>
        </div>
        <a href="tel:+44(0)2035102390" class="worker__tel uri">+44 (0) 20 3510 2390</a>
        <div class="worker__contacts">
          <div class="email">
            <a href="mailto:c_walken@realtyspace.com" class="uri value">c_walken@realtyspace.com</a>
          </div>
        </div>
        <!-- end of block .worker__contacts-->
      </div>
      <!-- end of block .worker__item-->
      <...>
      <div class="loading"></div>
    </div>
    <!-- end of block .worker__list-->
  </div>
</section>
<!-- END SECTION WORKER INDEX-->

Emails

Source

Variations

Options

<h1>Heading 1</h1>

Browser Support

Compatible browsers are IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Out of the box, Realtyspace theme does not support browsers older than IE9, however you may add some basic older browser support by adding this code into template <head>.

<!--[if lt IE 9]>
<script type="text/javascript" src='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js'></script>
<script type="text/javascript" src='https://oss.maxcdn.com/respond/1.4.2/respond.min.js'></script>
<![endif]-->

and switching jQuery 2 version to jQuery 1.

Note

We can provide support only for issues in browsers IE9 and higher, Firefox, Safari, Opera and Chrome.

Reference

Animations

Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

These animations can be used for ui-slick-slider and ui/ui-menu dropdowns.

  • default
  • bounce
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • flipInX
  • flipInY
  • lightSpeedIn
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp

Libraries and modules

The following libraries are bundled with the theme, for usage examples folow the specified links:

Changelog

1.2

  • Visual-hierarchy improvememnt: Major changes in property block area in order to remove the crowded feeling, all the secondary information was removed or hidden in order to reveal on hover action
  • Visual-hierarchy improvement: Removed secondary information in agent and news blocks in order to make them look more lightweight
  • Visual-hierarchy improvement: Increased font-sizing and spacing between blocks and headers
  • More improvements related to spacing, alignment and consistency
  • Removed other unimportant information from theme and moved it to the dedicated item page.

1.1

  • Added new “Welcome” block and frontpage
  • Added new “Call to action” block on frontpage
  • Redesigner main slide banner to a bigger and nicer version
  • Major overhaul and redesign of UI blocks in order to follow along WebDesign Hierarchy principles
  • Improved color contrast in all color themes
  • Major improvements in domain of spacing and alignment issues between UI elements
  • Performance improvements on smartphones
  • Complete menu module rewrite, now it works even better on mobile devices

1.0

  • First version