From 97f21afeaeb6e838cff36535b7aa976e01abb42c Mon Sep 17 00:00:00 2001 From: Adrian Short Date: Wed, 14 Apr 2010 22:19:38 +0100 Subject: [PATCH] Added grid layout --- public/grid.css | 338 ++++++++++++++++++++++++++++++++++++++++++++ public/style.css | 23 +-- views/about.haml | 59 ++++---- views/election.haml | 55 +++---- views/error.haml | 5 + views/home.haml | 47 +++--- views/layout.haml | 38 +++-- views/wards.haml | 104 ++++++++------ 8 files changed, 517 insertions(+), 152 deletions(-) create mode 100644 public/grid.css create mode 100644 views/error.haml diff --git a/public/grid.css b/public/grid.css new file mode 100644 index 0000000..fa739b2 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/public/style.css b/public/style.css index 55a24f6..f77337c 100644 --- a/public/style.css +++ b/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; } \ No newline at end of file diff --git a/views/about.haml b/views/about.haml index a9ed40a..7a9fc21 100644 --- a/views/about.haml +++ b/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" } '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" } "http://twitter.com/#{account}" }@#{account} + -# + + %h2 #followfooter + + %ul + - for account in @accounts + %li + %a{ :href => "http://twitter.com/#{account}" }@#{account} diff --git a/views/election.haml b/views/election.haml index f329b17..de0c2ef 100644 --- a/views/election.haml +++ b/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. \ No newline at end of file +.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. \ No newline at end of file diff --git a/views/error.haml b/views/error.haml new file mode 100644 index 0000000..3b12835 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/views/home.haml b/views/home.haml index 414fd49..fa8ecf2 100644 --- a/views/home.haml +++ b/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" } \ No newline at end of file +.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" } \ No newline at end of file diff --git a/views/layout.haml b/views/layout.haml index eb2fb22..e0722e1 100644 --- a/views/layout.haml +++ b/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' } %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 +   + .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 \ No newline at end of file + %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 \ No newline at end of file diff --git a/views/wards.haml b/views/wards.haml index 9c9006c..d48b30e 100644 --- a/views/wards.haml +++ b/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 \ No newline at end of file + 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 \ No newline at end of file