Overview

Folder structure for assets/ directory

css - contains css files which were generated from scss files
scss - contains scss files
img - contains site images
js - contains site javascripts
fonts - contains fonts used on the site
libraries - contains third party libraries used in the theme

Documentation links

Bootstrap

Font Awesome Examples

Looking for right SCSS

Template is split into large amount of small helper files. Sometimes is hard to know which file to open. Here are saveral ways how to find correct file.

Using browser

Template has source maps support. If you don't know what the source maps are read more at http://thesassway.com/intermediate/using-source-maps-with-sass

We are using Chrome for development but next example should work similar in different browser.

Firstly open your website in browse and make right click on element which you want to modify and select inspect element.

After that console will display at the bottom of browser. At the right side you can which styles are applied on inspected element and you can see which file contains that properties.

Using grep

If you are on Mac or Linux, I recommed to using grep (terminal) to find what you are looking for. For example we are looking file which is containg .navigation class we can use command below.

Custom Colors

In template we have defined almost all colors which are coming from material design guidelins. You can see color definitions in assets/scss/_colors.scss. Each color is defined in "array" so we have all combinations from lightest to darkest.

Another file which is important for creating new color combination is assets/scss/helpers/_variables.scss. In this file we are setting primary and secondary color from our _colors.scss file. So if you want to change the primary color just replace $blue to e.g. $red and compile SASS files.

Bootstrap

Realsite template uses Bootstrap library heavily. Please consider the bootstrap 3.x documentation as extended documentation to Realsite template, as most of the answers can be found there.

Read documentation

Please pay increased attention to following sections of Bootstrap documentation:

Grid Buttons Forms Input Groups Navigation Navbar Carousel

Styling

For CSS files we are usign SASS. The CSS loaded in templates is preprocessed.

SASS Installation Instructions

SASS files structure

assets/scss/helpers/_activity.scss - Activity
assets/scss/helpers/_agency_row.scss - Agency Row
assets/scss/helpers/_agent_card.scss - Agent Card
assets/scss/helpers/_agent_medium.scss - Agent Medium
assets/scss/helpers/_agent_row.scss - Agent Row
assets/scss/helpers/_agent_simple.scss - Agent Simple
assets/scss/helpers/_agent_small.scss - Agent Small
assets/scss/helpers/_bootstrap_carousel.scss - Bootstrap Carousel
assets/scss/helpers/_breadcrumbs.scss - Breadcrumbs
assets/scss/helpers/_buttons.scss - Buttons
assets/scss/helpers/_charts.scss - Charts
assets/scss/helpers/_colors.scss - Colors
assets/scss/helpers/_commons.scss - Commons
assets/scss/helpers/_elements.scss - Elements
assets/scss/helpers/_faq.scss - FAQ
assets/scss/helpers/_features.scss - Features
assets/scss/helpers/_footer.scss - Footer
assets/scss/helpers/_forms.scss - Forms
assets/scss/helpers/_gallery.scss - Gallery
assets/scss/helpers/_header_top.scss - Header Top
assets/scss/helpers/_header_topbar.scss - Header Topbar
assets/scss/helpers/_invoice.scss - Invoice
assets/scss/helpers/_isotope.scss - Isotope
assets/scss/helpers/_map_autocomplete.scss - Map Autocomplete
assets/scss/helpers/_map.scss - Map
assets/scss/helpers/_mixins.scss - Mixins
assets/scss/helpers/_module.scss - Module
assets/scss/helpers/_navigation.scss - Navigation
assets/scss/helpers/_note.scss - Note
assets/scss/helpers/_pagination.scss - Pagination
assets/scss/helpers/_partners.scss - Partners
assets/scss/helpers/_people.scss - People
assets/scss/helpers/_posts.scss - Posts
assets/scss/helpers/_pricing.scss - Pricing
assets/scss/helpers/_promo.scss - Promo
assets/scss/helpers/_promoted.scss - Promoted
assets/scss/helpers/_promotions.scss - Promotions
assets/scss/helpers/_property_amenities.scss - Property Amenities
assets/scss/helpers/_property_badge.scss - Property Badge
assets/scss/helpers/_property_box.scss - Property Box
assets/scss/helpers/_property_browser.scss - Property Browser
assets/scss/helpers/_property_carousel.scss - Property Carousel
assets/scss/helpers/_property_chart.scss - Property Chart
assets/scss/helpers/_property_gallery.scss - Property Gallery
assets/scss/helpers/_property_large.scss - Property Large
assets/scss/helpers/_property_list.scss - Property List
assets/scss/helpers/_property_map.scss - Property Map
assets/scss/helpers/_property_medium.scss - Property Medium
assets/scss/helpers/_property_preview.scss - Property Preview
assets/scss/helpers/_property_row.scss - Property Row
assets/scss/helpers/_property_simple.scss - Property Simple
assets/scss/helpers/_property_small.scss - Property Small
assets/scss/helpers/_property_sort.scss - Property Sort
assets/scss/helpers/_property_table.scss - Property Table
assets/scss/helpers/_property_valuation.scss - Property Valuation
assets/scss/helpers/_search_main.scss - Search Main
assets/scss/helpers/_structure.scss - Strucuture
assets/scss/helpers/_tables.scss - Tables
assets/scss/helpers/_variables.scss - Variables
assets/scss/helpers/_widgets.scss - Widgets

