Learning to prototype in code pt 2: setting up
Another quick and dirty post in my "learning to code for prototyping" series.
In the last post, I described the options I was exploring for my jaunt into prototyping in code.
- I wanted a responsive, grid-based HTML/CSS framework.
- I wanted includes - so I can make site-wide changes to shared chunks of code easily
- And I want a way of showing multiple page states in one page and across the prototype. (like, logged-in / logged-out)
In this post, I'll show you how I set up my bare-bones environment to do all that.
TL;DR version:
- Download bootstrap, inc.js, and polypage.
- Mash them together.
- It works: http://www.oxox.co.uk/ResponsiveProto/basic.html
Long version:
1. Set up the HTML and CSS framework.
I went with Bootstrap 2.0 from Twitter http://twitter.github.com/bootstrap/ for my HTML / CSS framework. It's responsive, and pretty enough to give me satisfying results out-of-the-box.
Go to the Bootstrap site and get the ZIP, which has the basic js, images, and css you need, but no HTML.
I snaffled Twitter's example fluid page at http://twitter.github.com/bootstrap/examples/fluid.html and took that HTML to use as my starter page, as well as a bare-bones page for the example for this post.
The example page has paths to the js and css files set up. I edited these to get rid of the "assets" path and stripped it down to a bare page.
2. Download jQuery
We'll need jQuery to power inc.js and other clever stuff later on.
- Get jQuery http://jquery.com/ and put it in your js folder.
- Add a link to jquery to your HTML (if you aren't using the example HTML). I put it before the other js scripts, I think that is usually important.
3. Set up includes with inc.js
NOTE: this method isn't easily testable on Chrome due to the security model. Use Firefox or Safari for local testing. The includes should then work on the live site if you upload it.
Go get the code from the inc.js site and install in the page, after the jQuery link.
inc.js has lots of cool features, but this first time out I'm just trying the basics. I just want to load a blob of HTML from one page into another. Down the line, this will help me manage large complex prototypes by reusing chunks of content where possible.
Adding an include is easy. If you wanted a footer:
- Create a new HTML page named footer.html.
- Fill it with footer HTML
- Add the include to your main page: <p class="inc:footer.html">Ruh-roh! No include loaded</p>
The error message above will only appear to people if the include script fails for some reason.
4. Setting up polypage.
Go get polypage from github (instructions are included, and add at least the basic and GUI polypage scripts to your page. Don't forget to initialise the script - look for the bit of code near the first <body> that says document.ready - and snaffle that.
Set up a polypage state like this:
Thing to be shown
<p class="pp_message">The content</p>
Control to show hide it (I've had to strip the HTML because posterous is being a little oik about it)
a href="#pp_toggle_message"
5. using polypage and inc.js in combination
You can use polypage to show/hide includes, and you and put polypage inside includes too.
For instance, use polypage to load the footer.html:
<p class="pp_include inc:footer.html">Footer goes here</p>
Voila! We now have includes and states working, and can start prototyping in earnest.
Coming in part 3: prototyping in earnest.
Further resources:
- a inc. alternative, jQuery Include
- great presentation from UX Bootcamp about code prototyping, more focussed on design.
