Easy Living – real estate HTML template
Documentation

Getting Started

Easy Living is a refreshing & easy-to-use real estate web template. Easy Living was developed using Twitter Bootstrap,
with a 1170px grid. The theme download includes over 30 HTML pages, and 3 PSD files.

MAIN FEATURES:

  • – Home page w/ Bxslider
  • – Home page w/ custom Google Maps integration
  • – Grid and row property listings
  • – Filterable masonry property listings
  • – Front-end user property submission
  • – Grid and row agent listings
  • – Blog/news section
  • – 4 header styles, 2 footer styles
  • – Mega menu dropdown
  • – 2 contact templates
  • – Bootstrap 3.0 framework
  • – CSS3 animations
  • – Fully responsive
  • – Shortcodes
  • – Photoshop files for extensive customization

FULL PAGE LIST:

  • – index.html
  • – home_map.html
  • – listing_grid.html
  • – listing_grid_sidebar.html
  • – listing_grid_masonry.html
  • – listing_row.html
  • – listing_row_sidebar.html
  • – property_single.html
  • – my_properties.html
  • – submit_property.html
  • – edit_property.html
  • – agent_listing_grid.html
  • – agent_listing_grid_sidebar.html
  • – agent_listing_row.html
  • – agent_listing_row_sidebar.html
  • – agent_single.html
  • – blog_classic.html
  • – blog_single.html
  • – about.html
  • – faq.html
  • – left_sidebar.html
  • – right_sidebar.html
  • – 404.html
  • – login.html
  • – register.html
  • – index_header2.html
  • – index_header3.html
  • – index_headerMinimal.html
  • – index_footer2.html
  • – shortcodes.html
  • – contact.php
  • – contact_wide.html

HTML Structure

Easy Living’s HTML5 pages are broken down into logical sections using the <section> tag. Each section has it’s own
container that holds the content for that section. A few sections do not use the <section> tag because they have more semantic
HTML5 tags such as the <header> or <footer> tag.

For example, take a look at the header section:

<header>
<div class=”container”>

// content goes here

</div>
</header>

Anything that is put inside the container class will have a fixed width and be centered on the page. This is where you will want to put your content. Anything placed outside of the container will not be fixed and centered. For instance, if you wanted to put a background image that stretches the full width of the header you would apply a css style to the <header> tag (not the container).

Header background image example:

header {
background: url(‘../images/headerBg.png’);
background-size: cover;
}

Within each section container, you will notice “col-lg-x” class occurring quite frequently. This classes is used to build the fundamental building blocks of Easy Living using the bootstrap framework. Col-lg-6 means that section will be 6 columns wide (out of 12).

For example, say you want a section to have three vertical columns of content. Each content block would have to be 4 columns wide (12 divided by 3 equals 4). Take a look at the following code:

<section id= “yourSection”>
<div class = “container”>
<div class= “row”>
<div class= “col-lg-4”>
Your content here
</div>
<div class= “col-lg-4”>
Your content here
</div>
<div class= “col-lg-4”>
Your content here
</div>
</div>
</div>
</section>

CSS Structure

Easy Living uses 6 external stylesheets total, however, you only have to worry about the main stylesheet (style.css). Unless you want to customize the look of a Jquery plugin.

At the top of the main stylesheet(style.css), there is a very simple reset, followed by the global styles. Global styles are any styles that are not specific to a certain section. This is where you define the things like the font family, color and size that will be applied to the entire site. Each section in the html files has a corresponding section in the main stylesheet where all of the elements within that section are styled. For instace, the style starts with the header section, then the sub-header sections (home, map, and page) and so on. The CSS sections are ordered in the same order as they are found in the html file.

If you want to customize the responsive qualities of Easy Living, you will want to edit the responsive.css file. Note that a majority of the themes responsive qualities are being inherited from the bootstrap framework. To customize these qualities you will have to refer to the bootstrap documentation.

Jquery

All Javascript imports and script can be found at the bottom of the HTML pages.

Easy Living utilizes 9 external JavaScript files:

  • 1. jquery
  • 2. bootstrap
  • 3. bxslider
  • 4. tab (custom script)
  • 5. isotope
  • 6. nouislider
  • 7. map
  • 8. map one pin
  • 9. respond

1. JQuery (jquery.js)
JQuery is a JavaScript library that reduces the amount of code required to make the site function. JQuery is required for the site to function properly.
Source: http://jquery.com/

2. Bootstrap (bootstrap.min.js)
Bootstrap is a front-end framework that enables faster and more efficient web development. Bootstrap is required for the site to function properly.

Source: http://getbootstrap.com/

3. Bxslider (jquery.bxslider.min.js)
Bxslider is a responsive jQuery content slider. This plugin is used in two areas within the Easy Living theme: the home page slider section and the property single gallery. In order to use Bxslider, you have to activate it for each instance. Scroll down in index.html to see where the bxslider has been activated (directly under the JavaScript imports). This is where you can customize the specific settings for each slider instance. To learn more about how to do this, visit the link below.
Source: http://bxslider.com/

4. Custom tab script (tabs.js)
This is a custom script written specifically for Easy Living. Its purpose is to make the tab system in the “Faq” section function. It is well commented and fairly simplistic.

5. Isotope (jquery.isotope.min.js)
Isotope is a jquery plugin used to layout and filter items. In Easy Living, it is used on the property listing masonry page.
Source: http://isotope.metafizzy.co/

6. Nouislider (jquery.nouislider.min.js)
The nouislider script is used specifically for the price range slider within the filters on the home page and home page map.
Source: http://refreshless.com/nouislider/

7. Map (map.js)
map.js is a custom written script that interacts with the Google Maps API. This script is used to display any section of the template that involves a map.

8. Map one pin (map-one-pin.js)
This script is almost identical to map.js, however it is used to display a map with only one pin. For example, it is used on the contact page.

9. Respond (respond.js)
Respond script allows Easy Living to display properly in older browsers while still utilizing HTML5 tags.

PSD Files

Easy Living includes 4 PSD files:

  • – Home Horizontal Filter
  • – Listing Grid Sidebar
  • – Property Single
  • – About

If you would like the PSD files for every page included in the Easy Living template, you can purchase the full PSD package
on Themeforest at: Easy Living PSD

Source & Credits

Proxima Nova
Open Sans

We make websites that allow room for growth and customization. Have a project in mind? Get in touch with us today.

CONTACT US
2017 Rype Creative.