rest-assured 0.1.0

data/lib/rest-assured/init.rb

@@ -0,0 +1,12 @@
+require 'sinatra/activerecord'
+require 'meta_where'
+require 'rest-assured/config'
+
+ActiveRecord::Base.establish_connection(
+  :adapter => "sqlite3",
+  :database => AppConfig[:database]
+)
+
+ActiveRecord::Migrator.migrate(
+  File.expand_path('../../../db/migrate', __FILE__)
+)

data/lib/rest-assured/models/double.rb

@@ -0,0 +1,30 @@
+class Double < ActiveRecord::Base
+  attr_accessible :fullpath, :content, :description, :method
+
+  METHODS = %w{GET POST PUT DELETE}
+
+  validates_presence_of :fullpath, :content
+  validates_inclusion_of :method, :in => METHODS
+
+  before_save :toggle_active
+  before_validation :set_method
+  after_destroy :set_active
+
+  private
+    def toggle_active
+      if active && Double.where(:fullpath => fullpath, :active => true, :id.ne => id).exists?
+        Double.where(:fullpath => fullpath, :id.ne => id).update_all :active => false
+      end
+    end
+
+    def set_method
+      self.method = 'GET' unless method.present?
+    end
+
+    def set_active
+      if active && f = Double.where(:fullpath => fullpath).last
+        f.active = true
+        f.save
+      end
+    end
+end

data/lib/rest-assured/models/redirect.rb

@@ -0,0 +1,37 @@
+class Redirect < ActiveRecord::Base
+  attr_accessible :pattern, :to
+
+  validates_presence_of :pattern, :to
+  validates_uniqueness_of :position, :allow_blank => true
+
+  scope :ordered, order('position')
+
+  before_create :assign_position
+
+  def self.update_order(ordered_redirect_ids)
+    success = true
+
+    transaction do
+      begin
+        update_all :position => nil
+
+        ordered_redirect_ids.each_with_index do |r_id, idx|
+          r = find(r_id)
+          r.position = idx
+          r.save!
+        end
+      rescue
+        # TODO log exception
+        success = false
+        raise ActiveRecord::Rollback
+      end
+    end
+    success
+  end
+
+  private
+
+    def assign_position
+      self.position = ( self.class.maximum(:position) || -1 ) + 1
+    end
+end

data/lib/rest-assured/routes/double.rb

@@ -0,0 +1,77 @@
+module RestAssured
+  module DoubleRoutes
+    def self.included(router)
+      router.get '/' do
+        redirect to('/doubles')
+      end
+
+      router.get '/doubles' do
+        @doubles = Double.all
+        haml :'doubles/index'
+      end
+
+      router.get '/doubles/new' do
+        @double = Double.new
+        haml :'doubles/new'
+      end
+
+      router.post '/doubles' do
+        f = { :fullpath => params['fullpath'], :content => params['content'], :description => params['description'], :method => params['method'] }
+        @double = Double.create(params['double'] || f)
+
+        if browser?
+          if @double.errors.blank?
+            flash[:notice] = "Double created"
+            redirect '/doubles'
+          else
+            flash[:error] = "Crumps! " + @double.errors.full_messages.join("; ")
+            haml :'doubles/new'
+          end
+        else
+          if @double.errors.present?
+            status 400
+            body @double.errors.full_messages.join("\n")
+          end
+        end
+      end
+
+      router.get %r{/doubles/(\d+)/edit} do |id|
+        @double = Double.find(id)
+        haml :'doubles/edit'
+      end
+
+      router.put %r{/doubles/(\d+)} do |id|
+        @double = Double.find(id)
+
+        if request.xhr?
+          if params['active']
+            @double.active = params['active']
+            @double.save
+            'Changed'
+          end
+        elsif params['double']
+          @double.update_attributes(params['double'])
+
+          if @double.save
+            flash[:notice] = 'Double updated'
+            redirect '/doubles'
+          else
+            flash[:error] = 'Crumps! ' + @double.errors.full_messages.join("\n")
+            haml :'doubles/edit'
+          end
+        end
+      end
+
+      router.delete %r{/doubles/(\d+)} do |id|
+        if Double.destroy(id)
+          flash[:notice] = 'Double deleted'
+          redirect '/doubles'
+        end
+      end
+
+      router.delete '/doubles/all' do
+        Double.delete_all
+      end
+    end
+  end
+end

