plinth 0.0.1.beta.1

data/app/views/parts/base/_form_example.haml

@@ -0,0 +1,26 @@
+%form{:action => "/test-endpoint", :class => "formtastic entry", :data => { :"forms-success-content" => " ",  :"forms-success-replace" => ".test-content", :forms => "/test-endpoint" } }
+  %fieldset.inputs
+    %ol
+      %li.string.input.required.stringish 
+        %label{:for => "test_entry_first_name"}
+          First name
+          %abbr{:title => "required"} *
+        %input{:id => "test_entry_first_name", :maxlength => "255", :name => "entry[first_name]", :type => "text"}
+      %li.string.input.required.stringish
+        %label{:for => "test_entry_last_name"}
+          Last name
+          %abbr{:title => "required"} *
+        %input{:id => "test_entry_last_name", :maxlength => "255", :name => "entry[last_name]", :type => "text"}
+      %li.email.input.required.stringish
+        %label{:for => "test_entry_email"}
+          Email
+          %abbr{:title => "required"} *
+        %input{:id => "test_entry_email", :maxlength => "255",  :name => "entry[email]",  :type => "email"}
+
+  %fieldset.actions
+    %ol
+      %li.support.action
+        :markdown
+          By submitting this test you agree to the [Terms and Conditions](/terms-and-conditions) and to share your information with us.
+      %li.action.button_action
+        %button.green.btn{:name => "button", :type => "submit"} Submit Test

data/app/views/parts/base/_form_example_horizontal.haml

@@ -0,0 +1,26 @@
+%form{:action => "/test-endpoint", :class => "horizontal formtastic entry", :data => { :"forms-success-content" => " ",  :"forms-success-replace" => ".test-content", :forms => "/test-endpoint" } }
+  %fieldset.inputs
+    %ol
+      %li.string.input.required.stringish 
+        %label{:for => "test_entry_first_name"}
+          First name
+          %abbr{:title => "required"} *
+        %input{:id => "test_entry_first_name", :maxlength => "255", :name => "entry[first_name]", :type => "text"}
+      %li.string.input.required.stringish
+        %label{:for => "test_entry_last_name"}
+          Last name
+          %abbr{:title => "required"} *
+        %input{:id => "test_entry_last_name", :maxlength => "255", :name => "entry[last_name]", :type => "text"}
+      %li.email.input.required.stringish
+        %label{:for => "test_entry_email"}
+          Email
+          %abbr{:title => "required"} *
+        %input{:id => "test_entry_email", :maxlength => "255",  :name => "entry[email]",  :type => "email"}
+
+  %fieldset.actions
+    %ol
+      %li.support.action
+        :markdown
+          By submitting this test you agree to the [Terms and Conditions](/terms-and-conditions) and to share your information with us.
+      %li.action.button_action
+        %button.green.btn{:name => "button", :type => "submit"} Submit Test

data/app/views/parts/base/_form_group.haml

@@ -0,0 +1,10 @@
+%form
+  .row
+    .mother-eight.column
+      .row.collapse
+        .mother-six.column
+          %input.prefix{:type=>"text"}
+        .mother-two.column
+          %input.orange.small.green.btn.suffix{:type=>"submit", :value => "Submit"}
+
+

data/app/views/parts/base/_form_location.haml

@@ -0,0 +1,3 @@
+.location.input
+  %input.location-field{ :placeholder=>"Town, City or Postcode", :type=>"text"}
+  %a.ss-icon.locate{:href=>"#locate"} locate

data/app/views/parts/base/_labels.haml

@@ -0,0 +1,5 @@
+%a.label A Label
+%a.label.orange A Label
+%a.label.blue A Label
+%a.label.green A Label
+

data/app/views/parts/base/_labels_sizing.haml

@@ -0,0 +1,3 @@
+%a.blue.label.shout.small A Label
+%a.blue.label.shout.medium A Label
+%a.blue.label.shout.large A Label

data/app/views/parts/base/_list.haml

@@ -0,0 +1,10 @@
+%ul
+  %li
+    %a{:href=>"my_url"} Item 1
+  %li
+    %a{:href=>"my_url"} Item 2
+%ol
+  %li
+    %a{:href=>"my_url"} Item 1
+  %li
+    %a{:href=>"my_url"} Item 2

data/app/views/parts/base/_list_action.haml

