A collaborative prototyping system and boilerplate for design studios to rapidly explore web application design in its native environment.

It's based on NodeJS, ExpressJS, Bootstrap, and the Jade templating language.

NodeJS 0.6.x
Expressjs 2.x
Jade

Install nodeJS on a server or computer that needs to host the project. It will come with NPM. https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

Checkout this project from github with git clone --recursive [email protected]:readywater/Tributary.git (Recursive is there to pull from the bootstrap link)

Install expressJS and Jade. npm install express jade less

If you are using this tool in a studio setting, it is best to set up his project on the studio's server. It can be easily hosted on your own computer as well. To start the application, use terminal to go to the folder with Tributary, and type node app.js & To stop node, use kill $(ps aux | grep -i node | awk '{print$2}')

All projects are based on Jade and partials. CSS, images, and js files are placed in the "public" folder. All files placed in the public Parts of a large application are divided into folders. For example

project
	- index.jade
	- layout.jade
	- header.jade
	- global
		- header
		- footer
	- pages
		- home
		- profile
	- patterns
		- mixin
		- calendar
		- profile

The project level contains a few key files for structuring the project, and various sub folders.

####index.jade The overall structure and skeleton of the site. It should include objects from the global folder.

Structures the top level HTML information. This should mostly remain static.

Contains all header information, including CSS and Javascript linkings.

The pages folder contains each individual page and version of that page.

Each folder will have an index.jade file. Index files should never have content based information. They should mostly be used for managing linked files, includes, and any kind of iteration.

Structure and template for a page is defined in this file. Not all the styling of the page needs to be here, but content buckets, partial placement, and similar should be here.

This folder is the same as the pages folder, except that it organizes global elements such as navigation.

Patterns are reused elements throughout the site that can be included by either jade include or mixin functions.

This is a catch all for consistently used mixins. These are reusable patterns that can exist throughout the site. They can generally be used by adding include ../../patterns/mixin, followed by mixin example() to import that mixin.

MORE TO COME

Let's say we have three primary users categories.

Designer

Documentation responsibility

Technical responsibility

Everyone is a designer. Designers can be in charge of different parts of the system, and should be generally familiar with how HTML works, how twitter bootstrap works, and how jade translates into html. However, some designers have more responsibility than others.

This is the person or people who are responsible for the index.jade files and the overall structure. They need a level of technical expertise in order to navigate the complexities of Jade recursion. I've tried to hide of the complexity as possible but a few basic pieces of knowledge are required. These include an understanding of:

Unix file systems
Recursion and linking
Javascript (mostly jQuery)
Twitter bootstrap and LESS/CSS

This person is responsible for recording both internal and external documentation. The entire site can be rendered as a PDF via the localhost/renderPDF. This document structure is defined by the sitedoc.txt file. A simple site might look like this:

TBD

This will be up shortly, needs to await a publication thingy.