data/lib/rest-assured/routes/redirect.rb

@@ -0,0 +1,71 @@
+module RestAssured
+  module RedirectRoutes
+    def self.included(router)
+      router.get '/redirects' do
+        @redirects = Redirect.ordered
+        haml :'redirects/index'
+      end
+
+      router.get '/redirects/new' do
+        @redirect = Redirect.new
+        haml :'redirects/new'
+      end
+
+      router.post '/redirects' do
+        @redirect = Redirect.create(params['redirect'] || { :pattern => params['pattern'], :to => params['to'] })
+
+        if browser?
+          if @redirect.errors.blank?
+            flash[:notice] = "Redirect created"
+            redirect '/redirects'
+          else
+            flash[:error] = "Crumps! " + @redirect.errors.full_messages.join("; ")
+            haml :'redirects/new'
+          end
+        else
+          if @redirect.errors.present?
+            status 400
+            body @redirect.errors.full_messages.join("\n")
+          end
+        end
+      end
+
+      router.get %r{/redirects/(\d+)/edit} do |id|
+        @redirect = Redirect.find(id)
+        haml :'redirects/edit'
+      end
+
+      router.put %r{/redirects/(\d+)} do |id|
+        @redirect = Redirect.find(id)
+
+        @redirect.update_attributes(params['redirect'])
+
+        if @redirect.save
+          flash[:notice] = 'Redirect updated'
+          redirect '/redirects'
+        else
+          flash[:error] = 'Crumps! ' + @redirect.errors.full_messages.join("\n")
+          haml :'redirects/edit'
+        end
+      end
+
+      router.put '/redirects/reorder' do
+        if params['redirect']
+          if Redirect.update_order(params['redirect'])
+            'Changed'
+          else
+            'Crumps! It broke'
+          end
+        end
+      end
+
+      router.delete %r{/redirects/(\d+)} do |id|
+        if Redirect.destroy(id)
+          flash[:notice] = 'Redirect deleted'
+          redirect '/redirects'
+        end
+      end
+
+    end
+  end
+end

data/lib/rest-assured/version.rb

@@ -0,0 +1,3 @@
+module RestAssured
+  VERSION = '0.1.0'
+end

data/lib/sinatra/partials.rb

@@ -0,0 +1,18 @@
+module Sinatra::Partials
+  def partial(template, *args)
+    template_array = template.to_s.split('/')
+    template = template_array[0..-2].join('/') + "/_#{template_array[-1]}"
+    options = args.last.is_a?(Hash) ? args.pop : {}
+    options.merge!(:layout => false)
+    if collection = options.delete(:collection) then
+      collection.inject([]) do |buffer, member|
+        buffer << haml(:"#{template}", options.merge(
+          :layout => false,
+          :locals => {template_array[-1].to_sym => member}
+        ))
+      end.join("\n")
+    else
+      haml(:"#{template}", options)
+    end
+  end
+end

data/public/css/grid.inuit.css

@@ -0,0 +1,76 @@
+/*------------------------------------*\
+	GRID.INUIT.CSS
+\*------------------------------------*/
+
+
+
+
+
+/*
+grid.inuit.css is an inuit.css igloo
+igloos are CSS plugins which extend the inuit.css framework
+They are released under the Apache License, Version 2.0 -- http://www.apache.org/licenses/LICENSE-2.0
+
+@inuitcss
+inuitcss.com
+*/
+
+
+
+
+
+/*------------------------------------*\
+	GRIDS
+\*------------------------------------*/
+/*
+Page wrapper. Apply to the body where possible, as per: http://csswizardry.com/2011/01/using-the-body-element-as-a-wrapper/
+*/
+.wrapper{
+	width:940px;
+	margin:0 auto;
+	padding:0 10px;
+}
+
+/*
+Most frameworks rely on class="end" or similar to remove the margin from the last column in a row of grids. We don't want to do that so we use a combination of margin- and negative margin-left. It's clever...
+We also allow you to use grid items as stand alone columns or in a series of columns. To use a series just wrap them all in <div class="grids">...</div>
+*/
+.grids{
+	clear:both;
+	max-width:960px;
+	margin:0 0 0 -20px;
+	list-style:none; /* So we can make grids out of lists */
+}
+
+/*
+Here we are using an attribute selector to detect the string 'grid-' in an element's class.
+This works by assuming that anything we call grid-<n> we also want to be a grid item. It means less code and less for you to remember!
+
+Ensure any grid item's FIRST class is a grid-<n> class. e.g.
+VALID: class="grid-4 text-centre"
+INVALID: class="left grid-4"
+*/
+[class^="grid-"]{
+	float:left;
+	margin:0 20px 0 0;
+}
+.grids [class^="grid-"]{
+	margin:0 0 0 20px;
+}
+
+.grid-1{ width:40px }
+.grid-2{ width:100px }
+.grid-3{ width:160px }
+.grid-4{ width:220px }
+.grid-5{ width:280px }
+.grid-6{ width:340px }
+.grid-7{ width:400px }
+.grid-8{ width:460px }
+.grid-9{ width:520px }
+.grid-10{ width:580px }
+.grid-11{ width:640px }
+.grid-12{ width:700px }
+.grid-13{ width:760px }
+.grid-14{ width:820px }
+.grid-15{ width:880px }
+.grid-16{ width:940px; margin:0 }