@@ -0,0 +1,5 @@
+%ul.action-list
+  %li
+    %a{:href=>"my_url"} Item 1
+  %li
+    %a{:href=>"my_url"} Item 2

data/app/views/parts/base/_list_nav.haml

@@ -0,0 +1,12 @@
+%nav
+  %ul
+    %li
+      %a{:href=>"my_url"} Item 1
+    %li
+      %a{:href=>"my_url"} Item 2
+%nav
+  %ul.action-list
+    %li
+      %a{:href=>"my_url"} Item 1
+    %li
+      %a{:href=>"my_url"} Item 2

data/app/views/parts/base/_list_unset.haml

@@ -0,0 +1,10 @@
+%ul.unset-list
+  %li
+    %a{:href=>"my_url"} Item 1
+  %li
+    %a{:href=>"my_url"} Item 2
+%ol.unset-list
+  %li
+    %a{:href=>"my_url"} Item 1
+  %li
+    %a{:href=>"my_url"} Item 2

data/app/views/parts/base/_type_body.haml

@@ -0,0 +1,2 @@
+%p Standard Paragraph - Lebowski ipsum I didn't blame anyone for the loss of my legs, some chinaman in Korea took them from me but I went out and achieved anyway. Dolor sit amet, consectetur adipiscing elit praesent ac magna justo. 
+

data/app/views/parts/base/_type_headings.haml

@@ -0,0 +1,5 @@
+%h1 Heading 1
+%h2 Heading 2
+%h3 Heading 3
+%h4 Heading 4
+%h5 Heading 5

data/app/views/parts/base/_type_helpers.haml

@@ -0,0 +1,3 @@
+%p.standout Standout text -  Lebowski ipsum I didn't…
+%p.secondary Secondary text -  Lebowski ipsum I didn't…
+%p.support Support text -  Lebowski ipsum I didn't…

data/app/views/parts/base/_type_links.haml

@@ -0,0 +1,9 @@
+%a{href: "#my_link"} Text link
+%br
+%a.is-active{href: "#my_link"} Text link hover/active
+%br
+%a.prominent{href: "#my_link"} Prominent text link
+%br
+%a.prominent.is-active{href: "#my_link"} Prominent text link hover/active
+
+

data/app/views/parts/base/_type_shouts.haml

@@ -0,0 +1,4 @@
+.large.shout Large shout text
+.medium.shout Medium shout text
+.small.shout Small shout text
+.shout Shout Text

data/app/views/parts/grids/_example_layout_1.haml

@@ -0,0 +1,10 @@
+.container
+  .row
+    .mother-eight.column
+      %h1 My Title
+      %p.standout Curabitur dictum ultricies leo, sit amet pretium tortor lacinia at. Duis faucibus, nisi a hendrerit dictum, lorem tellus vulputate leo, mattis tincidunt ligula tellus nec tellus.
+  .row
+    .mother-two.column
+      My Nav
+    .mother-six.column
+      Stuff

data/app/views/parts/grids/_live_grid.haml

@@ -0,0 +1,29 @@
+.row
+  - 8.times do |n|
+    .mother-one.sister-one.baby-one.column
+      %p.example-highlight= n+1
+
+.row
+  .mother-one.sister-hide.column
+    %p.example-highlight 1
+  .mother-two.sister-one.baby-two.column
+    %p.example-highlight 2
+  .mother-five.sister-three.baby-two.column
+    %p.example-highlight 5
+
+.row
+  .mother-push-two.mother-six.sister-push-none.sister-four.column
+    %p.example-highlight 6
+    .row
+      .mother-eight.column
+        %p.example-highlight Nested Grid
+    .row
+      .mother-four.sister-four.column
+        %p.example-highlight 4
+      .mother-four.sister-four.column
+        %p.example-highlight 4
+
+.row
+  .mother-eight.column
+    %p.example-highlight 8
+

data/app/views/parts/modules/_alerts.haml

@@ -0,0 +1,11 @@
+%section.alert#info_box
+  %a{ :href => "#info_box", :class => "ss-icon close", :data => {:close => true}} close
+  %p Standard Information Flash Message
+%section.alert.success#success_box
+  %a{ :href => "#success_box", :class => "ss-icon close", :data => {:close => "#success_box"}} close
+  %p Success Flash Message
+%section.alert.error#error_box
+  %a{ :href => "#error_box", :class => "ss-icon close", :data => {:close => "#error_box"}} close
+  %p Error Flash Message
+
+

