plinth 0.0.1.beta.1

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,118 @@
+
+%h2 Basic Typography
+
+= render :partial => "shared/placeholder_text"
+
+%hr
+
+%h3.h5 Headings
+
+.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
+
+%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
+
+%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
+
+%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
+
+%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
+
+.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
+
+%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
+

data/db/seeds.rb

@@ -0,0 +1,7 @@
+# This file should contain all the record creation needed to seed the database with its default values.
+# The data can then be loaded with the rake db:seed (or created alongside the db with db:setup).
+#
+# Examples:
+#
+#   cities = City.create([{ name: 'Chicago' }, { name: 'Copenhagen' }])
+#   Mayor.create(name: 'Emanuel', city: cities.first)

data/doc/README_FOR_APP

@@ -0,0 +1,2 @@
+Use this README file to introduce your application and point to useful places in the API for learning more.
+Run "rake doc:app" to generate API documentation for your models, controllers, helpers, and libraries.

data/lib/plinth/version.rb

@@ -0,0 +1,3 @@
+module Plinth
+  VERSION = "0.0.1.beta.1"
+end

data/lib/plinth.rb

@@ -0,0 +1,11 @@
+require "plinth/version"
+require 'sprockets/railtie'
+require 'sass-rails'
+
+module Plinth
+  class Railtie < ::Rails::Railtie
+    require "modular-scale"
+  end
+end
+
+require 'sass/rails'

data/lib/templates/haml/scaffold/_form.html.haml

@@ -0,0 +1,8 @@
+= semantic_form_for @<%= singular_name %> do |f|
+  = f.inputs do
+  <%- attributes.each do |attribute| -%>
+    = f.input :<%= attribute.name %>
+  <%- end -%>
+
+  = f.actions do
+    = f.action :submit, :as => :input

data/plinth.gemspec

@@ -0,0 +1,33 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path('../lib/plinth/version', __FILE__)
+
+Gem::Specification.new do |gem|
+  gem.authors       = ["Adam Taylor", "Vincent Siebert"]
+  gem.email         = ["ad@adtaylor.co.uk", "vincent@siebert.im"]
+  gem.description   = %q{Plinth - basic framework}
+  gem.summary       = %q{Plinth is used internally at the Beans Group in order
+  to facilitate speedy rollouts of new sites using similar interaction libraries
+  and patterns. It also allows for rapid prototyping of products.}
+  gem.homepage      = "https://github.com/thebeansgroup/plinth"
+
+  gem.files         = `git ls-files`.split($\).grep(/^(?!config)/)
+  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+  gem.name          = "plinth"
+  gem.require_paths = ["lib"]
+  gem.version       = Plinth::VERSION
+
+  gem.add_dependency "haml",          [">= 3.1", '< 4.1']
+  gem.add_dependency "activesupport", [">= 3.1", '< 4.1']
+  gem.add_dependency "actionpack",    [">= 3.1", '< 4.1']
+  gem.add_dependency "railties",      [">= 3.1", '< 4.1']
+  gem.add_dependency "modular-scale", [">= 1.0", '< 2.0']
+  gem.add_dependency "compass-rails", ['>= 1.0', '< 2.0']
+  gem.add_dependency "sass-rails",    ['>= 3.1', '< 4.1']
+  gem.add_dependency "haml-coderay",  ['>= 0.2', '< 0.3']
+
+  gem.add_development_dependency "rails",   [">= 3.1", '< 4.1']
+  gem.add_development_dependency "bundler", ['>= 1.3', '< 2.0']
+  gem.add_development_dependency "sqlite3", ['>= 1.3', '< 2.0']
+
+end

data/public/404.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>The page you were looking for doesn't exist (404)</title>
+  <style type="text/css">
+    body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
+    div.dialog {
+      width: 25em;
+      padding: 0 4em;
+      margin: 4em auto 0 auto;
+      border: 1px solid #ccc;
+      border-right-color: #999;
+      border-bottom-color: #999;
+    }
+    h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
+  </style>
+</head>
+
+<body>
+  <!-- This file lives in public/404.html -->
+  <div class="dialog">
+    <h1>The page you were looking for doesn't exist.</h1>
+    <p>You may have mistyped the address or the page may have moved.</p>
+  </div>
+</body>
+</html>

data/public/422.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>The change you wanted was rejected (422)</title>
+  <style type="text/css">
+    body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
+    div.dialog {
+      width: 25em;
+      padding: 0 4em;
+      margin: 4em auto 0 auto;
+      border: 1px solid #ccc;
+      border-right-color: #999;
+      border-bottom-color: #999;
+    }
+    h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
+  </style>
+</head>
+
+<body>
+  <!-- This file lives in public/422.html -->
+  <div class="dialog">
+    <h1>The change you wanted was rejected.</h1>
+    <p>Maybe you tried to change something you didn't have access to.</p>
+  </div>
+</body>
+</html>

data/public/500.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>We're sorry, but something went wrong (500)</title>
+  <style type="text/css">
+    body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
+    div.dialog {
+      width: 25em;
+      padding: 0 4em;
+      margin: 4em auto 0 auto;
+      border: 1px solid #ccc;
+      border-right-color: #999;
+      border-bottom-color: #999;
+    }
+    h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
+  </style>
+</head>
+
+<body>
+  <!-- This file lives in public/500.html -->
+  <div class="dialog">
+    <h1>We're sorry, but something went wrong.</h1>
+  </div>
+</body>
+</html>