Tributary
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.
Requirements:
NodeJS 0.6.x
Expressjs 2.x
Jade
How to install me
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 git@github.com: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}')
How to use me
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
Project folder
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.
layout.jade
Structures the top level HTML information. This should mostly remain static.
header.jade
Contains all header information, including CSS and Javascript linkings.
Pages folder
The pages folder contains each individual page and version of that page.
index.jade
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.
template.jade
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.
Global folder
This folder is the same as the pages folder, except that it organizes global elements such as navigation.
Pattern folder
Patterns are reused elements throughout the site that can be included by either jade include or mixin functions.
mixin.jade
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
How to use me in teams
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.
Technical responsibility
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
Documentation responsibility
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
Why make this?
This will be up shortly, needs to await a publication thingy.