data/app/views/parts/modules/_nav_footer.haml

@@ -0,0 +1,34 @@
+%footer.footer
+  .container
+    %a{ :href=> '#footer-content', :class => "footer-tab ss-icon footer-up", :data => { :switch => true, :"switch-toggle" => true}} navigateup
+    %a{ :href=> '#footer-content', :class => "footer-tab ss-icon footer-down", :data => { :switch => true, :"switch-toggle" => true}} navigatedown
+  #footer-content.container
+    .mother-three.column
+      .row
+        .mother-two.sister-one.column.footer-logo-container
+          %a{:href=> "http://www.studentbeans.com" }
+            .footer-logo{ :role=>"img", :"aria-label"=>"Studentbeans.com"}
+      .row
+        %p.support © #{Time.now.year.to_s} The Beans Group. All Rights reserved.
+    .mother-two.column
+      %ul.support
+        %li
+          %a{ :href => "http://www.studentbeans.com/registration.html"} Join studentbeans.com
+        %li
+          %a{ :href => "http://www.studentbeans.com/national/offers/"} National Student Offers
+        %li
+          %a{ :href => "http://www.studentbeans.com/national/offers/top.html"} Top 20 Offers
+    .mother-two.column
+      %ul.support
+        %li
+          %a{ :href => "http://www.studentbeans.com/student101/"} Student 101
+        %li
+          %a{ :href => "http://www.studentbeans.com/student-money/"} Easy Money
+        %li
+          %a{ :href => "http://www.studentbeans.com/national/jobs-for-students"} Student Jobs
+    .mother-one.column
+      %ul.action-list.h5
+        %li
+          %a{ :href => "http://facebook.com/studentbeans", :class => "ss-icon ss-social"} facebook
+        %li
+          %a{ :href => "http://twitter.com/studentbeans", :class => "ss-icon ss-social"} twitter

data/app/views/parts/modules/_nav_header.haml

@@ -0,0 +1,18 @@
+%nav.nav-global
+  #nav-global-2.nav-collapse.baby-switch-content<
+    %ul.nav-items.collapse><
+      %li.is-active><
+        %a{:href => "#Item-1"} Item 1
+      %li><
+        %a{:href => "#Item-2"} Item 2
+      %li><
+        %a{:href => "#Item-3"} Item 3
+
+  .nav-mobile-switch.baby-only
+    %a{ :href => "#nav-global-2", :data => {:switch => true, :"switch-toggle" => true} }><
+      %span>< Show navigation
+    %i><
+    %i><
+    %i><
+
+

data/app/views/parts/modules/_panels.haml

@@ -0,0 +1,9 @@
+%aside.panel
+  %p My Panel Content
+%aside.panel.panel-left
+  %p My Panel Content
+%aside.panel.panel-right
+  %p My Panel Content
+%aside.panel.panel-center
+  %p My Panel Content
+

data/app/views/parts/modules/_tabs_minimal.haml

@@ -0,0 +1,11 @@
+%ul
+  %li
+    %a{ :href => "#sg-target1-3", :data => { :switch => true }, :id => "eg1-2"} Switch link 1
+  %li
+    %a{ :href => "#sg-target2-3", :data => { :switch => true }, :id => "eg2-2"} Switch link 2
+  %li
+    %a{ :href => "#sg-target3-3", :data => { :switch => true }, :id => "eg3-2"} Switch link 3
+%div.switch-content{:id => "sg-target1-3"} Switch content 1
+%div.switch-content{:id => "sg-target2-3"} Switch content 2
+%div.switch-content{:id => "sg-target3-3"} Switch content 3
+

data/app/views/parts/modules/_tabs_simple_group.haml

@@ -0,0 +1,11 @@
+%ul
+  %li
+    %a{ :href =>  "#sg-target1-3", :data => { :switch => true, :"switch-group" => "sg-group-1"  }, :id => "eg1-2"} Switch link 1
+  %li
+    %a{ :href => "#sg-target2-3", :data => { :switch => true, :"switch-group" => "sg-group-1"  }, :id => "eg2-2"} Switch link 2
+  %li
+    %a{ :href => "#sg-target3-3", :data => { :switch => true, :"switch-group" => "sg-group-1"  }, :id => "eg3-2"} Switch link 3
+%div.switch-content{:id => "sg-target1-3"} Switch content 1
+%div.switch-content{:id => "sg-target2-3"} Switch content 2
+%div.switch-content{:id => "sg-target3-3"} Switch content 3
+