data/public/css/inuit.css

@@ -0,0 +1,904 @@
+@charset "UTF-8";
+/*------------------------------------*\
+	INUIT.CSS
+\*------------------------------------*/
+/*
+Author:             Harry Roberts
+Twitter:            @inuitcss
+Author URL:         csswizardry.com
+Project URL:        inuitcss.com
+Version:            3.0.a
+Date:               30 June 2011
+
+Copyright 2011 Harry Roberts
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+*/
+
+
+
+
+
+/*------------------------------------*\
+	RESET
+\*------------------------------------*/
+html,body,div,span,applet,object,iframe,
+h1,h2,h3,h4,h5,h6,p,blockquote,pre,
+a,abbr,acronym,address,big,cite,code,
+del,dfn,em,img,ins,kbd,q,s,samp,
+small,strike,strong,sub,sup,tt,var,
+b,u,i,center,
+dl,dt,dd,ol,ul,li,
+fieldset,form,label,legend,
+table,caption,tbody,tfoot,thead,tr,th,td,
+article,aside,canvas,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section,summary,
+time,mark,audio,video{
+	margin:0;
+	padding:0;
+}
+article,aside,details,figcaption,figure,footer,
+header,hgroup,menu,nav,section{
+	display: block;
+}
+
+table{
+	border-collapse:collapse;
+	border-spacing:0;
+}
+fieldset,img{ 
+	border:0;
+}
+address,caption,cite,dfn,th,var{
+	font-style:normal;
+	font-weight:normal;
+}
+caption,th{
+	text-align:left;
+}
+h1,h2,h3,h4,h5,h6{
+	font-size:100%;
+	font-weight:normal;
+}
+q:before,q:after{
+	content:'';
+}
+abbr,acronym{
+	border:0;
+}
+
+
+
+
+
+/*------------------------------------*\
+	MAIN
+\*------------------------------------*/
+html{
+	overflow-y:scroll; /* Force scrollbars 100% of the time */
+	font-size:100%; /* Use 16px as per http://www.informationarchitects.jp/en/100e2r/ and http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ */
+	font-family:Calibri, "Helvetica Neue", Arial, sans-serif; /* Swap these two lines around to switch between serif and sans */
+	font-family:Cambria, Georgia, "Times New Roman", serif; /* Swap these two lines around to switch between serif and sans */
+	line-height:1.5;
+	/*background:url(../img/css/baseline.gif) 0 18px #fff;*/
+	color:#333;
+}
+body{
+	min-height:100%;
+}
+
+
+
+
+
+/*------------------------------------*\
+	GRIDS
+\*------------------------------------*/
+/*
+Build a custom grid-system igloo at inuitcss.com
+*/
+
+
+
+
+
+/*------------------------------------*\
+	CLEARFIX
+\*------------------------------------*/
+/*
+Fix clearing issues as per: http://nicolasgallagher.com/micro-clearfix-hack/
+*/
+.cf,
+.grids{
+	zoom:1;
+}
+.cf:before,
+.grids:before,
+.cf:after,
+.grids:after{
+	content:"";
+	display:table;
+}
+.cf:after,
+.grids:after{
+	clear:both;
+}
+
+
+
+
+
+/*------------------------------------*\
+	LOGO
+\*------------------------------------*/
+/*
+Your logo is an image, not a h1: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/
+*/
+#logo,
+#logo img{
+	display:block;
+	width:auto; /* Width of your logo in pixels (ideally a round grid-number) */
+	height:auto; /* Height of your logo in pixels */
+}
+/* Based on the fact that we need to use an <img /> in our markup, let’s hide the actual image and use a background on the <a>--this gives us semantically sound markup and the ability to use sprites for hover effects! */
+#logo{
+	background:url(/path/to/logo);
+}
+#logo:hover{
+	/* Hover states */
+	background-position:0 -00px;
+}
+#logo img{
+	position:absolute;
+	left:-99999px;
+}
+
+
+
+
+
+/*------------------------------------*\
+	NAV
+\*------------------------------------*/
+.nav{
+	list-style:none;
+	margin:0 0 1.5em 0;
+}
+.nav li{
+	display:inline;
+}
+.nav a{
+	display:inline-block;
+}
+
+
+
+
+
+/*------------------------------------*\
+	TYPE
+\*------------------------------------*/
+/*--- HEADINGS ---*/
+h1{
+	font-size:2em;			/* 32px */
+	margin-bottom:0.75em;	/* 24px */
+	line-height:1.5;		/* 48px */
+}
+h2{
+	font-size:1.5em;		/* 24px */
+	margin-bottom:1em;		/* 24px */
+	line-height:1;			/* 24px */
+}
+h3{
+	font-size:1.25em;		/* 20px */
+	margin-bottom:1.2em;	/* 24px */
+	line-height:1.2;		/* 24px */
+}
+h4{
+	font-size:1.125em;		/* 18px */
+	margin-bottom:1.333em;	/* 24px */
+	line-height:1.333;		/* 24px */
+}
+h5{
+	font-weight:bold;
+}
+h5,
+h6{
+	font-size:1em;			/* 16px */
+	margin-bottom:1.5em;	/* 24px */
+	line-height:1.5;		/* 24px */
+}
+
+/*--- PARAGRAPHS ---*/
+p,
+address{
+	margin-bottom:1.5em;
+}
+/*
+Mo’ robust paragraph indenting: http://csswizardry.com/2010/12/mo-robust-paragraph-indenting/
+Uncomment to activate
+p+p{
+	text-indent:2em;
+	margin-top:-1.5em;
+}
+*/
+
+/*--- FIGURES ---*/
+figure{
+	margin-bottom:1.5em;
+}
+figure img{
+	display:block;
+	margin-bottom:0;
+}
+figcaption{
+	font-size:0.75em;
+}
+
+/*--- LINKS ---*/
+/*
+Say no to negative hovers: http://csswizardry.com/2011/05/on-negative-hovers/
+A negative hover is one whose appearance is subtracted from on hover rather than added to.
+*/
+a{
+	text-decoration:none;
+}
+a:visited{
+	opacity:0.8; /* A bit basic, but it’s a bare minumum... */
+}
+a:hover{
+	text-decoration:underline;
+}
+a:active,
+a:focus{
+	/* Give clicked links a depressed effect. */
+	position:relative;
+	top:1px;
+}
+
+/*--- LISTS ---*/
+ul,
+ol{
+	margin:0 0 1.5em 60px;
+}
+ul ul,
+ol ol,
+ul ol,
+ol ul{
+	/* Let’s take care of lists in lists */
+	margin:0 0 0 60px;
+}
+
+/*
+A numbered list is NOT the same as an ordered one.
+Use this class when you want a list to be numbered but it has no order.
+See http://jsfiddle.net/csswizardry/sdrth/
+*/
+ul.numbered{
+	list-style:decimal outside;
+}
+dl{
+	margin-bottom:1.5em;
+}
+dt{
+	font-weight:bold;
+}
+dt:after{
+	content:":";
+}
+dt::after{
+	content:":";
+}
+dd{
+	margin-left:60px;
+}
+
+/*--- QUOTES ---*/
+blockquote{
+	text-indent:-0.4em; /* Hang that punctuation */
+}
+blockquote b,
+blockquote .source{
+	/* Mark the source up with either a <b> or another element of your choice with a class of source. */
+	display:block;
+	text-indent:0;
+}
+
+/*--- GENERAL ---*/
+q,
+i,
+em,
+cite{
+	font-style:italic;
+	font-weight:inherit;
+}
+b,
+strong{
+	font-weight:bold;
+	font-style:inherit;
+}
+mark{
+	background:#ffc;
+}
+s,
+del{
+	text-decoration:line-through;
+}
+small{
+	font-size:0.75em;
+	line-height:1;
+}
+
+/*--- CODE ---*/
+pre,
+code{
+	font-family:monospace;
+	font-size:1em;
+}
+pre{
+	overflow:auto;
+	margin-bottom:1.5em;
+	line-height:24px; /* Having to define explicit pixel values :( */
+}
+code{
+	line-height:1;
+}
+
+
+
+
+
+/*------------------------------------*\
+	IMAGES
+\*------------------------------------*/
+img{
+	max-width:100%;
+	height:auto;
+	/* Give it some text styles to offset alt text */
+	font-style:italic;
+	color:#c00;
+}
+img.left	{ margin:0 20px 0 0; }
+img.right	{ margin:0 0 0 20px; }
+
+/*--- FLASH/VIDEO ---*/
+object,
+embed,
+video{
+	max-width:100%;
+	height:auto;
+}
+
+
+
+
+
+/*------------------------------------*\
+	FORMS
+\*------------------------------------*/
+/*
+Unfortunately, and somewhat obviously, forms don’t fit the baseline all too well. Perhaps in a later version...
+*/
+fieldset{
+	padding:10px;
+	border:1px solid #ccc;
+	margin-bottom:1.5em;
+}
+label{
+	display:block;
+	cursor:pointer;
+}
+label:after{
+	content:":";
+}
+label::after{
+	content:":";
+}
+input,
+textarea{
+	font-family:inherit;
+	font-size:1em;
+	line-height:1.5;
+}
+
+/*
+Nice UI touch for placeholders. To get placeholders working cross-browser see @dan_bentley’s jQuery plugin: https://github.com/danbentley/placeholder
+*/
+[placeholder]{
+	cursor:pointer;
+}
+[placeholder]:active,
+[placeholder]:focus{
+	cursor:text;
+}
+.check-list{
+	width:100%;
+	overflow:hidden;
+	list-style:none;
+	margin:0 0 1.5em 0;
+}
+.check-list li{
+	width:25%;
+	float:left;
+}
+.check-label{
+	display:inline;
+}
+.check-label:after{
+	content:normal;
+}
+.check-label::after{
+	content:normal;
+}
+.button{
+	cursor:pointer;
+}
+fieldset > :last-child{
+	/* Remove the margin from the last element in the fieldset--this makes our padding more consistent. */
+	margin:0;
+}
+
+
+
+
+
+/*------------------------------------*\
+	TABLES
+\*------------------------------------*/
+/*
+Unfortunately, and somewhat obviously, tables don’t fit the baseline all too well. Perhaps in a later version...
+*/
+table{
+	margin-bottom:1.5em;
+	width:100%;
+	max-width:100%;
+}
+thead tr:last-of-type th{
+	/* Thicker border on the table-headers of the last row in the table head */
+	border-bottom-width:2px;
+}
+tbody th{
+	/* Thicker right border on table-headers in the table body */
+	border-right-width:2px;
+}
+th:empty{
+	/* Hide the borders on any empty table-headers */
+	border:none;
+}
+th,td{
+	vertical-align:top;
+	padding:0.75em;
+	border:1px solid #ccc;
+}
+th{
+	font-weight:bold;
+	text-align:center
+}
+table [colspan]{
+	/* This looks lovely, trust me... */
+	text-align:center;
+}
+table [rowspan]{
+	/* ...as does this. */
+	vertical-align:middle;
+}
+/*
+Assuming IE has an 'implied' colspan of one on cells without an explicit colspan attribute, fix/undo it.
+See http://jsfiddle.net/csswizardry/UJJay/
+*/
+[colspan="1"]{
+    text-align:left;
+}
+[rowspan="1"]{
+    vertical-align:top;
+}
+tbody tr:nth-of-type(odd){
+	background:rgba(0,0,0,0.05);
+}
+tfoot{
+	text-align:center;
+}
+tfoot td{
+	border-top-width:2px;
+}
+
+
+
+
+
+/*------------------------------------*\
+	MESSAGES
+\*------------------------------------*/
+/*
+Unfortunately feedback messages don’t fit the baseline all too well. Perhaps in a later version...
+*/
+.message{
+	font-weight:normal;
+	display:block;
+	padding:10px 10px 10px 36px;
+	border:1px solid #ccc;
+	margin:0 0 1.5em 0;
+	
+	-moz-border-radius:2px;
+	-webkit-border-radius:2px;
+	border-radius:2px;
+	-moz-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
+	-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
+	box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
+}
+/* With multiple errors it’s nice to group them. */
+ul.message{
+	list-style:decimal outside; /* It’s also handy to number them. However, they might not necessarily be in a particular order, so we spoof it by putting numbers on an unordered list */
+	padding:10px 10px 10px 56px;
+}
+.error{
+	border-color:#fb5766;
+	background:url(../img/css/icons/error.png) 10px center no-repeat #fab;
+}
+.success{
+	border-color:#83ba77;
+	background:url(../img/css/icons/success.png) 10px center no-repeat #d1feba;
+}
+.info{
+	border-color:#85a5be;
+	background:url(../img/css/icons/info.png) 10px center no-repeat #c4dbec;
+}
+.warning{
+	border-color:#d8d566;
+	background:url(../img/css/icons/warning.png) 10px center no-repeat #fef8c4;
+}
+
+
+
+
+
+/*------------------------------------*\
+	MISC
+\*------------------------------------*/
+hr{
+	margin:0 0 1.5em 0;
+}
+.accessibility{
+	/* Hide content off-screen without hiding from screen-readers. N.B. This is not suited to RTL languages */
+	position:absolute;
+	left:-99999px;
+}
+.more-link:after{
+	/* Too many people use &raquo; in their markup to signify progression/movement, that ain’t cool. Let’s insert that using content:""; */
+	content:" »";
+}
+.more-link::after{
+	content:" »";
+}
+
+
+
+
+
+/*------------------------------------*\
+	CLASSES
+\*------------------------------------*/
+/*
+Some not-too-pretty and insemantic classes to do odd jobs.
+*/
+.left	{ float:left!important; }
+.right	{ float:right!important; }
+.clear	{ clear:both; float:none; }
+
+.text-left		{ text-align:left; }
+.text-right		{ text-align:right; }
+.text-center,
+.text-centre	{ text-align:center; }
+
+
+
+
+
+/*------------------------------------*\
+	DIAGNOSTICS
+\*------------------------------------*/
+/*
+APPLY A CLASS OF .debug TO THE HTML ELEMENT ONLY WHEN YOUR SITE IS ON DEV
+
+Turn the grids back on. Idea given by @VictorPimentel
+*/
+
+.debug		{ background:url(../img/css/baseline.gif) 0 18px #fff!important; }
+
+/*
+Red border == something is wrong
+Yellow border == something may be wrong, you should double check.
+Green border == perfect, nice one!
+*/
+
+/* Styles */
+.debug [style]{
+	/* Inline styles aren’t great, can this be avoided? */
+	outline:5px solid yellow;
+}
+
+/* Images */
+.debug img{
+	/* Images without alt attributes are bad! */
+	outline:5px solid red;
+}
+.debug img[alt]{
+	/* Images with alt attributes are good! */
+	outline-color:green;
+}
+.debug img[alt=""]{
+	/* Images with empty alt attributes are okay in the right circumstances. */
+	outline-color:yellow;
+}
+
+/* Links */
+.debug a{
+	/* Links without titles are yellow, does your link need one? */
+	outline:5px solid yellow;
+}
+.debug a[title]{
+	/* Links with titles are green, title attributes can be very useful! */
+	outline-color:green;
+}
+.debug a[href="#"]{
+	/* Were you meant to leave that hash in there? */
+	outline-color:yellow;
+}
+.debug a[target]/*,
+.debug a[onclick],
+.debug a[href*=javascript]*/{
+	/* What were you thinking?! */
+	outline-color:red;
+}
+
+/* Classes/IDs */
+.debug [class=""],
+.debug [id=""]{
+	/* Is this element meant to have an empty class/ID? */
+	outline:5px solid yellow;
+}
+
+
+
+
+
+/*------------------------------------*\
+	NARROW
+\*------------------------------------*/
+/*
+CSS for tablets and narrower devices
+*/
+
+
+
+
+
+@media (min-width: 721px) and (max-width: 960px){
+}
+/*--- END NARROW ---*/
+
+
+
+
+
+/*------------------------------------*\
+	MOBILE
+\*------------------------------------*/
+/*
+CSS for mobile devices.
+Linearise it!
+*/
+
+
+
+
+
+@media (max-width: 720px){
+/*------------------------------------*\
+	MAIN
+\*------------------------------------*/
+.debug,
+.debug body{
+	background:none!important;
+}
+html{
+	font-size:1.125em;
+}
+body{
+	-webkit-text-size-adjust:none;
+}
+.wrapper{
+	width:auto!important;
+	padding:10px!important;
+	width:auto!important;
+}
+.grids{
+	margin:0!important;
+	width:auto!important;
+}
+[class^="grid-"],
+.grids [class^="grid-"]{
+	width:auto!important;
+	float:none!important;
+	margin:0!important;
+}
+
+
+
+
+
+/*------------------------------------*\
+	LOGO
+\*------------------------------------*/
+#logo{
+	margin:0 auto 1.5em;
+}
+
+
+
+
+
+/*------------------------------------*\
+	TYPE
+\*------------------------------------*/
+/*--- LISTS ---*/
+ul,
+ol{
+	margin:0 0 1.5em 25px;
+}
+ul ul,
+ol ol,
+ul ol,
+ol ul{
+	/* Let’s take care of lists in lists */
+	margin:0 0 0 25px;
+}
+dd{
+	margin-left:25px;
+}
+
+
+
+
+/*------------------------------------*\
+	IMAGES
+\*------------------------------------*/
+img.left,
+img.right	{ max-width:50%; height:auto; }
+}
+/*--- END MOBILE ---*/
+
+
+
+
+
+/*------------------------------------*\
+	PRINT
+\*------------------------------------*/
+/*
+Good ol’ fashioned paper...
+*/
+
+
+
+
+
+@media print{
+/*------------------------------------*\
+	MAIN
+\*------------------------------------*/
+/*
+Give everything some decent contrast.
+*/
+*{
+	background:#fff;
+	color:#000;
+	text-shadow:none!important;
+}
+/*
+Set a nice measure and take the font down to print-acceptable sizes.
+*/
+body{
+	font-size:0.75em; /* 12px (if base font-size was 16px) */
+}
+.wrapper{
+	width:75%;
+	margin:0 auto;
+}
+/*
+A list of things you don’t want printing. Add to/subtract from as necessary. 
+*/
+.nav,
+#footer{
+	display:none;
+}
+#logo img{
+	position:static;
+}
+/*
+Linearise
+*/
+.grids{
+	width:auto;
+}
+[class^="grid-"]{
+	width:auto;
+	float:none;
+	clear:both;
+}
+/*
+Don’t let images break anything.
+*/
+img{
+	max-width:100%;
+	height:auto;
+}
+/*
+Messages look odd with just borders.
+*/
+.message{
+	border:none;
+	font-weight:bold;
+}
+/*
+Try to avoid tables spanning multiple pages. Not failsafe, but a good start.
+*/
+table{
+	page-break-before:always;
+}
+/*
+Show the accessibility class.
+*/
+.accessibility{
+	position:static;
+}
+/*
+Display the href of any links.
+*/
+a:link:after,a:visited:after{
+	content:" (" attr(href) ")";
+	font-size:smaller;
+}
+a:link::after,a:visited::after{
+	content:" (" attr(href) ")";
+	font-size:smaller;
+}
+/*
+Any links that are root relative to your site need prepending with your URL.
+*/
+a[href^="/"]:after{
+	content:" (http://yoururlhere.com" attr(href) ")";
+	font-size:smaller;
+}
+a[href^="/"]::after{
+	content:" (http://yoururlhere.com" attr(href) ")";
+	font-size:smaller;
+}
+/*
+Any Flash/video content can’t be printed so leave a message.
+*/
+object:after{
+	content:"Flash/video content. Head to http://yoururlhere.com/ to view this content.";
+	display:block;
+	font-weight:bold;
+	margin-bottom:1.5em;
+}
+object::after{
+	content:"Flash/video content. Head to http://yoururlhere.com/ to view this content.";
+	display:block;
+	font-weight:bold;
+	margin-bottom:1.5em;
+}
+}
+/*--- END PRINT ---*/