Added blueprint css

CoryFoy · Oct 31, 2011 · cb01ef9 · cb01ef9
1 parent 5b8c43f
commit cb01ef9
Show file tree

Hide file tree

Showing 36 changed files with 1,476 additions and 15 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/app/views/events/_event_form.html.erb b/app/views/events/_event_form.html.erb
@@ -0,0 +1,13 @@
+<div class="span-12">
+<fieldset><legend>Create an event</legend>
+<%= form_for @event do |f| %>
+  <%= f.label :name, "Event Name: (Required)", :class => "required" %><br /><%= f.text_field :name, :class => "text", :required => true %> <br />
+  <%= f.label :date, "Event Date:" %><br /><%= f.text_field :date, :class => "text" %> <br />
+  <%= f.label :location, "Location:" %><br /><%= f.text_field :location, :class => "text" %> <br />
+  <%= f.label :host_email, "Your Email Address: (Required)", :class => "required" %><br /><%= f.text_field :host_email, :class => "text", :required => true %> <br />
+  <%= f.label :description, "Description:" %> <br />
+  <%= f.text_area :description, :class => "text" %><br />
+  <%= f.submit %>
+<% end %>
+</fieldset>
+</div>
diff --git a/app/views/events/_response_form.html.erb b/app/views/events/_response_form.html.erb
@@ -1,12 +1,13 @@
-<div id="response_form">
-  <h2>Are you coming?</h2>
+<div id="response_form" class="span-12">
+  <fieldset><legend>Are you coming?</legend>
   <%= parent_form.fields_for :response do |builder| %>
     <%= builder.radio_button :is_coming, "Yes" %><%= builder.label :is_coming, "Yes" %>
     <%= builder.radio_button :is_coming, "No" %><%= builder.label :is_coming, "No" %>
     <%= builder.radio_button :is_coming, "Maybe", :checked => true %><%= builder.label :is_coming, "Maybe" %><br />
     <%= builder.label :name, "Your Name:" %><%= builder.text_field :name %><br />
     <%= builder.label :email, "Your Email Address:" %><%= builder.text_field :email %><br />
     <%= builder.label :comments, "Comments:" %><br /><%= builder.text_area :comments %><br />
-    <%= builder.submit %>
+    <%= builder.submit 'Respond!' %>
   <% end %>
+</fieldset>
 </div>
diff --git a/app/views/events/show.html.erb b/app/views/events/show.html.erb
@@ -1,5 +1,5 @@
 <%- flash.each do |key, msg| -%>
-  <div id="<%= key %>">
+  <div class="notice" id="<%= key %>">
     <p style="float:right;"><%= link_to_function 'X', "$('##{key}').fadeOut('slow', function(){})" %></p>
     <p><%= msg %></p>
     <div class="clear"></div>
@@ -9,7 +9,12 @@
 <%= form_for @event do |f| %>
   <%= f.hidden_field :token, :value => @event.token %>
   <h1>Welcome to "<%=@event.name %>"!</h1> 
-  Responses: <%=@counts[:yes] %> Yes, <%=@counts[:no] %> No, <%=@counts[:maybe] %> Maybe<br />
+  Responses: 
+  <ul>
+    <li><%=@counts[:yes] %> Yes</li> 
+    <li><%=@counts[:no] %> No</li> 
+    <li><%=@counts[:maybe] %> Maybe</li>
+  </ul>
 To be held on <b><%=@event.date %></b> at <em><%=@event.location %></em><br />
 Description: <br />
 <%=@event.description %>

diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -1,11 +1,5 @@
 <h1>Respond to Us!</h1>
-<%= form_for @event do |f| %>
-
-  <%= f.label :name, "Event Name:" %><%= f.text_field :name %> <br />
-  <%= f.label :date, "Event Date:" %><%= f.text_field :date %> <br />
-  <%= f.label :location, "Location:" %><%= f.text_field :location %> <br />
-  <%= f.label :host_email, "Your Email Address:" %><%= f.text_field :host_email %> <br />
-  <%= f.label :description, "Description:" %> <br />
-  <%= f.text_area :description %><br />
-  <%= f.submit %>
-<% end %>
+<p>The premise is simple. You have an event, and need a way to let people respond to let you know if they are going to be there, but don't want to have to set up accounts, force everyone to put in their email addresses, or be able to send the link through non-electronic means.<p>
+<p>Respond To Us is a simple RSVP application. You put in your event and get a unique URL. You send the URL out, and people can respond to you, quickly and simply. You get notified when people are responding. No sign up, registration, or hoop jumping necessary.</p>
+<p>Fill out the form below to get started now!</p>
+<%= render :partial => 'events/event_form' %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -2,6 +2,9 @@
 <html>
 <head>
   <title>Respond To Us - An Easier Way to Get Responses For Your Events!</title>
