diff options
| -rw-r--r-- | README.rdoc | 49 |
1 files changed, 36 insertions, 13 deletions
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 |