data/app/views/parts/modules/_tabs_simple_group_toggle.haml

@@ -0,0 +1,11 @@
+%ul
+  %li
+    %a{ :href =>  "#sgt-target1-3", :data => { :switch => true, :"switch-toggle" => true, :"switch-group" => "sgt-group-1"  }, :id => "eg1-2"} Switch link 1
+  %li
+    %a{ :href => "#sgt-target2-3", :data => { :switch => true, :"switch-toggle" => true, :"switch-group" => "sgt-group-1"  }, :id => "eg2-2"} Switch link 2
+  %li
+    %a{ :href => "#sgt-target3-3", :data => { :switch => true, :"switch-toggle" => true, :"switch-group" => "sgt-group-1"  }, :id => "eg3-2"} Switch link 3
+%div.switch-content{:id => "sgt-target1-3"} Switch content 1
+%div.switch-content{:id => "sgt-target2-3"} Switch content 2
+%div.switch-content{:id => "sgt-target3-3"} Switch content 3
+

data/app/views/parts/modules/_tabs_toggle.haml

@@ -0,0 +1,5 @@
+%ul
+  %li
+    %a{ :href =>  "#toggle-target1-3", :data => { :switch => true, :"switch-toggle" => true, :"switch-group" => "toggle-group-1"  }, :id => "eg1-2"} Switch link 1
+%div.switch-content{:id => "toggle-target1-3"} Switch content 1
+

data/app/views/parts/modules/_tabs_traditional.haml

@@ -0,0 +1,11 @@
+%ul.tabs
+  %li.is-active
+    %a{ :href =>  "#target1-3", :data => { :switch => true, :"switch-group" => "group-1"  }, :id => "eg1-2"} Switch link 1
+  %li
+    %a{ :href => "#target2-3", :data => { :switch => true, :"switch-group" => "group-1"  }, :id => "eg2-2"} Switch link 2
+  %li
+    %a{ :href => "#target3-3", :data => { :switch => true, :"switch-group" => "group-1"  }, :id => "eg3-2"} Switch link 3
+%div.switch-content.is-active{:id => "target1-3"} Switch content 1
+%div.switch-content{:id => "target2-3"} Switch content 2
+%div.switch-content{:id => "target3-3"} Switch content 3
+

data/app/views/shared/_placeholder_text.html.haml

@@ -0,0 +1 @@
+%p.standout It's a complicated case, Maude. Lotta ins. Lotta outs. And a lotta strands to keep in my head, man. Dolor sit amet, consectetur adipiscing elit praesent ac magna justo pellentesque ac lectus. I mean his wife goes out and owes money and they pee on my rug. Here's the name and number of a doctor who will look at it for you. You will receive no bill. He's a good man.

data/app/views/shared/_title.html.haml

@@ -0,0 +1,8 @@
+.row
+  %header.mother-eight.column{ role: "banner"}
+    - if @page_title
+      %h1!= @page_title
+    - if @page_description
+      %p.standout= @page_description
+    -if @page_title or @page_description
+      %hr

data/app/views/shared/_ui_nav.html.haml

@@ -0,0 +1,5 @@
+- unless @page_nav.nil?
+  %nav.panel
+    %ul
+      - @page_nav.each do |text,path|
+        %li= link_to text, path

data/app/views/ui/alert.html.haml

@@ -0,0 +1,35 @@
+.row
+  .mother-three.mother-push-one.column= render "ui_nav"
+  .mother-seven.mother-pull-one.column
+
+    %h2 Alerts
+    
+    %hr
+
+    %p Simplest form of the switch. In this version the switch is a simple reveal plugin with no off state.
+
+    = example do
+      %section.alert#info_box
+        = link_to "close", "#info_box", :class => "ss-icon close", :data => {:close => true}
+        %p some text
+      %section.alert.success#success_box
+        = link_to "close", "#", :class => "ss-icon close", :data => {:close => "#success_box"}
+        %p some text
+      %section.alert.error#error_box
+        = link_to "close", "#", :class => "ss-icon close", :data => {:close => "#error_box"}
+        %p some text
+
+      :coderay
+        #!haml
+
+        %section.alert#info_box
+          = link_to "close", "#info_box", :class => "ss-icon close", :data => {:close => true}
+          %p some text
+        %section.alert.success#success_box
+          = link_to "close", "#", :class => "ss-icon close", :data => {:close => "#success_box"}
+          %p some text
+        %section.alert.error#error_box
+          = link_to "close", "#", :class => "ss-icon close", :data => {:close => "#error_box"}
+          %p some text
+      // end
+

