elements 0.2.0

data/app/assets/stylesheets/elements/layout.css.scss

@@ -0,0 +1,377 @@
+/* --------------------------------------------------------------------------------
+ * Elements - Rails Starting Base
+ *
+ * layout.css.scss
+ *
+* Defines the basic layout of the page and the elements that can be used to make the 
+* page turn into whatever flow we want
+ *
+ * @author : Jais Cheema 
+ *
+-----------------------------------------------------------------------------------*/
+
+@mixin lr-align {
+	&.left {
+		float:left;
+		margin:20px 0 0 0;
+	}
+
+	&.right {
+		float:left;
+		margin:20px 0 0 20px;
+	}
+}
+
+
+body {
+	.body_container {
+		width:100%;
+		min-height:100%;
+		height:auto !important;
+		height:100%;
+		margin:0 auto -280px;	
+
+		#login_container {
+
+			padding-top:30px;
+			background:url('/assets/elements/login_bg.jpg');
+
+			#logo {
+				background:url('/assets/elements/header-logo.png') no-repeat;
+				height:62px;
+				width:278px;
+				margin:5px auto;
+			}
+
+			#after_form {
+				margin-top:60px;
+			}
+
+			#flash {
+				div {
+					text-align:left;
+					padding:10px 30px;
+					background:#f48585;
+					text-shadow:0 1px 0 #FCC;
+					-moz-border-radius:5px;
+					-webkit-border-radius:5px;
+					border-radius:5px;
+					-moz-box-shadow:0 1px 0 #b7dcea,inset 0 1px 3px #d55e5e;
+					-webkit-box-shadow:0 1px 0 #b7dcea,inset 0 1px 3px #d55e5e;
+					box-shadow:0 1px 0 #b7dcea,inset 0 1px 3px #d55e5e;
+					color:#971E0D;
+					font-family:14px;
+				}
+				margin-bottom:20px;
+			}
+
+			#login_form {
+				width:410px;
+				margin:auto;
+
+				h2 {
+					font-family:KlavikaMedium;
+					font-size:32px;
+					-moz-text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);
+					-webkit-text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);
+					text-shadow:0 1px 0 rgba(255, 255, 255, 0.4);
+					letter-spacing:-1px;
+					margin-bottom:10px;
+				}
+
+				form {
+					margin-top:10px;
+					ol {
+						list-style:none;
+						margin:0 0 12px 0;
+
+						li {
+							list-style-position:outside;
+							margin:0 0 12px 0;
+
+							input[type="text"], input[type="password"] {
+								color:#ff9900;
+								font:KlavikMedium 20px;
+								padding:8px;
+								letter-spacing:1px;
+								-webkit-border-radius:4px;
+								-moz-border-radius:4px;
+								border-radius:4px;
+								-webkit-box-shadow:0 1px 0 white,inset 0 2px 2px rgba(0,0,0,0.1);
+								-moz-box-shadow:0 1px 0 white,inset 0 2px 2px rgba(0,0,0,0.1);
+								box-shadow:0 1px 0 white,inset 0 2px 2px rgba(0,0,0,0.1);
+								float:left;
+								width:390px;
+								border:1px solid gray;
+							}
+						}
+					}
+
+					fieldset {
+						&.inputs {
+							li {
+								overflow:hidden;
+								margin-bottom:10px;
+
+								label {
+									margin-top:4px;
+									width:180px;
+									float:left;
+								}
+							}
+						}
+
+						&.buttons {
+							margin-top:25px;
+
+							li {
+								display:inline;
+
+								a {
+									margin-left:20px;
+									text-decoration:none;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.primary_container {
+
+			.width_container {
+				position:relative;
+				margin:0px auto;
+				width:1024px;
+
+				&.modal {
+					width:100%;
+				}
+
+				&.padd {
+					margin-bottom:50px;
+				}
+
+				.absoluted {
+					position:absolute;
+				}
+
+				.join_container {
+					overflow:auto;
+				}
+
+				.flash {
+				
+					.box {
+						margin:20px;
+						margin-bottom:10px;
+						padding:5px;
+						padding-left:60px;
+
+						&.alert {
+							background:url('/assets/elements/warning.png') no-repeat 20px 1px;
+							background-color:#F7e9Af;
+							border:1px solid #FFCC00;
+						}
+
+						&.notice {
+							background:url('/assets/elements/info.png') no-repeat 20px 1px;
+							background-color:#CFC;
+							border:solid 1px #6C6;
+						}
+
+						&.error {
+							background:url('/assets/elements/block.png') no-repeat 20px 1px;
+							background-color:#FCC;
+							border:1px solid #C66;
+						}
+					}
+				}
+
+				header {
+					margin-top:20px;
+
+					nav {
+						ul {
+							list-style:none;
+							height:40px;
+							font-size:17px;
+
+							li {
+								display:block;
+								float:left;
+								text-align:right;
+
+								a {
+									padding:3px 20px;
+									display:block;
+								}
+							}
+						}
+					}
+				}
+
+				.content {
+					&.main {
+						width:675px;
+
+						&.stretch {
+							width:1024px;
+							clear:both;
+						}
+
+						@include lr-align;
+					}
+
+					&.aside {
+						width:325px;
+						@include lr-align;
+					}
+				}
+
+				.breadcrumbs {
+					margin-top:25px;
+
+					ul {
+						height:30px;
+						line-height:30px;
+						border-top:1px solid #CACACA;
+						border-bottom:1px solid #CACACA;
+						overflow:hidden;
+						margin:0px;
+						margin-left:30px;
+						margin-right:30px;
+						padding:5px;
+
+						li {
+							list-style-type:none;
+							float:left;
+							padding-left:10px;
+						}
+
+						a {
+							height:30px;
+							display:block;
+							background:url('/assets/elements/bc_separator.png') no-repeat right;
+							padding-right:15px;
+						}
+
+						.home
+						{
+							border:none;
+							margin:8px 0px;
+						}
+					}
+				}
+
+				.top_shadow_border {
+					background:url('/assets/elements/shadow.png') no-repeat top center;
+					border-top:1px solid gainsboro;
+					padding-top:20px;
+				}
+
+				.page_title {
+					padding-bottom:40px;
+					text-align:center;
+					padding-top:20px;
+						
+					h1 {
+						display:block;
+						margin:auto;
+						width:800px;
+					}
+
+					&.left {
+						text-align:left;
+						padding-bottom:20px;
+						padding-left:12px;
+
+						h1 {
+							width:100%;
+						}
+					}
+
+					&.right {
+						text-align:right;
+						padding-bottom:10px;
+						padding-right:12px;
+
+						h1 {
+							width:100%;
+						}
+					}
+				}
+			}
+
+			&.special {
+				background:#E4E4E4 url('/assets/elements/shadow.png') center 0 no-repeat;
+				border-top:1px solid gainsboro;
+				margin:14px 0 0 0;
+				padding:40px 0;
+			}
+		}
+
+		.push {
+			height:280px;
+			clear:both;
+		}
+	}
+
+	.footer {
+		width:100%;
+		height:229px;
+		border-top:1px solid #DDD;
+		clear:both;
+		padding-top:40px;
+		padding-bottom:10px;
+
+		.container {
+			position:relative;
+			margin:0px auto;
+			width:1024px;
+			padding:0px 20px;
+
+			nav {
+				overflow:auto;
+
+				section {
+					float:left;
+					margin-right:25px;
+					width:200px;
+
+					ul {
+						list-style:none;
+						margin-left:10px;
+					}
+				}
+			}
+
+			p.copyright {
+				margin-top:40px;
+				display:block;
+				float:left;
+				height:20px;
+			}
+		}
+	}
+
+	/** Definite Container classes */
+
+	.col {
+		float:left;
+		margin-left:15px;
+
+		&.oneof2 {
+			width:490px;
+		}
+
+		&.oneof3 {
+			width:325px;
+		}
+
+		&.oneof4 {
+			width:230px;
+		}
+	}
+}

data/app/assets/stylesheets/elements/plugins/reveal.css

@@ -0,0 +1,66 @@
+/*	--------------------------------------------------
+	Reveal Modals
+	-------------------------------------------------- */
+		
+	.reveal-modal-bg { 
+		position: fixed; 
+		height: 100%;
+		width: 100%;
+		background: #000;
+		background: rgba(0,0,0,.8);
+		z-index: 100;
+		display: none;
+		top: 0;
+		left: 0; 
+		}
+	
+	.reveal-modal {
+		visibility: hidden;
+		top: 100px; 
+		left: 50%;
+		margin-left: -300px;
+		width: 520px;
+		background: #eee url('/assets/elements/plugins/modal-gloss.png') no-repeat -200px -80px;
+		position: absolute;
+		z-index: 101;
+		padding: 30px 40px 34px;
+		-moz-border-radius: 5px;
+		-webkit-border-radius: 5px;
+		border-radius: 5px;
+		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
+		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
+		-box-shadow: 0 0 10px rgba(0,0,0,.4);
+		}
+		
+	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
+	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
+	.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
+	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}
+	
+	.reveal-modal .close-reveal-modal {
+		font-size: 22px;
+		line-height: .5;
+		position: absolute;
+		top: 8px;
+		right: 11px;
+		color: #aaa;
+		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
+		font-weight: bold;
+		cursor: pointer;
+		} 
+	/*
+		
+	NOTES
+	
+	Close button entity is ×
+	
+	Example markup
+	
+	<div id="myModal" class="reveal-modal">
+		<h2>Awesome. I have it.</h2>
+		<p class="lead">Your couch.  I it's mine.</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
+		<a class="close-reveal-modal">&#215;</a>
+	</div>
+	
+	*/

data/app/assets/stylesheets/elements/reset.css.scss

@@ -0,0 +1,26 @@
+/* --------------------------------------------------------------------------------
+ * Elements - Rails Starting Base
+ *
+ * reset.css.scss
+ *
+ * Inherited from Blueprint css framework ( http://blueprintcss.org )
+ *
+ * @author : Jais Cheema 
+ *
+-----------------------------------------------------------------------------------*/
+
+html {margin:0;padding:0;border:0;}
+body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
+article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
+body {line-height:1.5;background:white;}
+table {border-collapse:separate;border-spacing:0;}
+caption, th, td {text-align:left;font-weight:normal;float:none !important;}
+table, th, td {vertical-align:middle;}
+blockquote:before, blockquote:after, q:before, q:after {content:'';}
+blockquote, q {quotes:"" "";}
+a img {border:none;}
+:focus {outline:0;}
+
+html,body {
+	height:100%;
+}

data/app/assets/stylesheets/elements/typography.css.scss

@@ -0,0 +1,120 @@
+/* --------------------------------------------------------------------------------
+ * Elements - Rails Starting Base
+ *
+ * typography.css.scss
+ *
+ * Defines some of the base styles for the elements used in layout
+ *
+ * @author : Jais Cheema 
+ *
+-----------------------------------------------------------------------------------*/
+
+h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }
+
+h1 { font-size: 3em; }
+h2 { font-size: 2em;}
+h3 { font-size: 1.5em;}
+h4 { font-size: 1.2em;}
+h5 { font-size: 1em;}
+h6 { font-size: 1em; }
+
+/** The Colors to be used everywhere */
+
+$body_background_color: white;
+$text_color: #999;
+$link_color: #ff9900;
+$link_hover_color : #ddd;
+$nav_color: #666666;
+/** End Colors */
+
+
+body {
+	font-family: Helevetica Neue, Helevetica, Verdana, Georgia, sans-serif;
+	
+	color: $text_color;
+	background-color: $body_background_color;
+
+	header {
+		nav {
+			color: $nav_color;
+
+			ul {
+				font-size:17px;
+
+				li {
+					a {
+						color: $link_color;	
+						text-decoration:none;	
+					}
+					
+					&.active a {
+						color: $link_hover_color;
+					}
+					
+					a:hover {
+						color: $link_hover_color;
+					}			
+				}
+			}
+		}
+	}
+
+	.breadcrumbs {
+		ul {
+			font-size:12px;
+			color:#9b9b9b;
+		}
+
+		a {
+			text-decoration:none;
+			color:#454545;
+
+			&:hover {
+				color:#35acc5;
+			}
+		}
+	}
+
+	.page_title{
+		h1 {
+			font-size:46px;
+			font-style:bold;
+			letter-spacing:-1px;
+		}
+
+		p {
+			font-size:24px;
+		}
+
+		&.left {
+			h1 {
+				font-size:38px;
+				letter-spacing:1px;
+			}
+		}
+	}
+
+	.footer {
+		.container {
+			section {
+				h3 {
+					font-size:20px;
+				}
+
+				a {
+					color: $link_color;
+					font-size:14px;
+					text-decoration:none;
+					
+					&:hover {
+						color: $link_hover_color;
+					}
+				}
+			}
+
+			.copyright {
+				font-size:15px;
+			}
+		}
+	}
+}

data/app/controllers/elements/application_controller.rb

@@ -0,0 +1,4 @@
+module Elements
+  class ApplicationController < ActionController::Base
+  end
+end

data/app/helpers/elements/application_helper.rb

@@ -0,0 +1,4 @@
+module Elements
+  module ApplicationHelper
+  end
+end

data/app/helpers/error_messages_helper.rb

@@ -0,0 +1,23 @@
+module ErrorMessagesHelper
+  # Render error messages for the given objects. The :message and :header_message options are allowed.
+  def error_messages_for(*objects)
+    options = objects.extract_options!
+    options[:header_message] ||= I18n.t(:"activerecord.errors.header", :default => "Invalid Fields")
+    options[:message] ||= I18n.t(:"activerecord.errors.message", :default => "Correct the following errors and try again.")
+    messages = objects.compact.map { |o| o.errors.full_messages }.flatten
+    unless messages.empty?
+      content_tag(:div, :class => "error_messages") do
+        list_items = messages.map { |msg| content_tag(:li, msg) }
+        content_tag(:h2, options[:header_message]) + content_tag(:p, options[:message]) + content_tag(:ul, list_items.join.html_safe)
+      end
+    end
+  end
+
+  module FormBuilderAdditions
+    def error_messages(options = {})
+      @template.error_messages_for(@object, options)
+    end
+  end
+end
+
+ActionView::Helpers::FormBuilder.send(:include, ErrorMessagesHelper::FormBuilderAdditions)

data/app/helpers/layout_helper.rb

@@ -0,0 +1,22 @@
+# These helper methods can be called in your template to set variables to be used in the layout
+# This module should be included in all views globally,
+# to do so you may need to add this line to your ApplicationController
+#   helper :layout
+module LayoutHelper
+  def title(page_title, show_title = true)
+    content_for(:title) { h(page_title.to_s) }
+    @show_title = show_title
+  end
+
+  def show_title?
+    @show_title
+  end
+
+  def stylesheet(*args)
+    content_for(:head) { stylesheet_link_tag(*args) }
+  end
+
+  def javascript(*args)
+    content_for(:head) { javascript_include_tag(*args) }
+  end
+end

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

@@ -0,0 +1,34 @@
+!!!
+%html
+  %head
+    %meta{'charset' => 'utf-8'}
+    %meta{'http-equiv' => 'X-UA-Compatible', :content => 'IE-Edge,chrome=1'}
+    %meta{:name => 'description', :content => ''}
+    %meta{:name => 'author', :content => 'Jais Cheema'}
+    %meta{:name => 'viewport', :content => 'width=device-width,initial-scale=1'}
+    
+    %title= content_for?(:title) ? yield(:title) : "Untitled"
+    
+    = stylesheet_link_tag 'elements/application' 
+    /[if lt IE 8]
+      = stylesheet_link_tag 'elements/ie' 
+    
+    = stylesheet_link_tag 'application' 
+    
+    = javascript_include_tag :application
+    
+    = csrf_meta_tags
+
+    = yield(:head)
+  %body
+    .body_container
+      = render 'layouts/elements/header'
+      = render 'layouts/elements/flash_messages'
+      - if show_title?
+        .primary_container
+          .width_container
+            .content.page_title.right
+              = content_tag :h1, yield(:title)
+      = yield
+      .push
+    = render 'layouts/elements/footer'

data/app/views/layouts/elements/_flash_messages.html.haml

@@ -0,0 +1,8 @@
+- if flash and flash.keys.count > 0
+  .primary_container
+    .width_container
+      .content.flash
+        - flash.each do |name,msg|
+          - if msg.is_a?(String)
+            .box{ :class => "#{name}"}
+              = msg

data/app/views/layouts/elements/_footer.html.haml

@@ -0,0 +1,12 @@
+.footer
+  .container
+    %nav
+      %section
+        %h3 Useful Links
+        %ul
+          %li
+            %a{:href => "/about-us"}About Us
+          %li
+            %a{:href => "/legal"}Legal
+    %p.copyright
+      2011 Jais Cheema.

data/app/views/layouts/elements/_header.html.haml

@@ -0,0 +1,4 @@
+.primary_container
+  .width_container
+    %header.content
+      = render 'layouts/elements/nav'

data/app/views/layouts/elements/_nav.html.haml

@@ -0,0 +1,6 @@
+%nav
+   %ul
+      %li.active
+         %a{:href => "/"}Home
+      %li
+         %a{:href => "/login" }Login