Added grid layout

public/grid.css

@@ -0,0 +1,338 @@
+/*
+	Variable Grid System.
+	Learn more ~ http://www.spry-soft.com/grids/
+	Based on 960 Grid System - http://960.gs/
+
+	Licensed under GPL and MIT.
+*/
+
+
+/* Containers
+----------------------------------------------------------------------------------------------------*/
+.container_12 {
+	margin-left: auto;
+	margin-right: auto;
+	width: 756px;
+}
+
+/* Grid >> Global
+----------------------------------------------------------------------------------------------------*/
+
+.grid_1,
+.grid_2,
+.grid_3,
+.grid_4,
+.grid_5,
+.grid_6,
+.grid_7,
+.grid_8,
+.grid_9,
+.grid_10,
+.grid_11,
+.grid_12 {
+	display:inline;
+	float: left;
+	position: relative;
+	margin-left: 20px;
+	margin-right: 20px;
+}
+
+/* Grid >> Children (Alpha ~ First, Omega ~ Last)
+----------------------------------------------------------------------------------------------------*/
+
+.alpha {
+	margin-left: 0;
+}
+
+.omega {
+	margin-right: 0;
+}
+
+/* Grid >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .grid_1 {
+	width:23px;
+}
+
+.container_12 .grid_2 {
+	width:86px;
+}
+
+.container_12 .grid_3 {
+	width:149px;
+}
+
+.container_12 .grid_4 {
+	width:212px;
+}
+
+.container_12 .grid_5 {
+	width:275px;
+}
+
+.container_12 .grid_6 {
+	width:338px;
+}
+
+.container_12 .grid_7 {
+	width:401px;
+}
+
+.container_12 .grid_8 {
+	width:464px;
+}
+
+.container_12 .grid_9 {
+	width:527px;
+}
+
+.container_12 .grid_10 {
+	width:590px;
+}
+
+.container_12 .grid_11 {
+	width:653px;
+}
+
+.container_12 .grid_12 {
+	width:716px;
+}
+
+
+
+/* Prefix Extra Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .prefix_1 {
+	padding-left:63px;
+}
+
+.container_12 .prefix_2 {
+	padding-left:126px;
+}
+
+.container_12 .prefix_3 {
+	padding-left:189px;
+}
+
+.container_12 .prefix_4 {
+	padding-left:252px;
+}
+
+.container_12 .prefix_5 {
+	padding-left:315px;
+}
+
+.container_12 .prefix_6 {
+	padding-left:378px;
+}
+
+.container_12 .prefix_7 {
+	padding-left:441px;
+}
+
+.container_12 .prefix_8 {
+	padding-left:504px;
+}
+
+.container_12 .prefix_9 {
+	padding-left:567px;
+}
+
+.container_12 .prefix_10 {
+	padding-left:630px;
+}
+
+.container_12 .prefix_11 {
+	padding-left:693px;
+}
+
+
+
+/* Suffix Extra Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .suffix_1 {
+	padding-right:63px;
+}
+
+.container_12 .suffix_2 {
+	padding-right:126px;
+}
+
+.container_12 .suffix_3 {
+	padding-right:189px;
+}
+
+.container_12 .suffix_4 {
+	padding-right:252px;
+}
+
+.container_12 .suffix_5 {
+	padding-right:315px;
+}
+
+.container_12 .suffix_6 {
+	padding-right:378px;
+}
+
+.container_12 .suffix_7 {
+	padding-right:441px;
+}
+
+.container_12 .suffix_8 {
+	padding-right:504px;
+}
+
+.container_12 .suffix_9 {
+	padding-right:567px;
+}
+
+.container_12 .suffix_10 {
+	padding-right:630px;
+}
+
+.container_12 .suffix_11 {
+	padding-right:693px;
+}
+
+
+
+/* Push Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .push_1 {
+	left:63px;
+}
+
+.container_12 .push_2 {
+	left:126px;
+}
+
+.container_12 .push_3 {
+	left:189px;
+}
+
+.container_12 .push_4 {
+	left:252px;
+}
+
+.container_12 .push_5 {
+	left:315px;
+}
+
+.container_12 .push_6 {
+	left:378px;
+}
+
+.container_12 .push_7 {
+	left:441px;
+}
+
+.container_12 .push_8 {
+	left:504px;
+}
+
+.container_12 .push_9 {
+	left:567px;
+}
+
+.container_12 .push_10 {
+	left:630px;
+}
+
+.container_12 .push_11 {
+	left:693px;
+}
+
+
+
+/* Pull Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+.container_12 .pull_1 {
+	left:-63px;
+}
+
+.container_12 .pull_2 {
+	left:-126px;
+}
+
+.container_12 .pull_3 {
+	left:-189px;
+}
+
+.container_12 .pull_4 {
+	left:-252px;
+}
+
+.container_12 .pull_5 {
+	left:-315px;
+}
+
+.container_12 .pull_6 {
+	left:-378px;
+}
+
+.container_12 .pull_7 {
+	left:-441px;
+}
+
+.container_12 .pull_8 {
+	left:-504px;
+}
+
+.container_12 .pull_9 {
+	left:-567px;
+}
+
+.container_12 .pull_10 {
+	left:-630px;
+}
+
+.container_12 .pull_11 {
+	left:-693px;
+}
+
+
+
+
+/* Clear Floated Elements
+----------------------------------------------------------------------------------------------------*/
+
+/* http://sonspring.com/journal/clearing-floats */
+
+.clear {
+	clear: both;
+	display: block;
+	overflow: hidden;
+	visibility: hidden;
+	width: 0;
+	height: 0;
+}
+
+/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
+
+.clearfix:after {
+	clear: both;
+	content: ' ';
+	display: block;
+	font-size: 0;
+	line-height: 0;
+	visibility: hidden;
+	width: 0;
+	height: 0;
+}
+
+.clearfix {
+	display: inline-block;
+}
+
+* html .clearfix {
+	height: 1%;
+}
+
+.clearfix {
+	display: block;
+}

