Getting Started
===============

What's inside
-------------

* **dist**
    Production ready application files.
* **examples**
    Working examples demonstrate various features of the application.
* **libs**
    External Javascript libraries used in development.
* **src**
    Main javascript source files.
* **test**
    Test folder including data used in development.
* **Gruntfile.js**
    Grunt build file.
* **package.json**
    node.js project file.
* **npm-shrinkwrap.json**
    node.js package dependencies file.
* **docs**
    Documentation includes html and pdf format
* **designer**
    Source files for designer administrator web app

Using Designer app
------------------

See :ref:`Designer`

Using examples files
--------------------

1. Prepare photo assets. It's a good idea to resize or crop each photo to a suitable size to improve rendering performance.
2. Look for *examples* directory and place your photos in *assets* directory. Photo assets should be categorized and placed in its corresponding folders.
3. Pick the html file that suits your need, for example *base.html* has the most simple configuration to get you started
4. Modify the html file with your own data. For more detail see :ref:`Usage` and :ref:`Markup Guide`

App Structure
--------------

::

  assets/
    category1/
    category2/
    category3/
  css/
    fonts/
    pc3d.min.css
    style.css
    pc3d.light.min.css
    style.light.css
  js/
    pc3d.min.js
  index.html

* *assets:* Contain all photo items

* *css:* Application stylesheet folder, contains default dark and light theme.

  * *fonts:* Custom icon fonts folder
  * *pc3d[.light].min.css:* Minimized application styles
  * *style[.light].css:* General and non-application specific style

* *js:*

  * *pc3d.min.js:* Main minimized Javascript file

* *index.html:* Main html file

Manually setup 
--------------

Alternatively, setup your own directory structure as in the guideline above. 
The two most important set of files are CSS and JS files can be found in *dist* folder in download package. 
Copy and link them as stylesheet sources and script sources in the main html file. Then customize html data and add a bootstrap code to initialize the gallery.