sb-styleguide 0.0.1 → 0.0.2

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.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
+

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/grids.html.haml

@@ -0,0 +1,18 @@
+.row
+  .mother-three.mother-push-one.column= render "ui_nav"
+  .mother-seven.mother-pull-one.column
+
+    %h1 Base#grids
+    %p Find me in app/views/base/grids.html.haml
+
+    %h2 Grid Settings
+    %p Setting the breakpoints...
+
+
+    %pre
+      %code
+        $mob: 'mobile-', 1, 20px, "max-width: 780px" ;
+        $desk: '', $columns, $column-gutter;
+        \// Add breakpoints to grid
+        $grids : $desk, $mob !default;
+

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

@@ -0,0 +1,5 @@
+.row
+  .mother-three.mother-push-one.column= render "ui_nav"
+  .mother-seven.mother-pull-one.column
+    %h1 Ui#index
+    %p Find me in app/views/ui/index.html.haml

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

@@ -0,0 +1,15 @@
+.row
+  .mother-three.mother-push-one.column= render "ui_nav"
+  .mother-seven.mother-pull-one.column
+    %h2 Labels
+
+    %hr
+
+    = example do
+      - ['','orange','green', 'blue'].each do |color|
+        %span{:class=>"label #{color}"}= (color.length > 0) ? ".#{color}.label" : ".label"
+    :coderay
+      #!haml
+
+      %span{:class=>"label [color]"} .[color].label
+    // end

data/app/views/ui/modules/panel.html.haml

@@ -0,0 +1,3 @@
+%section.panel
+  %h1 Modules#panel
+  %p Find me in app/views/modules/panel.html.haml

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

@@ -0,0 +1,48 @@
+.row
+  .mother-three.mother-push-one.column= render "ui_nav"
+  .mother-seven.mother-pull-one.column
+
+    %h2 Navigation
+    
+    %hr
+
+    %h3.h5 Global Nav
+
+    %p Simplest form of the switch. In this version the switch is a simple reveal plugin with no off state.
+
+    = example do
+      %nav.nav-global
+        #nav-global-2.nav-collapse.baby-switch-content<
+          %ul.nav-items.collapse><
+            %li.is-active><
+              = link_to "stuff", "stuff"
+            %li><
+              = link_to "things", "things"
+            %li><
+              = link_to "bits", "bits"
+        .nav-mobile-switch.baby-only
+          %a{ :href => "#nav-global-2", :data => {:switch => true, :"switch-toggle" => true} }><
+            %span>< Show navigation
+          %i><
+          %i><
+          %i><
+
+      :coderay
+        #!haml
+        %nav.nav-global
+          #nav-global.nav-collapse.baby-switch-content<
+            %ul.nav-items.collapse><
+              %li.is-active><
+                = link_to "stuff", "stuff"
+              %li><
+                = link_to "things", "things"
+              %li><
+                = link_to "bits", "bits"
+          .nav-mobile-switch.baby-only
+            %a{ :href => "#nav-global", :data => {:switch => true, :"switch-toggle" => true} }><
+              %span>< Show navigation
+            %i><
+            %i><
+            %i><
+      // end
+

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

