sb-styleguide 0.0.9 → 1.0.0

data/app/views/layouts/_main_nav.html.haml

@@ -1,12 +1,12 @@
 %nav.nav-global
   #nav-global.nav-collapse.baby-switch-content<
     %ul.nav-items.collapse><
-      %li><
-        = link_to "UI Elements", root_path
-      %li><
-        = link_to "Javascript", javascript_path
-      %li><
-        = link_to "Github", github_path
+      = nav_link "Home", root_path
+      = nav_link "Grids", grid_path
+      = nav_link "Base", base_path
+      = nav_link "Modules", modules_path
+      = nav_link "Javascript", javascripts_path
+      = nav_link "Github", github_path
   .nav-mobile-switch.baby-only
     %a{ :href => "#nav-global", :data => {:switch => true, :"switch-toggle" => true} }><
       %span>< Show navigation

data/app/views/layouts/application.html.haml

@@ -2,40 +2,14 @@
 %html
   %head
     %meta{:charset => "utf-8"}
-    %title= @page_title || "SB Style Guide"
+    %title= strip_tags(@page_title) || "SB Style Guide"
     = javascript_include_tag "lib/modernizr"
-    = stylesheet_link_tag "application"
+    = sassie_stylesheets "application"
   %body.page_classes
     = render :partial => "layouts/main_nav"
     .container
-      = yield
+      = render :partial => "shared/title"
+      .row
+        .mother-three.sister-four.column= render :partial => "shared/ui_nav"
+        .mother-five.sister-four.column= yield
     = javascript_include_tag  "application"
-    %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"
-
-

data/app/views/modules/alerts.html.haml

@@ -0,0 +1,12 @@
+:markdown
+  RoR makes great use of [flash messages](http://guides.rubyonrails.org/action_controller_overview.html#the-flash) to give the 
+  users important information as they navigate the site. 
+
+  Within each project we **need** to have an alert for standard messages, success messages and alert messages.
+
+  Alerts depend on the `Close` plugin.
+%hr
+
+%h3#Standard-alerts Standard Alerts
+= example "modules", "alerts"
+%hr

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

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

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

@@ -0,0 +1,5 @@
+:markdown
+  The rule is, if we find ourselves building a module twice, then it belongs 
+  in the style guide.
+
+%h3 The structure of a module

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

@@ -0,0 +1,12 @@
+%h3 Header Navigation
+:markdown
+  This is a responsive header navigation that folds down on the smallest media query.
+= example "modules", "nav_header"
+%hr
+
+
+%h3 Footer Navigation
+:markdown
+  It's down there; at the bottom of the page.
+= example "modules", "nav_footer"
+%hr

data/app/views/modules/panels.html.haml

@@ -0,0 +1,3 @@
+%h3 Panel
+= example "modules", "panels"
+%hr

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

@@ -0,0 +1,58 @@
+:markdown
+  This module is names `Tabs` in the style guide for convenience only. In mark-up and 
+  code it is called `Switch` as it does much more than traditional tabs.
+
+  Tabs use the `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.
+
+%ul.shout
+  %li= link_to "View the Switch Plugin ", "/jasmine?spec=Switch%3A"
+  %li= link_to "View Switch Plugin Tests", "/jasmine?spec=Switch%3A"
+%hr
+
+%h3#minimal-switch Minimal Switch
+:markdown
+  Simplest form of the switch. This version of the switch is a simple reveal with no off state.
+= example "modules", "tabs_minimal"
+%hr
+
+
+%h3#toggle-switch Toogle Switch
+:markdown
+  Using the data attribute `data-switch-toggle`, content can be toggled and it's state has no effect on other elements.
+= example "modules", "tabs_toggle"
+%hr
+
+%h3#simple-group Simple Groups
+:markdown
+  By adding the `switch-group` data element we can make groups of switches reactive to each others state.
+= example "modules", "tabs_simple_group"
+%hr
+
+
+%h3#simple-group-toggle Simple Groups With Toggle
+:markdown
+  If you add to the switch link then 
+  the content will toggle open and shut when the user clicks.
+= example "modules", "tabs_simple_group_toggle"
+%hr
+
+%h3#Traditional-tabs Traditional Tabs
+:markdown
+  Creating a tabbed module is easy. Simply add the class `.tab` to the links `ul` of a grouped switch.
+  
+  If you wish for a tab to be open on load then add `.is-active` to the tab `li` and corresponding `.switch-content`.
+= example "modules", "tabs_traditional"
+%hr

data/app/views/old_javascript/close.html.haml

@@ -0,0 +1,2 @@
+%h1 Javascript#close
+%p Find me in app/views/javascript/close.html.haml

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

@@ -0,0 +1,2 @@
+%h1 Javascript#forms
+%p Find me in app/views/javascript/forms.html.haml

data/app/views/old_javascript/ga_events.html.haml

@@ -0,0 +1,2 @@
+%h1 Javascript#ga-events
+%p Find me in app/views/javascript/ga-events.html.haml

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

@@ -0,0 +1,2 @@
+%h1 Javascript#index
+%p Find me in app/views/javascript/index.html.haml

data/app/views/old_javascript/responsive_resize.html.haml

@@ -0,0 +1,2 @@
+%h1 Javascript#responsive-resize
+%p Find me in app/views/javascript/responsive-resize.html.haml

data/app/views/old_javascript/switch.html.haml

@@ -0,0 +1,2 @@
+%h1 Javascript#switch
+%p Find me in app/views/javascript/switch.html.haml

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

@@ -0,0 +1,3 @@
+%a{:href=>"stuff", :class=>"btn"} Link Button
+%button{ :class=>"btn"} Button
+%input{ :type => "submit", :value => "Submit Button", :class=>"btn"}

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

@@ -0,0 +1,4 @@
+%a{:href=>"a-link", :class=>"small btn"} Link Button
+%a{:href=>"a-link", :class=>"small btn orange"} Link Button
+%a{:href=>"a-link", :class=>"small btn blue"} Link Button
+%a{:href=>"a-link", :class=>"small btn green"} Link Button

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

@@ -0,0 +1,4 @@
+.btn-group
+  %a{:href=>"link", :class=>"btn prefix"}>< Button 1
+  %a{:href=>"link", :class=>"btn prefix suffix"}>< Button 2
+  %a{:href=>"link", :class=>"btn suffix"}>< Button 3

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

@@ -0,0 +1,3 @@
+%a{:href=>"a-link", :class=>"btn small"} Link Button
+%a{:href=>"a-link", :class=>"btn medium"} Link Button
+%a{:href=>"a-link", :class=>"btn large"} Link Button

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

@@ -0,0 +1,3 @@
+%a{:href=>"a-link", :class=>"small btn green is-active"} Active/Hover Link Button
+%a{:href=>"a-link", :class=>"small btn green disabled"} Disabled Link Button
+%a{:href=>"a-link", :class=>"small btn green", :disabled => true } Disabled Link Button

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