Create generic two-columns layout

app/assets/stylesheets/new_design/layouts.scss

@@ -0,0 +1,32 @@
+@import "colors";
+@import "constants";
+@import "placeholders";
+
+.two-columns {
+  $column-padding: 60px;
+  $two-columns-breakpoint: $page-width + (2 * $column-padding);
+
+  background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, $light-grey 50%, $light-grey 100%);
+
+  .columns-container {
+    @extend %page-width-container;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .column {
+    width: 50%;
+    padding: $column-padding;
+
+    @media (min-width: $two-columns-breakpoint) {
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+}

app/assets/stylesheets/new_design/patron.scss

@@ -1,7 +1,9 @@
 @import "placeholders";
 
 .patron {
-  @extend %page-width-container;
+  .patron-container {
+    @extend %page-width-container;
+  }
 
   p {
     margin-bottom: 20px;

app/views/root/patron.html.haml

@@ -1,27 +1,37 @@
 .patron
-  %h1 Patron
+  .patron-container
+    %h1 Patron
 
-  %h2 Formulaires
+    %h2 Formulaires
 
-  %form.form
-    %label Nom
-    %input{ type: "text" }
-    %label Prénom
-    %input{ type: "text", placeholder: "ex : Ivan" }
-    %label Mot de passe
-    %input{ type: "password", value: "12345678" }
-    %input.button{ type: "submit", value: "Envoyer" }
+    %form.form
+      %label Nom
+      %input{ type: "text" }
+      %label Prénom
+      %input{ type: "text", placeholder: "ex : Ivan" }
+      %label Mot de passe
+      %input{ type: "password", value: "12345678" }
+      %input.button{ type: "submit", value: "Envoyer" }
 
-  %h2 Boutons
+    %h2 Boutons
 
-  %p
-    = link_to ".button", "#", class: "button"
+    %p
+      = link_to ".button", "#", class: "button"
 
-    = link_to ".button.primary", "#", class: "button primary"
+      = link_to ".button.primary", "#", class: "button primary"
 
-    = link_to ".button.large", "#", class: "button large"
+      = link_to ".button.large", "#", class: "button large"
 
-    = link_to ".button.large.primary", "#", class: "button large primary"
+      = link_to ".button.large.primary", "#", class: "button large primary"
 
-  %p
-    = link_to ".button.primary.expand", "#", class: "button primary expand"
+    %p
+      = link_to ".button.primary.expand", "#", class: "button primary expand"
+
+    %h2 Layout deux colonnes
+
+  .two-columns
+    .columns-container
+      .column
+        Insérer ici le contenu de la colonne 1
+      .column
+        Insérer ici le contenu de la colonne 2