@@ -0,0 +1,171 @@
+.row
+  .mother-three.mother-push-one.column= render "ui_nav"
+  .mother-seven.mother-pull-one.column
+
+    %h2 Tabs
+    
+    %p.standout
+      Tabs use the 
+      %code switch 
+      plugin to manage active state.
+
+    %h3.h5 data-switch options
+
+    %dl
+      %dt 
+        %code data-switch="true"
+      %dd An event listener will initalise the switch plugin when an element with this attribute is clicked.
+      %dt
+        %code data-switch-group="[group name]"
+      %dd By giving an element a group name then the plugin can change the state of other switches within the same group.
+      %dt 
+        %code data-switch-toggle
+      %dd This option enables a switch to toggle it's state upon click.
+
+    %p= link_to "View Switch Plugin Tests", "/jasmine?spec=Switch%3A"
+
+    %hr
+
+    %h3.h5 Minimal switch
+
+    %p Simplest form of the switch. In this version the switch is a simple reveal plugin with no off state.
+
+    = example do
+      %ul
+        %li= link_to "Link 1", "#target1-1", :data => { :switch => true }
+        %li= link_to "Link 2", "#target2-1", :data => { :switch => true }
+        %li= link_to "Link 3", "#target3-1", :data => { :switch => true }
+      %div.switch-content{:id => "target1-1"} switch content 1
+      %div.switch-content{:id => "target2-1"} switch content 2
+      %div.switch-content{:id => "target3-1<D-s>"} switch content 3
+
+      :coderay
+        #!haml
+
+        %ul
+          %li
+            = link_to "Link 1", "#target1", :data => { :switch => true }
+          %li
+            = link_to "Link 2", "#target2", :data => { :switch => true }
+          %li
+            = link_to "Link 3", "#target3", :data => { :switch => true }
+        %div.switch-content{:id => "target1"} switch content 1
+        %div.switch-content{:id => "target2"} switch content 2
+        %div.switch-content{:id => "target3"} switch content 3
+      // end
+
+    %hr
+
+
+    %h3.h5 Toggle switch
+
+    %p Content can be toggled and it's state has no effect on other elements.
+
+    = example do
+      %ul
+        %li= link_to "Link 1", "#target1-2", :data => { :switch => true, :"switch-toggle" => true }
+        %li= link_to "Link 2", "#target2-2", :data => { :switch => true, :"switch-toggle" => true }
+        %li= link_to "Link 3", "#target3-2", :data => { :switch => true, :"switch-toggle" => true }
+      %div.switch-content{:id => "target1-2"} switch content 1
+      %div.switch-content{:id => "target2-2"} switch content 2
+      %div.switch-content{:id => "target3-2"} switch content 3
+
+      :coderay
+        #!haml
+
+        %ul
+          %li
+            = link_to "Link 1", "#target1", :data => { :switch => true, :"switch-toggle" => true }
+          %li
+            = link_to "Link 2", "#target2", :data => { :switch => true, :"switch-toggle" => true }
+          %li
+            = link_to "Link 3", "#target3", :data => { :switch => true, :"switch-toggle" => true }
+        %div.switch-content{:id => "target1"} switch content 1
+        %div.switch-content{:id => "target2"} switch content 2
+        %div.switch-content{:id => "target3"} switch content 3
+      // end
+
+    %hr
+
+    %h3.h5 Simple Groups
+
+    %p
+      By adding the
+      %code switch-group
+      data element we can make groups of switches reactive to each others state.
+
+    = example  do 
+      %ul
+        %li.is-active= link_to "Drop down link 1", "#target1-3", :data => { :switch => true, :"switch-group" => "group-1"  }, :id => "eg1-2"
+        %li= link_to "Drop down link 2", "#target2-3", :data => { :switch => true, :"switch-group" => "group-1"  }, :id => "eg2-2"
+        %li= link_to "Drop down link 3", "#target3-3", :data => { :switch => true, :"switch-group" => "group-1"  }, :id => "eg3-2"
+      %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"
+
+      :coderay
+        #!haml
+
+        %ul.tabs
+          %li.is-active= link_to "Drop down link 1", "#target1-3", :data => { :switch => true, :"switch-group" => "group-1"  }, :id => "eg1-2"
+          %li= link_to "Drop down link 2", "#target2-3", :data => { :switch => true, :"switch-group" => "group-1"  }, :id => "eg2-2"
+          %li= link_to "Drop down link 3", "#target3-3", :data => { :switch => true, :"switch-group" => "group-1"  }, :id => "eg3-2"
+        %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"
+      // end
+
+
+
+    %hr
+
+    %h3.h5 Simple Groups with toggle
+
+    = example do
+      %ul
+        %li= link_to "Link 1", "#target1-5", :data => { :switch => true, :"switch-toggle" => true , :"switch-group" => "group-1" }
+        %li= link_to "Link 2", "#target2-5", :data => { :switch => true, :"switch-toggle" => true, :"switch-group" => "group-1"  }
+        %li= link_to "Link 3", "#target3-5", :data => { :switch => true, :"switch-toggle" => true, :"switch-group" => "group-1"  }
+      %div.switch-content{:id => "target1-5"} switch content 1
+      %div.switch-content{:id => "target2-5"} switch content 2
+      %div.switch-content{:id => "target3-5"} switch content 3
+
+      :coderay
+        #!haml
+
+        %ul.tabs
+          %li.is-active= link_to "Drop down link 1", "#target1-3", :data => { :switch => true, :"switch-group" => "group-1", :"switch-toggle" => true }, :id => "eg1-2"
+          %li= link_to "Drop down link 2", "#target2-3", :data => { :switch => true, :"switch-group" => "group-1", :"switch-toggle" => true  }, :id => "eg2-2"
+          %li= link_to "Drop down link 3", "#target3-3", :data => { :switch => true, :"switch-group" => "group-1", :"switch-toggle" => true  }, :id => "eg3-2"
+        %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"
+      // end
+
+
+
+
+    %hr
+
+    %h3.h5 Groups (with tabs)
+
+    = example  do 
+      %ul.tabs
+        %li.is-active= link_to "Drop down link 1", "#target1-3", :data => { :switch => true, :"switch-group" => "group-1"  }, :id => "eg1-2"
+        %li= link_to "Drop down link 2", "#target2-3", :data => { :switch => true, :"switch-group" => "group-1"  }, :id => "eg2-2"
+        %li= link_to "Drop down link 3", "#target3-3", :data => { :switch => true, :"switch-group" => "group-1"  }, :id => "eg3-2"
+      %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"
+
+      :coderay
+        #!haml
+
+        %ul.tabs
+          %li.is-active= link_to "Drop down link 1", "#target1-3", :data => { :switch => true, :"switch-group" => "group-1"  }, :id => "eg1-2"
+          %li= link_to "Drop down link 2", "#target2-3", :data => { :switch => true, :"switch-group" => "group-1"  }, :id => "eg2-2"
+          %li= link_to "Drop down link 3", "#target3-3", :data => { :switch => true, :"switch-group" => "group-1"  }, :id => "eg3-2"
+        %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"
+      // end

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