JavaScript

The main javascript file is stored in assets/js/realsite.js

Each javascript functionality has its own block with heading in assets/js/realsite.js. If you don't want to use something feel free to remove desired block.

Always add new javascript files before the closing </body> tag.

Use jQuery scrict mode.


                        $(document).ready(function() {

                                'use strict';

                        });

Isotope

var isotope_properties = $('.properties-isotope');
isotope_properties.isotope({
    'itemSelector': '.item'
});

$('.properties-filter a').click(function() {
    $(this).parent().parent().find('li').removeClass('selected');
    $(this).parent().addClass('selected');

    var selector = $(this).attr('data-filter');
    isotope_properties.isotope({ filter: selector });
    return false;
});

File Input

$('#input-file').fileinput({
    initialPreview: [
    "",
    "",
    ],
    overwriteInitial: true,
    initialCaption: "Your Uploaded Properties"
});

Google Map

var map = $('#map');
    var markers = new Array();
    var colors = ['orange', 'blue', 'cyan', 'pink', 'deep-purple', 'teal', 'indigo', 'green', 'light-green', 'amber', 'yellow', 'deep-orange', 'brown', 'grey'];

    function get_gps_ranges(center_lat, center_lng, range_level_lat, range_level_lng) {
        var lat = center_lat + (Math.random() * (range_level_lat + range_level_lat) - range_level_lat);
        var lng = center_lng + (Math.random() * (range_level_lng + range_level_lng) - range_level_lng);
        return Array(lat, lng);
    }

    for (var i=0; i < 30; i++) {
        var position = get_gps_ranges(40.761077, -73.983307, 0.08, 0.60);
        var color = colors[Math.floor(Math.random()*colors.length)];

        markers.push({
            latitude: position[0],
            longitude: position[1],
            marker_content: 'marker content',
            content: 'infobox content'
        });
    }

    if (map.length) {
        map.google_map({
            infowindow: {
                borderBottomSpacing: 0,
                height: 120,
                width: 424,
                offsetX: 30,
                offsetY: -80
            },
            zoom: 11,
            transparentMarkerImage: map.data('transparent-marker-image'),
            transparentClusterImage: map.data('transparent-marker-image'),
            markers: markers,
        });
    }

Property Carousel

if ($('.property-carousel').length != 0) {
    $('.property-carousel').owlCarousel({
        items: 4,
        itemsDesktop : [1199, 5],
        itemsDesktopSmall : [979, 3],
        itemsTablet : [768, 2],
        itemsTabletSmall : [1, 2],
        itemsMobile : false,
        navigation: true,
        navigationText: ['', '']
    });
}

$('.property-gallery-list-item a').on('click', function(e) {
    e.preventDefault();

    $('.property-gallery-list-item').each(function() {
        $(this).removeClass('active');
    });

    $(this).closest('li').addClass('active');

    var link = $(this).attr('href');
    $('.property-gallery-preview img').attr('src', link);
});

Libraries

jQuery Autosize - A plugin to automatically adjust textarea height.

Bootstrap File Input - An enhanced HTML 5 file input for Bootstrap 3.x

Bootstrap Select - A custom select for Bootstrap using button dropdown.

Font Awesome - icon-graphic font used for site icons

Isotope - Filter & sort magical layouts

Transit - Super-smooth CSS transitions & transformations for jQuery

jQuery.ScrollTo - Smooth scroll

OWL Carousel - Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

Table of Contents

Realsite - Material Real Estate Template

Overview

Looking for right SCSS

Using browser

Using grep

Custom Colors

Bootstrap

Styling

SASS files structure

JavaScript

Libraries