From 11bf7fab347716206a1120ea5edd5565c07f73d1 Mon Sep 17 00:00:00 2001
From: Bruno Lesieur <bruno.lesieur@gmail.com>
Date: Fri, 3 Feb 2017 16:22:37 +0100
Subject: [PATCH] Diagramme Responsive FR

---
 src/v2/guide/instance.md | 222 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 221 insertions(+), 1 deletion(-)

diff --git a/src/v2/guide/instance.md b/src/v2/guide/instance.md
index 5c78c6b137..b492b0574c 100644
--- a/src/v2/guide/instance.md
+++ b/src/v2/guide/instance.md
@@ -100,4 +100,224 @@ Il y aussi d'autres hooks qui seront appelés à différentes étapes du cycle d
 
 Ci-dessous se trouve le diagramme d'un cycle de vie d'une instance. Vous n'avez pas besoin de tout comprendre de A à Z à ce stade, mais ce diagramme pourra vous être utile dans le futur.
 
-![Lifecycle](/images/lifecycle.png)
+<div class="lifecycle">
+	<style scoped>
+		.lifecycle {
+		    position: relative;
+		    font-size: 2vw;
+		    font-weight: bold;
+		    color: #fff;
+		    text-align: center;
+		}
+		@media (min-width: 760px) {
+			.lifecycle {
+		    	font-size: 16px;
+			}
+		}
+		.lifecycle--observe-data,
+		.lifecycle--init-event,
+		.lifecycle--has-el,
+		.lifecycle--has-template,
+		.lifecycle--when-mount,
+		.lifecycle--if-el-yes,
+		.lifecycle--if-el-no,
+		.lifecycle--if-template-yes,
+		.lifecycle--if-template-no,
+		.lifecycle--compile-function,
+		.lifecycle--compile-template,
+		.lifecycle--create-el,
+		.lifecycle--virtual-dom,
+		.lifecycle--when-data-change,
+		.lifecycle--when-destroy,
+		.lifecycle--teardown,
+		.lifecycle--mounted,
+		.lifecycle--destroyed {
+			z-index: 2;
+		    position: absolute; 
+		    transform: translate(-50%, -50%);
+		    background-color: #3ab882;
+		    border-radius: 10px;
+		}
+		.lifecycle--observe-data,
+		.lifecycle--init-event,
+		.lifecycle--compile-function,
+		.lifecycle--compile-template,
+		.lifecycle--create-el,
+		.lifecycle--virtual-dom,
+		.lifecycle--teardown {
+		    background-color: #3ab882;
+		    border-radius: 10px;
+		}
+		.lifecycle--has-el,
+		.lifecycle--has-template {
+		    background-color: #fcb738;
+		    border-radius: 50%;
+		}
+		.lifecycle--mounted,
+		.lifecycle--destroyed {
+		    background-color: #da5961;
+		    border-radius: 50%;
+		}
+		.lifecycle--when-mount,
+		.lifecycle--if-el-yes,
+		.lifecycle--if-el-no,
+		.lifecycle--if-template-yes,
+		.lifecycle--if-template-no,
+		.lifecycle--when-data-change,
+		.lifecycle--when-destroy {
+			color: #8699A3;
+		    background-color: #fff;
+		}
+		.lifecycle--observe-data {
+		    top: 9.7%;
+		    left: 49%;
+		    width: 24.5%;
+		    height: 3.3%;
+		}
+		.lifecycle--init-event {
+		    top: 15.3%;
+		    left: 49%;
+		    width: 24.5%;
+		    height: 2.9%;
+		}
+		.lifecycle--has-el {
+		    top: 23.2%;
+		    left: 49%;
+		    width: 16%;
+		    height: 4%;
+		}
+		.lifecycle--has-template {
+			top: 31.6%;
+			left: 49%;
+			width: 16%;
+			height: 4%;
+		}
+		.lifecycle--when-mount {
+			top: 27%;
+		    left: 77.5%;
+		    width: 18%;
+			height: 4%;
+		}
+		.lifecycle--if-el-yes {
+	        left: 45%;
+		    top: 27.4%;
+		    width: 6%;
+		    height: 1%;
+		}
+		.lifecycle--if-el-no {
+		    top: 22.2%;
+		    left: 70.5%;
+		    width: 6%;
+		    height: 1%;
+		}
+		.lifecycle--if-template-yes {
+	        top: 37.7%;
+		    left: 22.5%;
+		    width: 6%;
+		    height: 1%;
+		}
+		.lifecycle--if-template-no {
+		    top: 37.7%;
+		    left: 75.5%;
+		    width: 6%;
+		    height: 1%;
+		}
+		.lifecycle--compile-function {
+			top: 41.7%;
+		    left: 27%;
+		    width: 24.5%;
+		    height: 5%;
+		}
+		.lifecycle--compile-template {
+			top: 41.7%;
+		    left: 70.5%;
+		    width: 24.5%;
+		    height: 5%;
+		}
+		.lifecycle--create-el {
+			top: 55%;
+		    left: 49%;
+		    width: 24.5%;
+		    height: 5%;
+		}
+		.lifecycle--virtual-dom {
+    		top: 68.5%;
+	        left: 79%;
+    		width: 17%;
+		    height: 5%;
+		}
+		.lifecycle--when-data-change {
+		    top: 63%;
+    		left: 66%;
+    		width: 13%;
+			height: 4%;
+		}
+		.lifecycle--when-destroy {
+			top: 75.2%;
+		    left: 49%;
+		    width: 17%;
+			height: 4%;
+		}
+		.lifecycle--teardown {
+	        top: 85%;
+		    left: 49%;
+    		width: 28%;
+		    height: 5%;
+		}
+		.lifecycle--mounted {
+    		top: 68.3%;
+		    left: 49%;
+	        width: 12%;
+		    height: 5%;
+		}
+		.lifecycle--destroyed {
+		    top: 94%;
+		    left: 49%;
+	        width: 12%;
+		    height: 5%;
+		}
+		.lifecycle--observe-data span,
+		.lifecycle--init-event span,
+		.lifecycle--has-el span,
+		.lifecycle--has-template span,
+		.lifecycle--when-mount span,
+		.lifecycle--if-el-yes span,
+		.lifecycle--if-el-no span,
+		.lifecycle--if-template-yes span,
+		.lifecycle--if-template-no span,
+		.lifecycle--compile-function span,
+		.lifecycle--compile-template span,
+		.lifecycle--create-el span,
+		.lifecycle--virtual-dom span,
+		.lifecycle--when-data-change span,
+		.lifecycle--when-destroy span,
+		.lifecycle--teardown span,
+		.lifecycle--mounted span,
+		.lifecycle--destroyed span {
+		    position: absolute;
+		    top: 50%;
+		    left: 50%;
+			transform: translate(-50%, -50%);
+			width: 100%;
+		}
+	</style>
+	<div class="lifecycle--observe-data"><span>Observe les données</span></div>
+	<div class="lifecycle--init-event"><span>Initialise les événements</span></div>
+	<div class="lifecycle--has-el"><span>A l'option “el”</span></div>
+	<div class="lifecycle--has-template"><span>A l'option “template”</span></div>
+	<div class="lifecycle--when-mount"><span>quand vm.$mount(el) est appelé</span></div>
+	<div class="lifecycle--if-el-yes"><span>OUI</span></div>
+	<div class="lifecycle--if-el-no"><span>NON</span></div>
+	<div class="lifecycle--if-template-yes"><span>OUI</span></div>
+	<div class="lifecycle--if-template-no"><span>NON</span></div>
+	<div class="lifecycle--compile-function"><span>Compiler le template en une fonction de rendu</span></div>
+	<div class="lifecycle--compile-template"><span>Compiler le contenu HTML de el en tant que template</span></div>
+	<div class="lifecycle--create-el"><span>Créer vm.$el et remplacer el avec</span></div>
+	<div class="lifecycle--virtual-dom"><span>Nouveau rendu du DOM Virtuel</span></div>
+	<div class="lifecycle--when-data-change"><span>quand les données changent</span></div>
+	<div class="lifecycle--when-destroy"><span>quand vm.$destroy() est appelé</span></div>
+	<div class="lifecycle--teardown"><span>Démontage des observateurs, composants enfants et écouteurs d'événement</span></div>
+	<div class="lifecycle--mounted"><span>Monté</span></div>
+	<div class="lifecycle--destroyed"><span>Détruit</span></div>
+	<p><img src="/images/lifecycle.png" alt="Lifecycle"></p>
+</div>