This is what I’ve been doing for the last few days, and its been a real pleasure and learning experience…
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.
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