@@ -0,0 +1,128 @@
+.row
+  .mother-three.mother-push-one.column= render "ui_nav"
+  .mother-seven.mother-pull-one.column
+
+    %h2 Basic Typography
+
+    = render :partial => "shared/placeholder_text"
+
+    %hr
+
+    %h3.h5 Headings
+
+    = example do
+      .h1 Heading 1
+      .h2 Heading 2
+      .h3 Heading 3
+      .h4 Heading 4
+      .h5 Heading 5
+      :coderay
+        #!haml
+      
+        %h1 Heading 1
+        %h2 Heading 2
+        %h3 Heading 3
+        %h4 Heading 4
+        %h5 Heading 5
+
+        // All heading styles can also be reproduced using .h{n}
+    %hr
+
+    %h3.h5 Body text
+
+    = example do
+      %p Normal 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. 
+
+      :coderay
+        #!haml
+
+        %p Lebowski ipsum I didn't…
+      // end
+
+    %h3.h5 Standout
+
+    = example do
+      %p.standout Standout 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.
+
+      :coderay
+        #!haml
+
+        %p.standout Lebowski ipsum I didn't…
+      // end
+
+    %h3.h5 Body text helper classes
+
+    = example do
+      %p.support Support text - 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. 
+      %p.secondary Secondary text - 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. Pellentesque ac lectus quis elit blandit fringilla a ut turpis. 
+
+      :coderay
+        #!haml
+
+        %p.support Lebowski ipsum I didn't…
+        %p.secondary Lebowski ipsum I didn't…
+      // end
+
+    %hr
+
+    %h3.h5 Links
+    
+    = example do
+      %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
+
+      :coderay
+        #!haml
+
+        %a{:href=>"#my_link"} Text link
+        %a.is-active{:href=>"#my_link"} Text link hover/active
+        %a.prominent{:href=>"#my_link"} Prominent text link
+        %a.prominent.is-active{:href=>"#my_link"} Prominent text link hover/active
+      // end
+
+    %hr
+
+    %h3.h5 Shouts
+
+    = example do
+      .shout Shout Text
+      .small.shout Small shout text
+      .medium.shout Medium shout text
+      .large.shout Large shout text
+      :coderay
+        #!haml
+
+        .shout Shout Text
+        .small.shout Small shout text
+        .medium.shout Medium shout text
+        .large.shout Large shout text
+      // end
+
+
+    %hr
+
+    %h2 Lists
+
+    %h3.h5 Action lists
+
+    = example do
+      %ul.action-list
+        %li
+          %a{:href=>"my_url"} Item 1
+        %li
+          %a{:href=>"my_url"} item 2
+      :coderay
+        #!haml
+
+        %ul.action-list
+          %li
+            %a{:href=>"my_url"} Item 1
+          %li
+            %a{:href=>"my_url"} Item 2
+      // end
+