data/app/views/ui/buttons.html.haml

@@ -0,0 +1,116 @@
+.row
+  .mother-three.mother-push-one.column= render "ui_nav"
+  .mother-seven.mother-pull-one.column
+    %h2 Buttons
+
+    .row
+      - ['','orange','green', 'blue'].each do |color|
+        .mother-six.column
+          = example do
+            - ['large','medium', 'small'].each do |type|
+              %a{:href=>"stuff", :class=>"btn #{type} #{color}"}= (color.length > 0) ? "#{color}  button" : "#{type} button"
+              %br
+              %br
+    :coderay
+      #!haml
+
+      %a{:href=>"#the link", :class=>"btn |size| |color|"} My Button
+      // OR
+      = link_to "Link Name", link_path, :class=>"btn |size| |color|"
+    // end
+    
+    %hr
+
+    %h3.h5 Button states
+    = example do
+      - ['','orange','green', 'blue'].each do |color|
+        - ['normal','is-active','disabled'].each do |type|
+          %a{:href=>"stuff", :class=>"small btn #{type} #{color}"}= "#{type}"
+        %br
+        %br
+
+    %h2 Button Groups
+
+    = example do
+      %a{:href=>"stuff", :class=>"btn prefix"}>< Button 1
+      %a{:href=>"stuff", :class=>"btn prefix suffix"}>< Button 2
+      %button{:class=>"btn suffix"}>< Button 3
+
+
+    %h2 Web Icons
+
+    %p
+      We are using the webfonts from Symbolset,
+      = link_to "click here ", "http://symbolset.com/"
+      for a full reference on avaliable icons.
+
+    %hr
+
+    %h3.h5#social_icons social icons
+
+    = example do
+      %ul.action-list.h4
+        %li
+          =link_to "twitter", "http://twitter.com", :class => "ss-icon ss-social"
+        %li
+          %i.ss-icon.ss-social.twitter twitter
+        %li
+          %i.ss-icon.ss-social twitter
+        %li
+          =link_to "facebook", "http://facebook.com", :class => "ss-icon ss-social"
+        %li
+          %i.ss-icon.ss-social.facebook facebook
+        %li
+          %i.ss-icon.ss-social facebook
+        %li
+          =link_to "mail", "mailto:me@me.com", :class => "ss-icon ss-social"
+        %li
+          %i.ss-icon.ss-social.email email
+        %li
+          %i.ss-icon.ss-social email
+
+      :coderay
+        #!haml
+        
+        %ul.action-list.h4
+          %li
+            =link_to "twitter", "http://twitter.com", :class => "ss-icon ss-social"
+          %li
+            %i.ss-icon.ss-social.twitter twitter
+          %li
+            %i.ss-icon.ss-social twitter
+          %li
+            =link_to "facebook", "http://facebook.com", :class => "ss-icon ss-social"
+          %li
+            %i.ss-icon.ss-social.facebook facebook
+          %li
+            %i.ss-icon.ss-social facebook
+          %li
+            =link_to "mail", "mailto:me@me.com", :class => "ss-icon ss-social"
+          %li
+            %i.ss-icon.ss-social.email email
+          %li
+            %i.ss-icon.ss-social email
+      // end
+
+    %hr
+
+    %h3.h5#social_icons Standard icons
+
+    = example do
+      %ul.action-list
+        %li
+          =link_to "close", "close", :class => "ss-icon"
+        %li
+          %i.ss-icon close
+        %li.ss-delete close
+
+      :coderay
+        #!haml
+        
+        %ul.action-list
+          %li= link_to "close", "close", :class => "ss-icon"
+          %li
+            %i.ss-icon close
+          %li.ss-delete close
+      // end

data/app/views/ui/footer.html.haml