public/style.css

@@ -3,15 +3,15 @@ body
   background-color: #fff;
   color: #555;
   font-family: Helvetica, Arial, sans-serif;
-  width: 600px;
-  margin: 70px auto;
+  width: 760px;
+  margin: 20px auto;
   line-height: 1.5em;
   
 }
 
 input
 {
-  font-size: 150%;
+  font-size: 130%;
   background-color: #fff;
 }
 
@@ -20,20 +20,16 @@ input.postcode
   text-transform: uppercase;
 }
 
-.highlight
-{
-  background-color: yellow;
-}
-
 #main
 {
-  margin: 60px 0;
+  margin: 30px 0;
 }
 
 #footer
 {
   font-size: 100%;
   background-color: #fff;
+  text-align: right;
 }
 
 .credit
@@ -90,7 +86,7 @@ a.date
 
 h1
 {
-  margin-top: 50px;
+  margin-top: 20px;
   line-height: 1.5em;
   font-weight: bold;
   color: #000;
@@ -109,11 +105,16 @@ h1
 
 .highlight
 {
-  background-color: yellow;
+  background-color: #fff7c0;
   padding: 5px;
 }
 
 strong
 {
   color: #000;
+}
+
+.border_right
+{
+  border-right: 0px solid #ccc;
 }

views/about.haml

@@ -1,33 +1,34 @@
-%h1 About this website
-
-%p
-  This website was designed and written by 
-  %a{ :href => 'http://adrianshort.co.uk' }> Adrian Short
-  \.
-  You can contact me by email at 
-  %a{ :href => "mailto:adrian.short@gmail.com" }< adrian.short@gmail.com
-  and 
-  %a{ :href => "http://twitter.com/adrianshort" }<follow me on Twitter
-  \.
+.grid_9
+  %h1 About this website
   
-%p This site is independent of Sutton Council, all political parties and candidates. It exists only to provide information about the voting system and local candidates.
-
-%p
-  The council candidates' data comes from Sutton Council who also provided information on council wards and parliamentary constituencies. 
-%p
-  The code for this website is open source and managed on Github. It is hosted by Heroku.
+  %p
+    This website was designed and written by 
+    %a{ :href => 'http://adrianshort.co.uk' }> Adrian Short
+    \.
+    You can contact me by email at 
+    %a{ :href => "mailto:adrian.short@gmail.com" }< adrian.short@gmail.com
+    and 
+    %a{ :href => "http://twitter.com/adrianshort" }<follow me on Twitter
+    \.
+    
+  %p.highlight This site is independent of Sutton Council, all political parties and candidates. It exists only to provide information about the voting system and local candidates.
   
-%p
-  The postcode lookup is done by UK Postcodes using open data from Ordnance Survey Code-Point Open enhanced by MySociety. I use the Ruby Pat gem to access the postcodes API.
-
-%p
-  This site is written in Ruby using the Sinatra framework. The HTML templates use Haml. The database is sqlite for development and postgresql for production, abstracted through DataMapper. Source control and deployment is done with Git.
-
--#
+  %p
+    The council candidates' data comes from Sutton Council who also provided information on council wards and parliamentary constituencies. 
+  %p
+    The code for this website is open source and managed on Github. It is hosted by Heroku.
+    
+  %p
+    The postcode lookup is done by UK Postcodes using open data from Ordnance Survey Code-Point Open enhanced by MySociety. I use the Ruby Pat gem to access the postcodes API.
   
-  %h2 #followfooter
+  %p
+    This site is written in Ruby using the Sinatra framework. The HTML templates use Haml. The database is SQLite for development and PostgreSQL for production, abstracted through DataMapper. Source control and deployment is done with Git.
   
-  %ul
-    - for account in @accounts
-      %li
-        %a{ :href => "http://twitter.com/#{account}" }@#{account}
+  -#
+    
+    %h2 #followfooter
+    
+    %ul
+      - for account in @accounts
+        %li
+          %a{ :href => "http://twitter.com/#{account}" }@#{account}

views/election.haml

@@ -1,27 +1,28 @@
-%h1 How the council election works
-
-%p On 6 May 2010 you get to choose your local councillors and to decide who runs Sutton Council for the next four years.
-
-%p Sutton borough is divided into 18 areas called wards.
-
-%p Each ward has three councillors. That makes 54 councillors for the whole borough.
-
-%p You get three votes to choose three councillors for your ward from the list of candidates.
-
-%p The three people with the most votes in each ward become the councillors for that ward.
-
-%p If a political party gets 28 or more councillors they get to run Sutton Council and decide its policies and services until the next election in four years time.
-
-
-%h2 Registering to vote
-
-%p
-  If you're not already registered to vote you must do so by 
-  %strong 20 April 
-  otherwise you won't be able to take part.
-
-%p
-  You can get a registration form at the 
-  %a{ :href => "http://www.aboutmyvote.co.uk/" } About My Vote 
-  website or by phoning Sutton Council on 
-  %span{ :class => 'phone' } 020 8770 4888.
+.grid_9
+  %h1 How the council election works
+  
+  %p On 6 May 2010 you get to choose your local councillors and to decide who runs Sutton Council for the next four years.
+  
+  %p Sutton borough is divided into 18 areas called wards.
+  
+  %p Each ward has three councillors. That makes 54 councillors for the whole borough.
+  
+  %p You get three votes to choose three councillors for your ward from the list of candidates.
+  
+  %p The three people with the most votes in each ward become the councillors for that ward.
+  
+  %p If a political party gets 28 or more councillors they get to run Sutton Council and decide its policies and services until the next election in four years time.
+  
+  
+  %h2 Register to vote
+  
+  %p
+    If you're not already registered to vote you must do so by 
+    %strong 20 April 
+    otherwise you won't be able to take part.
+  
+  %p
+    You can get a registration form at the 
+    %a{ :href => "http://www.aboutmyvote.co.uk/" } About My Vote 
+    website or by phoning Sutton Council on 
+    %span{ :class => 'phone' } 020 8770 4888.

views/error.haml

@@ -0,0 +1,5 @@
+%h1 Not Found
+
+%p That's an invalid postcode or one that's not in the London Borough of Sutton.
+
+%p Sorry, we can't help you further.

views/home.haml

@@ -1,23 +1,24 @@
-%h1
-  Vote for your MP and councillors
-  %br
-  in Sutton on 6 May
-
-%p
-  On 6 May you can vote to 
-  %strong
-    choose your local MP
-  and help to decide the next government of the country.
-
-%p
-  And you can also
-  %strong
-    elect your local councillors 
-  and help to decide who runs Sutton Council.
-
-%p Who you can vote for depends on where you live. You can find your local candidates and get more information on how the elections work here.
-
-%form{ :method => 'get', :action => '/wards' }
-  %label{ :for => "postcode" } My postcode is 
-  %input{ :type => 'text', :name => 'postcode', :value => 'SM1 1EA', :size => 8, :maxlength => 8 }
-  %input{ :type => 'submit', :value => "Find it" }
+.grid_9
+  %h1
+    Vote for your MP and councillors
+    %br
+    in Sutton on 6 May
+  
+  %p
+    On 6 May 2010 you can vote to 
+    %strong
+      choose your local MP
+    and help to decide the next government of the country.
+  
+  %p
+    You can also
+    %strong
+      elect your local councillors 
+    and help to decide who runs Sutton Council.
+  
+  %p Who you can vote for depends on where you live. You can find your local candidates and get more information on how the elections work here.
+  
+  %form{ :method => 'get', :action => '/wards' }
+    %label{ :for => "postcode" } My postcode is 
+    %input{ :type => 'text', :name => 'postcode', :value => 'SM1 1EA', :size => 8, :maxlength => 8 }
+    %input{ :type => 'submit', :value => "Find it" }

views/layout.haml

@@ -4,23 +4,31 @@
   %head
     %title Sutton Elections 6 May 2010
     %link{ :rel => 'stylesheet', :type => 'text/css', :href => '/style.css' }
+    %link{ :rel => 'stylesheet', :type => 'text/css', :href => '/grid.css' }
     <script type="text/javascript" src="http://use.typekit.com/wfg6cvc.js"></script>
     <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
   %body
-    #header
-      %a.date{ :href => '/' } 6 May 2010
-    #main
-      = yield
-    #footer
-      %p
-        %a{ :href => '/' } Home
-      %p
-        %a{ :href => '/how-the-council-election-works' } How the council election works
+    .container_12
       -#
+        #header.grid_12
+          %a.date{ :href => '/' } 6 May 2010
+        .clear
+      #main
+        = yield
+      .clear  
+      #footer
+      .grid_9
+        &nbsp;
+      .grid_3
         %p
-          %a{ :href => '/voting' } How to vote
-      %p
-        %a{ :href => '/about' } About this website
-      %p.credit
-        Design 
-        %a{ :href => "http://adrianshort.co.uk/" } Adrian Short
+          %a{ :href => '/' } Home
+        %p
+          %a{ :href => '/how-the-council-election-works' } How the council election works
+        -#
+          %p
+            %a{ :href => '/voting' } How to vote
+        %p
+          %a{ :href => '/about' } About this website
+        %p.credit
+          Design 
+          %a{ :href => "http://adrianshort.co.uk/" } Adrian Short

views/wards.haml

@@ -4,54 +4,64 @@
       If you live in 
       = @postcode
 
-%h1
-  Candidates for 
-  = @ward.constituency.name 
-  member of parliament
-  
-%p
-  You can vote for
-  %strong
-    ONE 
-  of these people to become your next MP.
+.grid_6.border_right
+  %h1
+    = @ward.constituency.name 
+    member of parliament
 
-- for candidate in @parly_candidates
-  %p
-    %span.candidate_name
-      = candidate.forenames
-      = candidate.surname
-    %br
-    %span.candidate_party
-      = candidate.party.name  
-  
-%p.highlight
-  This list of candidates may be incomplete as people have until 
-  %strong
-    20 April 
-  to decide whether they want to stand for election as the 
-  = @ward.constituency.name 
-  MP.
+.grid_6  
+  %h1
+    = @ward.name
+    ward council candidates
+   
+.clear
   
-%h1
-  Council candidates in 
-  = @ward.name
-  Ward
+.grid_6  
+  %p
+    You can vote for
+    %strong
+      ONE 
+    of these people to become your next MP.
+  %p
+    Find out more about
+    %a{ :href => '/how-the-parliament-election-works' } how the parliament election works.
 
-%p
-  You can vote for 
-  %strong
-    THREE 
-  of these people to become your local councillors.
-  
-%p
-  Find out more about
-  %a{ :href => '/how-the-council-election-works' } how the council election works.
-  
-- for candidate in @council_candidates
+.grid_6
+  %p
+    You can vote for 
+    %strong
+      THREE 
+    of these people to become your local councillors.
   %p
-    %span.candidate_name
-      = candidate.forenames
-      = candidate.surname
-    %br
-    %span.candidate_party
-      = candidate.party.name
+    Find out more about
+    %a{ :href => '/how-the-council-election-works' } how the council election works.
+
+.clear
+
+.grid_6  
+  - for candidate in @parly_candidates
+    %p
+      %span.candidate_name
+        = candidate.forenames
+        = candidate.surname
+      %br
+      %span.candidate_party
+        = candidate.party.name  
+    
+  %p.highlight
+    This list of candidates may be incomplete as people have until 
+    %strong
+      20 April 
+    to decide whether they want to stand for election as the 
+    = @ward.constituency.name 
+    MP.
+
+.grid_6  
+  - for candidate in @council_candidates
+    %p
+      %span.candidate_name
+        = candidate.forenames
+        = candidate.surname
+      %br
+      %span.candidate_party
+        = candidate.party.name