Office365 Home Premium -- primitive man's daily life with Office365

Little stories about a primitive man family that overcame difficulties with the help of Office365 Home Premium in daily life. Showing the new features of the product. The site is constructed with Backbone Marionette and applies responsive design. It has been tested on most modern browsers like Chrome( desktop and android devices), Internet Explorer10/11( desktop and windows phone ), firefox and Safari( desktop and iPad/iPhone ).

See the official website here.

Prerequisite

• Brunch.io v1.7.13
• Compass v0.12.2
• Modernizr v2.6.2 (custom build for media query)
• Backbone v1.0.0
• Underscore v1.5.1
• Backbone Marionette v1.1.0
• jQuery v1.7.2
• jquery.mousewheel.js v3.1.3
• jquery.scrollTo.js v1.4.6
• jquery.easing.js v1.3
• jquery.event.mousestop.js v0.1.1
• jquery.hammer.js v1.0.6dev
• jquery.bgpos.js (bug fixed on IE11)
• paper.js v0.9.15
• easeljs v0.6.1
• tween.js

Getting started

###step1 Getting node.js if you don't have one.

###step2 Installing brunch, the project building tool.

sudo npm install brunch -g

###step3 Cloning the repository.

git clone https://github.com/McDo/office365.git
cd ./office365

###step4 Installing Compass, an open-source css authoring framework, and compiling all sass files to css.

cd ./compass
compass watch

###step5 Building the project ( minify and concatenate js, css files, etc. ) and starting the local server. Go to root directory of the project, and

brunch watch --server -P

or

npm start

Accessing it from http://localhost:3333 and have fun with it.

Project Structure

The project is built with an AppController ( extends from Backbone Marionette Controller ) and several Views ( extend from Backbone Marionette ItemView ). The View controls behaviors of the attached DOM element and all of its sub-elements, and the AppController is in charge of deciding which View is about to show up depends on user interactions and change the routes. Although the project doesn't have any backend data, it's still cool to construct it in a MVC style with Backbone and Marionette that we can easily add or modify a view without interferer other part of the code.

Here is the full structure of the code:

What if confused with the code ...

I've tried my best to annotate the code for some time. But maybe you would find some parts are hard to understand still( sorry about that but I'm not a native english speaker after all ). So if you find any issue with the comments or the code, please send me an email or use the issue tracker.

Thanks.

License

Copyright (c) 2013-2014 McDo