Page Comparison

...

1. Add the UIO HTML snippets to your project's HTML pages
2. Add the UIO Javascript snippets to your project's HTML pages
3. Tweaking your site's styling and structure to work with UI Options

Part 1:

...

Preparing

1. Before beginning, know where your project files will reside. We will build Infusion (which contains UI Options) and copy its files to your project directory.In your project directory, create a sub- directory called "temp". We will use this to hold intermediate files which can be deleted once Infusion and UI Options is built.
2. Install node.js by following the instructions on their website. node.js will give you access to npm which is a repository for Open Source projects and libraries. This is how we will get Infusion and the latest UI Options.
3. In your project directory, create a sub-directory called "temp". We will use this to hold intermediate files which can be deleted once Infusion and UI Options is built.
4. Now open a command line and change directories so you are located in the temp sub-directory in your project directory.
   1. On Windows:
      1. Launch Powershell: Go to Start, then "Run". Type "powershell" into the run text field and press Enter.
      2. In the Powershell window, change directories to your project by typing "cd $Desktop\my-project\temp" (without the quotes) and pressing Enter.
   2. On Mac:
      1. Launch Terminal: Go to Spotlight Search (the magnifying glass in the top-right corner), search for "Terminal", and then press Enter.
      2. In the Terminal window, change directories to your project by typing "cd ~/Desktop/my-project/temp" (without the quotes) and pressing Enter.
5. Install grunt by typing in the command line "npm install -g grunt-cli"
   
   1. On MacOS, if you get an "Error: EACCESS: Permission denied..." message, you may have to run "sudo npm install -g grunt-cli" instead. You will have to enter your computer password to proceed with installing grunt.
6. You are now ready to proceed to Part 2.

Sample Mac OS Command Line:

mkdir ~/Desktop/my-project/temp
cd ~/Desktop/my-project/temp
sudo npm install -g grunt-cli

Part 2: Getting and Building Infusion

Continuing from Part 1.

1. Get Infusion by typing "npm install infusion" in the command line and pressing Enter. The process will run and a new directory called node_modules will be created as a result.
2. Using the command line, change directory into the infusion directory that's been created within node_modules.
   1. On Windows type: "cd node_modules\infusion" (without quotes) and press Enter.
   2. On Mac type: "cd node_modules/infusion" (without quotes) and press Enter.
3. Now build Infusion by typing "npm install" (without quotes) and press Enter. Once that is done, type "grunt" without quotes and press Enter.The. This will create a "products" directory in the Infusion directory.
4. Within the my-project/temp/node_modules/infusion/products directory, there is now a ZIP file called "infusion-all-2.0.0.zip" (the exact filename may be a little different depending on the release of Infusion available at the time you download it). Unzip this file using your preferred Unzipping program.
5. Now copy (or move) the resulting "infusion" directory into your project's root directory.

Sample Mac OS Command Line:

mkdir ~/Desktop/my-project/temp
cd ~/Desktop/my-project/temp
sudo npm install -g grunt-cli
npm install infusion
cd node_modules/infusion/
npm install
grunt
cd products
unzip infusion-all-2.0.0.zip
mv infusion ~/Desktop/my-project/

At this point your project directory should look something like this:

my-project/
     |- temp/
     |    |- node_modules/
     |         |- ...
     |         |- infusion/
     |               |- ...
     |               |- products/
     |               |- ...
     |- infusion/

You can now delete the directory "temp" contained inside your project directory. It's no longer needed.