From 028d77d983e82f384f3a57e1d5c7b95a64bcb3a1 Mon Sep 17 00:00:00 2001
From: Teddy Wing
Date: Mon, 21 Apr 2014 16:41:33 -0400
Subject: README: update Additional Options section

Add more information, filling in sections about different border types,
and make a few edits.
---
 README.rdoc | 49 ++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 13 deletions(-)

(limited to 'README.rdoc')

diff --git a/README.rdoc b/README.rdoc
index 19d80c8..3229976 100644
--- a/README.rdoc
+++ b/README.rdoc
@@ -73,31 +73,54 @@ To allow a user to view sneak peek content, add this permission to their account
 
 
 == Additional Options
-By default, markup under sneak peek will appear with a yellow and black "under construction" border:
+Sneak peek works by wrapping your code in a <code><div></code> and applying styles to that wrapper with the <code>.django-sneak-peek</code> class and several modifiers. Modifiers change the appearance of the sneak peek block.
 
-## Screenshot ##
-
-Sneak peek works by wrapping your code in a <code><div></code> and applying styles to that element with the <code>.django-sneak-peek</code> class and several modifiers.
+Here are the available modifiers and different combinations thereof.
 
-Modifiers change the appearance of the sneak peek block.
+=== Default
+By default, markup under sneak peek will appear with a yellow & black "under construction" border.
 
-Here are the available modifiers and different combinations thereof.
+	{% sneak_peek %}
+	    <div class="buttons">
+	        <button>Tutorial</button>
+	    </div>
+	{% endsneak_peek %}
 
 === Outline
+Sets <code>border: none;</code> and uses an <code>outline</code> instead
+
+	{% sneak_peek "outline" %}
+	    <div class="buttons">
+	        <button>Tutorial</button>
+	    </div>
+	{% endsneak_peek %}
 
 === Borderless
+Sets <code>border: none;</code>. Markup will appear without superfluous extra styles applied by <code>django-sneak-peek</code>, but will still be surrouded by an <code><div></code> wrapper (as always).
+
+	{% sneak_peek "borderless" %}
+	    <div class="buttons">
+	        <button>Tutorial</button>
+	    </div>
+	{% endsneak_peek %}
 
 === Inline
+Sets <code>display: inline;</code>
 
-=== Inline-Block
+	{% sneak_peek "borderless inline" %}
+	    <div class="buttons">
+	        <button>Tutorial</button>
+	    </div>
+	{% endsneak_peek %}
 
+=== Inline-Block
+Sets <code>display: inline-block;</code>
 
-== CSS Class Modifiers
-* Default: Yellow & black "under construction" border
-* <code>.outline</code>: Sets <code>border: none;</code> and uses an <code>outline</code> instead
-* <code>.borderless</code>: Sets <code>border: none;</code>. Markup will appear without superfluous extra styles applied by <code>django-sneak-peek</code>, but will still be surrouded by an <code><div></code> wrapper (as always).
-* <code>.inline</code>: Sets <code>display: inline;</code>
-* <code>.inline-block</code>: Sets <code>display: inline-block;</code>
+	{% sneak_peek "default inline-block" %}
+	    <div class="buttons">
+	        <button>Tutorial</button>
+	    </div>
+	{% endsneak_peek %}
 
 
 == Customising
-- 
cgit v1.2.3