Source codes for various themes offered by Nestmob.
- You first need to let us know that you'd like to contribute, so we could create a directory for your theme implementation. Please contact kyu.lee@nestmob.com.
- We will create a new directory under
/themes/
, with a theme ID assigned to you, with very simple default implementation. - When you see the directory (we'll let you know), fork this project and work on your theme under
/themes/[themeid]
. - Submit a pull request.(please don't modify any files that are not in
/themes/[themeid]
) - Once we go through some testing, we'll publish it for the world to use.
After forking this repo with your theme directory, let us know about your forked repository. We will assign you a unique url which can be hooked up with github's commit hooks, so our testing environment will be updated with your latest comitted code.
The testing server is at http://themedev.nestmob.com.
Once you register with us as a developer, you'll get an account at the above URL, and have access to your theme currently in dev.
You must follow our standards in order to be compatible with our system.
When a developer is assigned with a theme, Nestmob will create this theme directory for you.
/themes/31f2248a-48c4-4537-b5dc-b96ffdf99107 # `theme_id` generated for you
METADATA/ # Contains metadata, thumbnails, original designs, etc
design.pdf # Original design from designer (or you could design on your own as well)
package.json # JSON data which describes this theme
preview.jpg # Full sized 950px(W) by ?px(H) preview of this theme
thumbnail.jpg # Thumbnail sized 280px(W) by 365px(H) preview of this theme
default_assets/ # All assets included by NestMob platform itself
fonts/ # Font files for your theme
img/ # Image files for your theme
style.css # CSS file for your theme
theme.html # The main html file
- Google Map - At render, an element with id="google_map" will be filled with a google map. All you have to do is define the width and height and we take care of the rest.
-
Twitter's Bootstrap(v2.0.3) is enabled by default.
-
Every css classes have to have "ig-" prepended to their names to avoid any possible conflict with NestMob's classes.
- eg. .ig-foo instead of .foo
-
No override of Bootstrap class is allowed.
-
In case you need to override a class from Bootstrap, simply use !important delarations (Your !important overrides our's).
<div class="well ig-extra"> content </div>
.ig-extra{
width:220px !important;
background-color:red !important;
}
- Currently, no javascripts are allowed in NestMob templates.
App.html is a local webapp forked from NestMob's infograph editor which allows the designers and coders to test their templates before submission.
Directory Structure
/kit : All your assets such as images, fonts, and style.css belong here.
/designs : Designs in PDF format for reference
/lib : scripts/css that NestMob runs on (it is very important that you do not
modify/delete any files inside /lib directory).
/themes : Themes that NestMob has deployed / is developing. Usually, the original
design is contained in /designs directory in PDF format.
app.html : executable webapp. Contains a sample template initially.
Instruction
-
Open up app.html with a browser and a text editor of your choice.
-
The script tag #ig-default contains a sample template. Please review carefully how images paths are set, how gallery is embedded, and how google map can be embedded.
- All image paths are required to be in
{{theme_path}}img/IMAGE-NAME.EXT
where IMAGE-NAME is the name of the image and EXT is the image type. - To embed a gallery, all you have to do is to place
<div id="ig-gallery"></div>
tag where appropriate and add css rules as needed. - Embeding Google Map is also very simple. Place
<div id="google_map"></div>
tag where appropriate and set the preferred width and the height.
- All image paths are required to be in
-
Review the contents in /kit directory which contains all the assets required for the sample. Note that style.css file is required and will be automatically loaded by the app.html.
-
Within style.css, you can review how images and fonts are loaded.
-
Once the review is done, delete the followings
- app.html : Everything inside
#ig-default
tag - style.css : Contents inside the file. As you will define your own css rules here.
- Every image files in kit/img.
- Every fonts in kit/fonts
- app.html : Everything inside
-
You can do all your regular html stuff inside #ig-default tag in app.html. All css stuff in kit/style.css. All images inside kit/img. All font files in kit/font. Define fonts in kit/style.css.
-
Be creative.
Parameters
important : it is very important that "&" without quotation is prepended to Description and Feature parameters.
Price {{price}}
Rooms {{rooms}}
Description* {{&description}}
Features* {{&feature}}
Street 1 {{street_1}}
Street 2 {{street_2}}
City {{city}}
Postal Code {{postal}}
Province/state {{province}}
Country {{country}}
storey {{storey}}
Property Type {{property_type}}
Property Style {{property_style}}
Rooms {{rooms}}
Land Size X {{land_size_x}}
Land Size Y {{land_size_y}}
# of Bath Rooms {{bathrooms}}
Parking {{parking}}
Age/year Built {{age}}
Heating {{heating}}
Basement {{basement}}
Tax {{tax}}
Facing {{facing}}
Contact {{contact}}
Think of below block as a loop. Basically, for N number of room details (eg. Master Bedroom, 2 floor, 20ft by 20ft is one set of room detail), below block will append to itself N times.
{{#room_details}}
{{room-name}} //Name of the room eg. Master Bedroom, Jr Bed.
{{room-storey}} //Floor that the room is on.
{{room-dimension-x-ft}} //Length of the room in ft.
{{room-dimension-y-ft}} //Width of the room in ft
{{room-dimension-x-m}} //Length of the room in m.
{{room-dimension-y-m}} //Width of the room in m.
{{/room_details}}