Setup

1. Install Required Software

• xCode
  • If you are using xCode on Lion, after you install it you will have to go to "Preferences > Downloads", and click the install button beside "Command Line Tools". This will install the tools required to run the make file.
• nodejs (http://nodejs.org/)
• Git command line application (http://code.google.com/p/git-osx-installer/downloads/list)
• Github App (Optional)
• Less App (Optional)

2. Repository Setup (Git)

You can setup your repository using either the command line or the Github app.

Command line (Skip this if you don't want to use command line)

These commands will create two folders, one for the master branch and one for the gh-pages branch (this is where the public Github pages live). This was you can make changes to the master branch, compile them using the make file, and push changes directly to the gh-page branch.

mkdir institutional-framework
cd institutional-framework
mkdir master
mkdir gh-pages
cd master
git clone [email protected]:lane/institutional-framework.git .
git checkout -b *name*-dev (ie: lane-dev)
npm install -g less jshint recess uglify-js
make ghpages

Github app (Skip this if you're using command line)

If you use the github app, you will have only one folder and need to switch between your development branch and the gh-pages branch.

• On the Github home screen select "ualberta" from the left menu.

• Find the ualberta/institutional-framework repository and choose "Clone to Computer"

• Pick the location you would like to clone the repository to.

  • Command line stuff, Lane can help if you need it:
    In terminal, navigate to the directory where the repository lives, and run these commands:

      npm install -g less jshint recess uglify-js http-server
      make ghpages
    

• Back in the Github app, click the branches button on the left

• Create your own development branch by clicking on the plus sign to the right of the master branch and typing a name (ie: lane-dev).

  • You will create a dev branch when you go to modify content in the master branch. Once changes are done and confirmed working, you will merge your dev branch back into the master branch, and delete your dev branch.

• Switch to the branch you created.

Your folder structure should be as follows:

github-root\
     |
     -------- institutional-framework\                  *** your dev / master branch ***
     |
     -------- institutional-framework-pages\            *** clone of gh-pages, compiled from master branch
                                                            preview all changes here ***

3. Editing LESS (CSS)

Do not edit CSS files as they will just get overwritten. The CSS files used within the framework are compiled from the LESS files located in the "less" folder in the master branch. You can compile the LESS files automatically by using a GUI app, or a command line compiler.

Command Line (Skip this if you don't want to use command line)

After you have modified any less or javascript files, you can run any of the three commands below from the root of the master branch to compile the code.

make                                  ** Runs jshint on js folder, compiles less into /compiled folder, minifies js
make less                             ** Compiles the less into css in the /compiled folder
make ghpages                          ** Compiles less, minifies js, copies html files to ../institutional-framework-pages/ folder

Less App (Skip this if you're using command line)

You can use the LESS app to compile the less files into a specified directory. You only need to compile the /less/ualberta.less file because it imports in all of the required files. When using the LESS app make sure that is the only file checked or thing will get really messy, really fast.

Setup the less file to compile into the ../institutional-framework-pages/css/ directory.