hello.haml

/ HAML's syntax sucks for HTML5 data attrs when used as extensively
/ as they currently are by trendy JS frameworks.

#content{ :'data-role' => 'application' }
  #header
    ul.navigation{ :'data-role' => :toolbar }
      li.navigation{ :'data-transition' => :fade } Link 1
      li.navigation{ :'data-transition' => :bounce } Link 2
  #main{ :'data-role' => :window }
    Hello World
  #sidebar { :'data-role' => :verticalMenu,
    :'data-transition' => :slideOut,
    :'data-tour-mode' => 0 }
  #footer

/ What if we add a data token?
#content%role=application
  #header
    ul.navigation%role=toolbar
      li.navigation%transition=fade Link 1
      li.navigation%transition=bounce Link 2
  #main%role=window
    Hello World
  #sidebar%role=verticalMenu%transition=slideOut%tour-mode=0
  #footer