+  <%= stylesheet_link_tag 'blueprint/screen', :media => "screen, projection" %>
+  <%= stylesheet_link_tag 'blueprint/print', :media => "print" %>
+  <!--[if lt IE8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif] -->
   <%= stylesheet_link_tag    "application" %>
   <%= javascript_include_tag "application" %>
   <%= csrf_meta_tags %>

diff --git a/vendor/assets/stylesheets/blueprint/ie.css b/vendor/assets/stylesheets/blueprint/ie.css
@@ -0,0 +1,36 @@
+/* -----------------------------------------------------------------------
+
+
+ Blueprint CSS Framework 1.0.1
+ http://blueprintcss.org
+
+   * Copyright (c) 2007-Present. See LICENSE for more info.
+   * See README for instructions on how to use Blueprint.
+   * For credits and origins, see AUTHORS.
+   * This is a compressed file. See the sources in the 'src' directory.
+
+----------------------------------------------------------------------- */
+
+/* ie.css */
+body {text-align:center;}
+.container {text-align:left;}
+* html .column, * html .span-1, * html .span-2, * html .span-3, * html .span-4, * html .span-5, * html .span-6, * html .span-7, * html .span-8, * html .span-9, * html .span-10, * html .span-11, * html .span-12, * html .span-13, * html .span-14, * html .span-15, * html .span-16, * html .span-17, * html .span-18, * html .span-19, * html .span-20, * html .span-21, * html .span-22, * html .span-23, * html .span-24 {display:inline;overflow-x:hidden;}
+* html legend {margin:0px -8px 16px 0;padding:0;}
+sup {vertical-align:text-top;}
+sub {vertical-align:text-bottom;}
+html>body p code {*white-space:normal;}
+hr {margin:-8px auto 11px;}
+img {-ms-interpolation-mode:bicubic;}
+.clearfix, .container {display:inline-block;}
+* html .clearfix, * html .container {height:1%;}
+fieldset {padding-top:0;}
+legend {margin-top:-0.2em;margin-bottom:1em;margin-left:-0.5em;}
+textarea {overflow:auto;}
+label {vertical-align:middle;position:relative;top:-0.25em;}
+input.text, input.title, textarea {background-color:#fff;border:1px solid #bbb;}
+input.text:focus, input.title:focus {border-color:#666;}
+input.text, input.title, textarea, select {margin:0.5em 0;}
+input.checkbox, input.radio {position:relative;top:.25em;}
+form.inline div, form.inline p {vertical-align:middle;}
+form.inline input.checkbox, form.inline input.radio, form.inline input.button, form.inline button {margin:0.5em 0;}
+button, input.button {position:relative;top:0.25em;}
diff --git a/vendor/assets/stylesheets/blueprint/plugins/buttons/icons/cross.png b/vendor/assets/stylesheets/blueprint/plugins/buttons/icons/cross.png
diff --git a/vendor/assets/stylesheets/blueprint/plugins/buttons/icons/key.png b/vendor/assets/stylesheets/blueprint/plugins/buttons/icons/key.png
diff --git a/vendor/assets/stylesheets/blueprint/plugins/buttons/icons/tick.png b/vendor/assets/stylesheets/blueprint/plugins/buttons/icons/tick.png
diff --git a/vendor/assets/stylesheets/blueprint/plugins/buttons/readme.txt b/vendor/assets/stylesheets/blueprint/plugins/buttons/readme.txt
@@ -0,0 +1,32 @@
+Buttons
+
+* Gives you great looking CSS buttons, for both <a> and <button>.
+* Demo: particletree.com/features/rediscovering-the-button-element
+
+
+Credits
+----------------------------------------------------------------
+
+* Created by Kevin Hale [particletree.com]
+* Adapted for Blueprint by Olav Bjorkoy [bjorkoy.com]
+
+
+Usage
+----------------------------------------------------------------
+
+1) Add this plugin to lib/settings.yml.
+   See compress.rb for instructions.
+
+2) Use the following HTML code to place the buttons on your site:
+
+  <button type="submit" class="button positive">
+    <img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save
+  </button>
+
+  <a class="button" href="/password/reset/">
+    <img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password
+  </a>
+
+  <a href="#" class="button negative">
+    <img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
+  </a>
diff --git a/vendor/assets/stylesheets/blueprint/plugins/buttons/screen.css b/vendor/assets/stylesheets/blueprint/plugins/buttons/screen.css
@@ -0,0 +1,97 @@
+/* -------------------------------------------------------------- 
+  
+   buttons.css
+   * Gives you some great CSS-only buttons.
+   
+   Created by Kevin Hale [particletree.com]
+   * particletree.com/features/rediscovering-the-button-element
+
+   See Readme.txt in this folder for instructions.
+
+-------------------------------------------------------------- */
+
+a.button, button {
+  display:block;
+  float:left;
+  margin: 0.7em 0.5em 0.7em 0;
+  padding:5px 10px 5px 7px;   /* Links */
+
+  border:1px solid #dedede;
+  border-top:1px solid #eee;
+  border-left:1px solid #eee;
+
+  background-color:#f5f5f5;
+  font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
+  font-size:100%;
+  line-height:130%;
+  text-decoration:none;
+  font-weight:bold;
+  color:#565656;
+  cursor:pointer;
+}
+button {
+  width:auto;
+  overflow:visible;
+  padding:4px 10px 3px 7px;   /* IE6 */
+}
+button[type] {
+  padding:4px 10px 4px 7px;   /* Firefox */
+  line-height:17px;           /* Safari */
+}
+*:first-child+html button[type] {
+  padding:4px 10px 3px 7px;   /* IE7 */
+}
+button img, a.button img{
+  margin:0 3px -3px 0 !important;
+  padding:0;
+  border:none;
+  width:16px;
+  height:16px;
+  float:none;
+}
+
+
+/* Button colors
+-------------------------------------------------------------- */
+
+/* Standard */
+button:hover, a.button:hover{
+  background-color:#dff4ff;
+  border:1px solid #c2e1ef;
+  color:#336699;
+}
+a.button:active{
+  background-color:#6299c5;
+  border:1px solid #6299c5;
+  color:#fff;
+}
+
+/* Positive */
+body .positive {
+  color:#529214;
+}
+a.positive:hover, button.positive:hover {
+  background-color:#E6EFC2;
+  border:1px solid #C6D880;
+  color:#529214;
+}
+a.positive:active {
+  background-color:#529214;
+  border:1px solid #529214;
+  color:#fff;
+}
+
+/* Negative */
+body .negative {
+  color:#d12f19;
+}
+a.negative:hover, button.negative:hover {
+  background-color:#fbe3e4;
+  border:1px solid #fbc2c4;
+  color:#d12f19;
+}
+a.negative:active {
+  background-color:#d12f19;
+  border:1px solid #d12f19;
+  color:#fff;
+}
diff --git a/vendor/assets/stylesheets/blueprint/plugins/fancy-type/readme.txt b/vendor/assets/stylesheets/blueprint/plugins/fancy-type/readme.txt
@@ -0,0 +1,14 @@
+Fancy Type
+
+* Gives you classes to use if you'd like some 
+  extra fancy typography. 
+
+Credits and instructions are specified above each class
+in the fancy-type.css file in this directory.
+
+
+Usage
+----------------------------------------------------------------
+
+1) Add this plugin to lib/settings.yml.
+   See compress.rb for instructions.
diff --git a/vendor/assets/stylesheets/blueprint/plugins/fancy-type/screen.css b/vendor/assets/stylesheets/blueprint/plugins/fancy-type/screen.css
@@ -0,0 +1,71 @@
+/* --------------------------------------------------------------
+
+   fancy-type.css
+   * Lots of pretty advanced classes for manipulating text.
+
+   See the Readme file in this folder for additional instructions.
+
+-------------------------------------------------------------- */
+
+/* Indentation instead of line shifts for sibling paragraphs. */
+   p + p { text-indent:2em; margin-top:-1.5em; }
+   form p + p  { text-indent: 0; } /* Don't want this in forms. */
+
+
+/* For great looking type, use this code instead of asdf:
+   <span class="alt">asdf</span>
+   Best used on prepositions and ampersands. */
+
+.alt {
+  color: #666;
+  font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif;
+  font-style: italic;
+  font-weight: normal;
+}
+
+
+/* For great looking quote marks in titles, replace "asdf" with:
+   <span class="dquo">&#8220;</span>asdf&#8221;
+   (That is, when the title starts with a quote mark).
+   (You may have to change this value depending on your font size). */
+
+.dquo { margin-left: -.5em; }
+
+
+/* Reduced size type with incremental leading
+   (http://www.markboulton.co.uk/journal/comments/incremental_leading/)
+
+   This could be used for side notes. For smaller type, you don't necessarily want to
+   follow the 1.5x vertical rhythm -- the line-height is too much.
+
+   Using this class, it reduces your font size and line-height so that for
+   every four lines of normal sized type, there is five lines of the sidenote. eg:
+
+   New type size in em's:
+     10px (wanted side note size) / 12px (existing base size) = 0.8333 (new type size in ems)
+
+   New line-height value:
+     12px x 1.5 = 18px (old line-height)
+     18px x 4 = 72px
+     72px / 5 = 14.4px (new line height)
+     14.4px / 10px = 1.44 (new line height in em's) */
+
+p.incr, .incr p {
+  font-size: 10px;
+  line-height: 1.44em;
+  margin-bottom: 1.5em;
+}
+
+
+/* Surround uppercase words and abbreviations with this class.
+   Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/] */
+
+.caps {
+  font-variant: small-caps;
+  letter-spacing: 1px;
+  text-transform: lowercase;
+  font-size:1.2em;
+  line-height:1%;
+  font-weight:bold;
+  padding:0 2px;
+}
diff --git a/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/doc.png b/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/doc.png
diff --git a/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/email.png b/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/email.png
diff --git a/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/external.png b/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/external.png
diff --git a/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/feed.png b/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/feed.png
diff --git a/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/im.png b/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/im.png
diff --git a/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/lock.png b/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/lock.png
diff --git a/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/pdf.png b/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/pdf.png
diff --git a/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/visited.png b/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/visited.png
diff --git a/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/xls.png b/vendor/assets/stylesheets/blueprint/plugins/link-icons/icons/xls.png
diff --git a/vendor/assets/stylesheets/blueprint/plugins/link-icons/readme.txt b/vendor/assets/stylesheets/blueprint/plugins/link-icons/readme.txt
@@ -0,0 +1,18 @@
+Link Icons
+* Icons for links based on protocol or file type.
+
+This is not supported in IE versions < 7.
+
+
+Credits
+----------------------------------------------------------------
+
+* Marc Morgan
+* Olav Bjorkoy  [bjorkoy.com]
+
+
+Usage
+----------------------------------------------------------------
+
+1) Add this line to your HTML:
+  <link rel="stylesheet" href="css/blueprint/plugins/link-icons/screen.css" type="text/css" media="screen, projection">
diff --git a/vendor/assets/stylesheets/blueprint/plugins/link-icons/screen.css b/vendor/assets/stylesheets/blueprint/plugins/link-icons/screen.css
@@ -0,0 +1,42 @@
+/* --------------------------------------------------------------
+
+   link-icons.css
+   * Icons for links based on protocol or file type.
+
+   See the Readme file in this folder for additional instructions.
+
+-------------------------------------------------------------- */
+
+/* Use this class if a link gets an icon when it shouldn't. */
+body a.noicon {
+  background:transparent none !important;
+  padding:0 !important;
+  margin:0 !important;
+}
+
+/* Make sure the icons are not cut */
+a[href^="http:"], a[href^="https:"],
+a[href^="http:"]:visited, a[href^="https:"]:visited,
+a[href^="mailto:"], a[href$=".pdf"], a[href$=".doc"], a[href$=".xls"],
+a[href$=".rss"], a[href$=".rdf"], a[href^="aim:"] {
+  padding:2px 22px 2px 0;
+  margin:-2px 0;
+  background-repeat: no-repeat;
+  background-position: right center;
+}
+
+/* External links */
+a[href^="http:"]          { background-image: url(icons/external.png); }
+a[href^="https:"]         { background-image: url(icons/lock.png); }
+a[href^="mailto:"]        { background-image: url(icons/email.png); }
+a[href^="http:"]:visited  { background-image: url(icons/visited.png); }
+
+/* Files */
+a[href$=".pdf"]   { background-image: url(icons/pdf.png); }
+a[href$=".doc"]   { background-image: url(icons/doc.png); }
+a[href$=".xls"]   { background-image: url(icons/xls.png); }
+
+/* Misc */
+a[href$=".rss"],
+a[href$=".rdf"]   { background-image: url(icons/feed.png); }
+a[href^="aim:"]   { background-image: url(icons/im.png); }