@@ -0,0 +1,69 @@
+.row
+  .mother-three.mother-push-one.column= render "ui_nav"
+  .mother-seven.mother-pull-one.column
+
+    %h2 Footer
+    
+
+    = example do
+      %footer.footer 
+        .container
+          %a{ :href=> '#footer-content', :class => "footer-tab ss-icon footer-up", :data => { :switch => true, :"switch-toggle" => true}} navigateup
+          %a{ :href=> '#footer-content', :class => "footer-tab ss-icon footer-down", :data => { :switch => true, :"switch-toggle" => true}} navigatedown
+
+        #footer-content.container
+          .mother-seven.column
+            .row
+              .mother-two.sister-one.column.footer-logo-container
+                %a{:href=>root_path}
+                  .footer-logo{ :role=>"img", :"aria-label"=>"Studentbeans.com"}
+            .row
+              %p.support © #{Time.now.year.to_s} The Beans Group. All Rights reserved.
+          .mother-two.column
+            %ul.support
+              %li=link_to "footer link"
+              %li=link_to "footer link"
+              %li=link_to "footer link"
+          .mother-two.column
+            %ul.support
+              %li=link_to "footer link"
+              %li=link_to "footer link"
+              %li=link_to "footer link"
+          .mother-one.column
+            %ul.action-list.h5
+              %li=link_to "facebook", "http://facebook.com", :class => "ss-icon ss-social"
+              %li=link_to "twitter", "http://twitter.com", :class => "ss-icon ss-social"
+
+
+    :coderay
+      #!haml
+
+      %footer.footer 
+        .container
+          %a{ :href=> '#footer-content', :class => "footer-tab ss-icon footer-up", :data => { :switch => true, :"switch-toggle" => true}} navigateup
+          %a{ :href=> '#footer-content', :class => "footer-tab ss-icon footer-down", :data => { :switch => true, :"switch-toggle" => true}} navigatedown
+
+        #footer-content.container
+          .mother-seven.column
+            .row
+              .mother-two.sister-one.column.footer-logo-container
+                %a{:href=>root_path}
+                  .footer-logo{ :role=>"img", :"aria-label"=>"Studentbeans.com"}
+            .row
+              %p.support © #{Time.now.year.to_s} The Beans Group. All Rights reserved.
+          .mother-two.column
+            %ul.support
+              %li=link_to "footer link"
+              %li=link_to "footer link"
+              %li=link_to "footer link"
+          .mother-two.column
+            %ul.support
+              %li=link_to "footer link"
+              %li=link_to "footer link"
+              %li=link_to "footer link"
+          .mother-one.column
+            %ul.action-list.h5
+              %li=link_to "facebook", "http://facebook.com", :class => "ss-icon ss-social"
+              %li=link_to "twitter", "http://twitter.com", :class => "ss-icon ss-social"
+    // end
+

data/app/views/ui/forms/_vertical_form.haml

@@ -0,0 +1,7 @@
+%form
+  %div
+    %label a label
+    %input{:type =>"text", :class=>"large"}
+  %div
+    %label a label
+    %input{:type =>"text"}

data/app/views/ui/forms.html.haml

@@ -0,0 +1,59 @@
+.row
+  .mother-three.mother-push-one.column= render "ui_nav"
+  .mother-seven.mother-pull-one.column
+
+    %h2 Forms
+
+
+    %hr
+
+    %h3.h5 location input
+    = example do
+      %div.location-input
+        %input{:type=>"text", :placeholder=>"Location"}
+        %span.ss-icon.locate locate
+      %br
+      %div.location-input
+        %input{:type=>"text", :placeholder=>"Location"}
+        %span.ss-icon.locate.is-active locate
+
+      :coderay
+        #!haml
+
+        %div.location-input
+          %input{:type=>"text", :placeholder=>"Location"}
+          %span.ss-icon.locate locate
+
+        %div.location-input
+          %input{:type=>"text", :placeholder=>"Location"}
+          %span.ss-icon.locate.is-active locate
+      // end
+
+    %hr
+
+    %h3.h5 Prefixed input
+
+    = example do
+      %form
+        .row
+          .mother-eight.column
+            .row.collapse
+              .mother-eight.column
+                %input.prefix{:type=>"text"}
+              .mother-four.column
+                %input.orange.small.btn.suffix{:type=>"submit", :value => "Submit"}
+
+
+      :coderay
+        #!haml
+
+        %form
+          .row
+            .mother-eight.column
+              .row.collapse
+                .mother-eight.column
+                  %input.prefix{:type=>"text"}
+                .mother-four.column
+                  %input.btn.suffix{:type=>"submit", :value => "Submit"}
+      // end
+