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.
FULL PAGE LIST:
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:
// content goes here
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:
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:
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.
1. JQuery (jquery.js)
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.
3. Bxslider (jquery.bxslider.min.js)
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.
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.
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.
Easy Living includes 4 PSD files:
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
We make websites that allow room for growth and customization. Have a project in mind? Get in touch with us today.