From 889e55de3b329d9a3d815fc9fb01e1c156b8502a Mon Sep 17 00:00:00 2001
From: reinerBa <blackdove1984@googlemail.com>
Date: Fri, 10 Feb 2017 01:30:01 +0100
Subject: [PATCH] Added documentation for self declared breakpoint objects

---
 README.md | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 715fc9f..1ea6372 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,6 @@
 Brings a directive to use in specific html Elements. More Options are planned oriented at Bootstrap 4.
 -Todo: Mixin to use in Vue-Element methods etc.
 For Vue.js 2.0 only. 
-**WIP: Fix IE and document how to use own breakpoints
 
 ## Demo
 Demo [link](Demo.html)
@@ -13,23 +12,40 @@ Demo [link](Demo.html)
 Just include the script and use the directive on a Html-Element inside a Vue Element
 
     <script src="Vue-Responsive.js"></script>
-    ...
+The default Responsive breaks follow Bootstrap 4 [Responsive Utils](https://v4-alpha.getbootstrap.com/layout/responsive-utilities/).
+
+## For Bootstrap 4 breakpoints
+At default every resolution is visible, the hidden-all tag changes this to everything hidden (display:none). These tags are valid **hidden-all**, **xs**, **sm**, **md**, **lg**, **xl**, **hidden-xs**,...,**hidden-xl**.
+
     <h1 v-responsiveness="'hidden-xs'">Big Title</h1>
     <div v-responsiveness="['hidden-all','md','lg']">Only visible in Middle and large Size View</div>
     <div v-responsiveness="['hidden-lg']">Only hidden at lg</div>
 
     <h1 v-responsiveness="middleSize">Jumbotron</h1>
-	...	//in the vue element
+	...	//in the vue object
 	data:{
 		middleSize:['hidden-all','lg','xl']
 	} 
 
-    
-At default every resolution is visible, the hidden-all tag changes this to everything hidden (display:none). These tags are valid **hidden-all**, **xs**, **sm**, **md**, **lg**, **xl**, **hidden-xs**,...,**hidden-xl**.    
+## For Bootstrap 3 breakpoints
+Just add **:bs3** after the directive to use bootstrap 3 breakpoints:
+
+    <p v-responsiveness:bs3="['hidden-xs']">As you can see on the big picture below.<br /><img ... /></p>
+
+In this defintion the **xl** breakpoint doesn't exist.
+
+## For self defined breakpoints 
+First you have to declar your own breakpoints in the component/root wich wraps the html-elements with the directive. Every definition must start with **responsiveMarks$$** and a following name. So you can easily create breakpoints to differentiate between desktop and smartphones for instance, as you can see in the demo.html:
+	
+	... //in the vue object
+	data:{
+            responsiveMarks$$twoMarks:   //setting custom responsive breakpoints with the name "twoMarks"
+            { smartphone: { show: true, min: -1, max: 767 }, desktop: { show: true, min: 768, max: Infinity } }
+	} 
+
+    <p v-responsiveness:twoMarks="'hidden-desktop'">Visible on smartphone<br /><img src="http://lorempixel.com/360/240/animals" /></p>
+
+You can declar as much own definitions as you wish. Every defintion should have **min:-1** for its smalles breakpoint and **max:Infinity** for its biggest.
 
-The default Responsive breaks follow Bootstrap 4 [Responsive Utils](https://v4-alpha.getbootstrap.com/layout/responsive-utilities/).
-The command bs3 sets everthing to Bootstrap 3 Repsonsive breaks.
-`<img v-responsiveness:bs3="['hidden-xs']" class="big-image">` 
-where **xl** doesn't exist.
 #License
 MIT