sb-styleguide 0.0.1 → 0.0.2

data/app/assets/stylesheets/coderay_githubish.css.scss

@@ -0,0 +1,131 @@
+.CodeRay {
+  font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
+  color: #000;
+  padding: 1em 0px 1em 1em;
+}
+
+.CodeRay pre {
+  margin: 0px;
+}
+
+div.CodeRay { }
+span.CodeRay { white-space: pre; border: 0px; padding: 2px }
+
+table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
+table.CodeRay td {
+  padding: 1em 0.5em;
+  vertical-align: top;
+}
+
+.CodeRay .line-numbers, .CodeRay .no {
+  background-color: #ECECEC;
+  color: #AAA;
+  text-align: right;
+}
+
+.CodeRay .line-numbers a {
+  color: #AAA;
+  border: none;
+}
+
+.CodeRay .line-numbers tt { font-weight: bold }
+.CodeRay .line-numbers .highlighted { color: red }
+.CodeRay .line { display: block; float: left; width: 100%; }
+.CodeRay span.line-numbers { padding: 0px 4px }
+.CodeRay .code { width: 100% }
+
+ol.CodeRay { font-size: 10pt }
+ol.CodeRay li { white-space: pre }
+
+.CodeRay .code pre { overflow: auto }
+.CodeRay .debug { color:white ! important; background:blue ! important; }
+
+.CodeRay .annotation { color:#007 }
+.CodeRay .attribute-name { color:#f08 }
+.CodeRay .attribute-value { color:#700 }
+.CodeRay .binary { color:#509; font-weight:bold }
+.CodeRay .comment  { color:#998; font-style: italic;}
+.CodeRay .char { color:#04D }
+.CodeRay .char .content { color:#04D }
+.CodeRay .char .delimiter { color:#039 }
+.CodeRay .class { color:#458; font-weight:bold }
+.CodeRay .complex { color:#A08; font-weight:bold }
+.CodeRay .constant { color:teal; }
+.CodeRay .color { color:#0A0 }
+.CodeRay .class-variable { color:#369 }
+.CodeRay .decorator { color:#B0B; }
+.CodeRay .definition { color:#099; font-weight:bold }
+.CodeRay .directive { color:#088; font-weight:bold }
+.CodeRay .delimiter { color:black }
+.CodeRay .doc { color:#970 }
+.CodeRay .doctype { color:#34b }
+.CodeRay .doc-string { color:#D42; font-weight:bold }
+.CodeRay .escape  { color:#666; font-weight:bold }
+.CodeRay .entity { color:#800; font-weight:bold }
+.CodeRay .error { color:#F00; background-color:#FAA }
+.CodeRay .exception { color:#C00; font-weight:bold }
+.CodeRay .filename { color:#099; }
+.CodeRay .function { color:#900; font-weight:bold }
+.CodeRay .global-variable { color:teal; font-weight:bold }
+.CodeRay .hex { color:#058; font-weight:bold }
+.CodeRay .integer  { color:#099; }
+.CodeRay .include { color:#B44; font-weight:bold }
+.CodeRay .inline { color: black }
+.CodeRay .inline .inline { background: #ccc }
+.CodeRay .inline .inline .inline { background: #bbb }
+.CodeRay .inline .inline-delimiter { color: #D14; }
+.CodeRay .inline-delimiter { color: #D14; }
+.CodeRay .important { color:#f00; }
+.CodeRay .interpreted { color:#B2B; font-weight:bold }
+.CodeRay .instance-variable { color:teal }
+.CodeRay .label { color:#970; font-weight:bold }
+.CodeRay .local-variable { color:#963 }
+.CodeRay .octal { color:#40E; font-weight:bold }
+.CodeRay .operator { }
+.CodeRay .predefined-constant {  font-weight:bold }
+.CodeRay .predefined { color:#369; font-weight:bold }
+.CodeRay .preprocessor { color:#579; }
+.CodeRay .pseudo-class { color:#00C; font-weight:bold }
+.CodeRay .predefined-type { color:#074; font-weight:bold }
+.CodeRay .reserved, .keyword  { color:#000; font-weight:bold }
+
+.CodeRay .key { color: #808; }
+.CodeRay .key .delimiter { color: #606; }
+.CodeRay .key .char { color: #80f; }
+.CodeRay .value { color: #088; }
+
+.CodeRay .regexp { background-color:#fff0ff }
+.CodeRay .regexp .content { color:#808 }
+.CodeRay .regexp .delimiter { color:#404 }
+.CodeRay .regexp .modifier { color:#C2C }
+.CodeRay .regexp .function  { color:#404; font-weight: bold }
+
+.CodeRay .string { color: #D20; }
+.CodeRay .string .string { }
+.CodeRay .string .string .string { background-color:#ffd0d0 }
+.CodeRay .string .content { color: #D14; }
+.CodeRay .string .char { color: #D14; }
+.CodeRay .string .delimiter { color: #D14; }
+
+.CodeRay .shell { color:#D14 }
+.CodeRay .shell .content { }
+.CodeRay .shell .delimiter { color:#D14 }
+
+.CodeRay .symbol { color:#990073 }
+.CodeRay .symbol .content { color:#A60 }
+.CodeRay .symbol .delimiter { color:#630 }
+
+.CodeRay .tag { color:#070 }
+.CodeRay .tag-special { color:#D70; font-weight:bold }
+.CodeRay .type { color:#339; font-weight:bold }
+.CodeRay .variable  { color:#036 }
+
+.CodeRay .insert { background: #afa; }
+.CodeRay .delete { background: #faa; }
+.CodeRay .change { color: #aaf; background: #007; }
+.CodeRay .head { color: #f8f; background: #505 }
+
+.CodeRay .insert .insert { color: #080; font-weight:bold }
+.CodeRay .delete .delete { color: #800; font-weight:bold }
+.CodeRay .change .change { color: #66f; }
+.CodeRay .head .head { color: #f4f; }

data/app/controllers/application_controller.rb

@@ -0,0 +1,3 @@
+class ApplicationController < ActionController::Base
+  protect_from_forgery
+end

data/app/controllers/javascripts_controller.rb

@@ -0,0 +1,4 @@
+class JavascriptsController < ApplicationController
+  def index
+  end
+end

data/app/controllers/ui_controller.rb

@@ -0,0 +1,2 @@
+class UiController < ApplicationController
+end

data/app/helpers/application_helper.rb

@@ -0,0 +1,13 @@
+require 'coderay'
+
+module ApplicationHelper
+
+def example
+  capture_haml do
+    haml_tag :div, :class => "sg-example"  do
+      yield
+    end
+  end
+end
+
+end

data/app/helpers/javascripts_helper.rb

@@ -0,0 +1,2 @@
+module JavascriptsHelper
+end

data/app/helpers/ui_helper.rb

@@ -0,0 +1,2 @@
+module UiHelper
+end

data/app/views/javascripts/_js_nav.html.haml

@@ -0,0 +1,5 @@
+%nav
+  %ul
+    %li= link_to "Jasmine", "/jasmine"
+    -# Plugins
+    %li= link_to "Close Plugin", "#close-plugin"

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

@@ -0,0 +1,45 @@
+.row
+  .mother-three.mother-push-one.column= render "js_nav"
+  .mother-seven.mother-pull-one.column
+
+    %h2 Javascript
+
+    %hr
+
+    %h3#close-plugin= link_to "Close plugin", "/jasmine?spec=Close%3A"
+
+    %p.standout Simple plugin to close (read: remove) anything on the page.
+
+    %h4 Usage
+
+    :markdown
+      The plugin is instantiated using the attribute `data-close` on the element that is used as the close button. The target is set by either passing a jQuery selector to the `data-attribute` or the ID of the target to the `href`.
+
+    %h5 data-close="selector"
+
+    :markdown
+      You can use the `data-close` attribute to set **any** jQuery selector to target the element you wish the button to close.
+
+    :coderay
+      #!haml
+      %a{:href => "#", :data => {:close => "[jquery selector]"} }
+      %a{:href => "#", :data => {:close => ".selector"} }
+      %a{:href => "#", :data => {:close => "#selector"} }
+
+    %h5 href="selector"
+
+    :markdown
+      You can use the `href` attribute to set a target element, by **ID only**, that you wish the button to close.
+
+    :coderay
+      #!haml
+
+      %a{:href => "#[target_id]", :data => {:close => true} }
+
+    %h4 Events emitted
+
+    :markdown
+      * `close` - emitted from target just before removal.
+
+    %hr
+

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

@@ -0,0 +1,15 @@
+%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-mobile-switch.baby-only
+    %a{ :href => "#nav-global", :data => {:switch => true, :"switch-toggle" => true} }><
+      %span>< Show navigation
+    %i><
+    %i><
+    %i><

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

@@ -0,0 +1,41 @@
+!!!
+%html
+  %head
+    %meta{:charset => "utf-8"}
+    %title= @page_title || "SB Style Guide"
+    = javascript_include_tag "lib/modernizr"
+    = stylesheet_link_tag "application"
+  %body.page_classes
+    = render :partial => "layouts/main_nav"
+    .container
+      = 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/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/type/_headings.haml

@@ -0,0 +1,6 @@
+- heading_text = "Heading text"
+%h1= heading_text
+%h2= heading_text
+%h3= heading_text
+%h4= heading_text
+%h5= heading_text

data/app/views/type/_paragraphs.haml

@@ -0,0 +1,4 @@
+%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. Quis elit blandit fringilla a ut turpis praesent felis ligula, malesuada suscipit malesuada. All right, Plan B. You might want to watch out the front window there, Larry. Non, ultrices non urna sed orci ipsum, placerat id condimentum rutrum, rhoncus ac.
+
+%p 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. And thorough. Lorem aliquam placerat posuere neque, at dignissim magna ullamcorper in aliquam sagittis massa. Ac tortor ultrices faucibus curabitur eu mi sapien, ut ultricies ipsum morbi eget. …and even if he's a lazy man, and the Dude was certainly that—quite possibly the laziest in Los Angeles County. Risus nulla nullam vel nisi enim, vel auctor ante morbi. I, uh… money, yeah, I gotta respectfully, 69 you know, tender my resignation on that matter, 'cause it looks like your mother really was kidnapped after all. Id urna vel felis lacinia placerat vestibulum turpis nulla, viverra. You're just looking for a handout like every other. Are you employed, Mr. Lebowski? Nec volutpat ac, ornare id lectus cras pharetra faucibus tristique. Hey, relax man, I'm a brother shamus. Nullam non accumsan justo nulla facilisi integer interdum elementum. I—the royal we, man, you know, the editorial. Hardly Dude, a new 'vette? The kid's still got, oh, 96 to 97 thousand, depending on the options. Nulla, nec eleifend nisl euismod ac maecenas vitae eros. Wonderful woman. Very free-spirited. We're all very fond of her. Velit, eu suscipit erat integer purus lacus, pretium vel. My art has been commended as being strongly vaginal. Which bothers some men. The word itself makes some men uncomfortable. Vagina. Venenatis eu, volutpat non erat donec a metus ac. Eros dictum aliquet nulla. Yeah. Roadie for Metallica. Speed of Sound Tour. Consectetur egestas placerat maecenas. Ja, your viggly penis, Lebowski. Pulvinar nisl et nisl. Since you have failed to achieve, even in the modest task that was your charge, since you have stolen my money, and since you have unrepentantly betrayed my trust. Rhoncus at volutpat felis. Eight-year-olds, Dude. Blandit in libero turpis, I have no choice but to tell these bums that they should do whatever is necessary to recover their money from you, Jeffrey Lebowski.
+

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

@@ -0,0 +1,13 @@
+%nav
+  %ul
+    %li= link_to "Grids", grids_path
+    %li= link_to "Typography", typography_path
+    %li= link_to "Buttons", buttons_path
+    %li= link_to "Labels", labels_path
+    -# modules
+    %li= link_to "Tabs", tabs_path
+    %li= link_to "Navigations", nav_path
+    %li= link_to "Alert", alert_path
+    %li= link_to "Forms", forms_path
+    %li= link_to "Footer", footer_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