ACTIVO / try it

%comment{style: 'display:none' }
  %p Hello! Im using a javascript library to convert HAML to HTML here (you can find it at http://github.com/creationix/haml-js). I found some differences comparing it with the original haml rails converter. For example, instead of ":href => '#'" we have "href: '#'".
  %p Im using Codemirror for the syntax highlighting. I havent found anywhere the syntax files for HAML language an hadnt the time to make one yet. So for now Im using the Python module written by Timothy Farrell.

#container
 #box
 .block
 .content
 %h3 Try activo here!
 .inner
 %p.big
 This page was written in HAML! You can change the code by clicking on the button on the left corner of the toolbar.
 %p.bigger
 Activo is a theme written in SASS. Those haml templates you see here can be generated automagically using the Web-app-theme generators. Web-app-theme is a rails plugin that you can use to generate a complete web application layout. Activo is a theme for this plugin.
 %p.big
 But it is also something more! It offers you the styles you need to integrate with another cool gem that lots of people use - Formtastic! Formtastic makes it easier to create HTML forms in your Rails applications.
 %p.big
 Activo also has the styles for the Attrtastic gem. Attrtastic is similar in usage to formtastic and allows you to easily display AR record information (it helps in the creation of show and index pages).
 %p.big
 Do you want more? Jon Wood made helpers for menus, breadcrumbs, and controls. Check out:
 %a{href: "http://github.com/jellybob/activo-rails/blob/master/lib/activo-rails/helper.rb"} http://github.com/jellybob/activo-rails/blob/master/lib/activo-rails/helper.rb
 .flash
 .message.notice
 %p This is a work in progress!
 #box
 .block
 .content
 .inner
 %h3 Credits
 %p
 %a{href: "http://pixelmatrixdesign.com/uniform/"} Jquery Uniform
 \ - Uniform look and feel of form elements between browsers
 %p
 %a{href: "http://glyphish.com/"} Glyphish iconset
 \ - Icons of the top-right corner
 %p
 %a{href: "http://gentleface.com/free_icon_set.html"} Gentleface Wireframe Toolbar Icons
 \ - Logout icon
 %p
 %a{href: "http://www.josbuivenga.demon.nl/museo.html"} Museo font
 \ - Sans 500, Sans 500 Italic, 700
 %p
 %a{href: "http://dribbble.com/"} Dribbble.com
 \ - Great place to find inspiration
 %p
 %a{href: "http://p.yusukekamiyamane.com/"} Fugue icons
 \ - Iconset by Yusuke Kamiyamane
 %p
 %a{href: "http://mynameisraj.com/"} Raj Ramamurthy
 \ - Made the dropdown menu and helped me with the buttons!
 %p
 %a{href: "http://gravityblast.com/"} Andrea Franz
 \ - He is the author of the web-app-theme rails plugin
 %p
 %a{href: "https://github.com/creationix/haml-js/"} Haml-Js
 \ - The haml to html converter I used on this demo
 %p
 %a{href: "http://codemirror.net/"} Codemirror
 \ - The syntax highlighter I used on this demo