OProto uses the best open source tools to make static web development as fast as possible.

OProto is a barebones skeleton of a basic website for the purpose of bootstrapping a static website or prototype an application. OProto uses a range of web development frameworks to speed up the process of creating static websites, namely bootstrapping, managing pages, partials, states and styles.

Problems addressed by OProto

Template and Content Management

Experienced front-end developers can do a lot by hand very quickly. We're smart enough to know that markup and content should be as DRY as possible. Sharing common page elements like headers and footers as included templates makes a lot of sense but can quickly get messy when you want to pass variables around, use a slightly different template for one page but not another, and can also just be a chore to set-up. Also, having local paths ending in .html or .php is just… embarrassing.

OProto uses StaticMatic to alleviate all of these symptoms. An additional dose of Haml makes marking up a document simple and fun again. Side effects include glee, bliss and a rapidly-developing sense of productivity.

We've taken some cues from Paul Irish & Co's fantastic HTML5 boilerplate and integrated it into the starter template files.

CSS is too dumb to be productive

Lorin Tacket nails it: CSS is a stupid language. That is, while its certainly the best way to style web content, it lacks some of the basic features of a scripting language most developers are used to: variables, basic functions and simple math. This means that creating CSS from scratch is inevitably a slow process.

Sass provides all these features and more: nesting, mixins (think of snippets of CSS as plugins), inheritance, and a more simplistic syntax. StaticMatic runs the Sass watcher on your stylesheets directory and compiles pure CSS every time you save a change.

Finally, Compass provides ports of CSS frameworks (and allows you to roll your own) like Blueprint, which takes the hard work out of accomplishing tasks like creating a layout grid. Its CSS3 helper might very well be the only way to use vendor-specific CSS3 properties without feeling like your repeating yourself repeating yourself. Impress your friends as one line of

.crazy
  +border-radius(1px 3px 5px 7px)

magically becomes

.crazy {
 -webkit-border-radius: 1px 3px 5px 7px;
 -moz-border-radius: 1px 3px 5px 7px;
 -o-border-radius: 1px 3px 5px 7px;
 -ms-border-radius: 1px 3px 5px 7px;
 -khtml-border-radius: 1px 3px 5px 7px;
 border-radius: 1px 3px 5px 7px; }

in the blink of an eye!

Full Technology Overview

• Ruby on Rails - That thing you heard about
• StaticMatic - Static websites, the modern way
• Compass - Compass provides ports of the best of breed css frameworks that you can use without forcing you to use their presentational class names.
• Haml - Lean, poetic markup
• Sass - Super sexy css
• Blueprint - Blueprint gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
• Fancy Buttons - Fancy CSS Buttons
• jQuery - Our Savior

Getting Started with OProto

Assuming you have Git, Rails and Ruby Gems (staticmatic should take care of haml/sass, compass)…

$ gem install fancy-buttons
$ gem install staticmatic --pre

… clone this project…

$ git clone git://github.com/ericdfields/OProto.git my_project_name

… and run staticmatic on your project

$ staticmatic preview my_project_name

This will launch a web server for you to preview your site at http://localhost:3000. To kill the server, simply hit ctrl+C.

OProto Source Overview

This is what you just checked out:

• config - a few configuration files.
• site - mostly where your output files will live if you choose to export your project
  • images - image resources
  • javascripts - Javascript resources
  • stylesheets - stylesheet resources
• src - where you'll do all your real work
  • helpers - [http://staticmatic.rubyforge.org/helper_central/](StaticMatic Helpers)
  • layouts - base templates for your pages
  • pages - individual page content, inherits a template, haml-formatted
  • partials - reusable blocks of code used in both pages and layouts
  • stylesheets - sass-formatted stylesheets

Templating with OProto

Creating pages for your site with OProto is as simple as adding a new haml file to the src/pages directory. index.haml will live at /. special.haml will live at /special. special/event.haml will live at /special/event.

By default, all pages use the layouts/application.haml layout template. You can use custom layouts by defining the @layout variable at the top of your page. For example, in special.haml:

- @layout = "special"

/special now uses the layout template layouts/special.haml.

Similarly, you can set up variables in your layout templates or partials and define them in a page:

- @pageTitle = "Special Event Page Title"
- @h2 = "Special Event Headline"
- @h3 = "Special Event Subheadline"

Will help us set the