From 14bfda2e2650c62fb22be9f0a0dac9337fc24f8d Mon Sep 17 00:00:00 2001
From: Mathieu Magnin <mathieu.magnin@gmail.com>
Date: Wed, 17 May 2017 18:06:25 +0200
Subject: [PATCH 1/2] [Fix #251] Fix landing page design on mobile (and add
 responsive)

---
 app/assets/stylesheets/_constants.scss      |   2 +
 app/assets/stylesheets/_placeholders.scss   |  15 ++-
 app/assets/stylesheets/landing.scss         | 130 ++++++++++++++------
 app/assets/stylesheets/new_footer.scss      |  16 +--
 app/assets/stylesheets/new_header.scss      |   6 +-
 app/views/layouts/_new_header.haml          |   6 +-
 app/views/layouts/new_application.html.haml |   1 +
 app/views/root/landing.html.haml            |  82 ++++++------
 8 files changed, 162 insertions(+), 96 deletions(-)

diff --git a/app/assets/stylesheets/_constants.scss b/app/assets/stylesheets/_constants.scss
index 1208ef340..bfd996878 100644
--- a/app/assets/stylesheets/_constants.scss
+++ b/app/assets/stylesheets/_constants.scss
@@ -5,3 +5,5 @@ $light-blue: #F2F6FA;
 $font-size-base: 16px;
 
 $page-width: 1040px;
+
+$default-padding: 15px;
diff --git a/app/assets/stylesheets/_placeholders.scss b/app/assets/stylesheets/_placeholders.scss
index 71870ccec..fbb5bf9d5 100644
--- a/app/assets/stylesheets/_placeholders.scss
+++ b/app/assets/stylesheets/_placeholders.scss
@@ -1,14 +1,21 @@
+@import "constants";
+@import "mixins";
+
 %horizontal-list {
   list-style-type: none;
   margin: 0;
   padding: 0;
   font-size: 0px;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 %horizontal-list-item {
   display: inline-block;
-
-  &:last-of-type {
-    margin-right: 0;
-  }
+}
+
+%page-width-container {
+  @include horizontal-padding($default-padding);
+  max-width: $page-width + 2 * $default-padding;
+  margin: 0 auto;
 }
diff --git a/app/assets/stylesheets/landing.scss b/app/assets/stylesheets/landing.scss
index e5f6b2251..b5fa9cb12 100644
--- a/app/assets/stylesheets/landing.scss
+++ b/app/assets/stylesheets/landing.scss
@@ -12,12 +12,30 @@
 }
 
 .landing-panel-inner-content {
-  width: $page-width;
-  margin: 0 auto;
+  @extend %page-width-container;
+}
+
+$landing-breakpoint: 1040px;
+
+.hero-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  @media (max-width: $landing-breakpoint) {
+    justify-content: center;
+  }
+}
+
+.hero-text {
+  max-width: 500px;
+
+  @media (max-width: $landing-breakpoint) {
+    margin: auto;
+  }
 }
 
 .hero-tagline {
-  width: 500px;
   font-size: 30px;
   margin-bottom: 0px;
 }
@@ -29,12 +47,16 @@
   font-weight: bold;
 }
 
-.hero-text {
-  width: 500px;
-}
-
 .hero-illustration {
-  width: 500px;
+  max-width: 500px;
+
+  img {
+    max-width: 100%;
+  }
+
+  @media (max-width: 1030px) {
+    margin: auto;
+  }
 }
 
 .hero-button {
@@ -69,6 +91,7 @@
 }
 
 .landing-panel-title {
+  width: 100%;
   font-size: 30px;
   font-weight: normal;
   text-align: center;
@@ -86,15 +109,22 @@
 
 .features {
   @extend %horizontal-list;
-}
+  width: 100%;
+  align-items: baseline;
+  justify-content: space-between;
 
-$feature-width: 320px;
-$features-count: 3;
+  @media (max-width: $landing-breakpoint) {
+    justify-content: center;
+  }
+}
 
 .feature {
   @extend %horizontal-list-item;
-  width: $feature-width;
-  margin-right: calc((#{$page-width} - (#{$feature-width} * #{$features-count})) / (#{$features-count} - 1));
+  width: 320px;
+
+  @media (max-width: $landing-breakpoint) {
+    margin: 15px 20px;
+  }
 }
 
 .feature-text {
@@ -116,18 +146,27 @@ $features-count: 3;
 
 .quotes {
   @extend %horizontal-list;
-}
+  width: 100%;
+  justify-content: space-between;
 
-$quote-width: 500px;
-$quote-count: 2;
+  @media (max-width: $landing-breakpoint) {
+    justify-content: center;
+  }
+}
 
 .quote {
   @extend %horizontal-list-item;
-  width: $quote-width;
-  margin-right: calc((#{$page-width} - (#{$quote-width} * #{$quote-count}))/ (#{$quote-count} - 1));
+  max-width: 500px;
   background-color: #FFFFFF;
   box-shadow: 0 4px 16px 0 rgba(153, 153, 153, 0.2);
   padding: 24px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+
+  @media (max-width: $landing-breakpoint) {
+    margin: 15px 0;
+  }
 }
 
 .quote-quotation-mark {
@@ -136,13 +175,16 @@ $quote-count: 2;
 
 .quote-content {
   font-size: 18px;
-  width: 388px;
   margin-bottom: 24px;
 }
 
+.quote-content-wrapper {
+  margin-left: 20px;
+  width: 100%;
+}
+
 .quote-author {
   font-size: 14px;
-  margin-left: 64px;
 }
 
 .quote-author-name {
@@ -155,16 +197,18 @@ $quote-count: 2;
 
 .numbers {
   @extend %horizontal-list;
+  justify-content: space-around;
+  width: 100%;
 }
 
-$number-width: 320px;
-$number-count: 3;
-
 .number {
   @extend %horizontal-list-item;
-  width: $number-width;
-  margin-right: calc((#{$page-width} - (#{$number-width} * #{$number-count}))/ (#{$number-count} - 1));
+  width: 320px;
   text-align: center;
+
+  @media (max-width: $landing-breakpoint) {
+    margin-bottom: 15px;
+  }
 }
 
 .number-value {
@@ -178,25 +222,33 @@ $number-count: 3;
   font-size: 20px;
 }
 
+$users-breakpoint: 950px;
+
 .users {
   @extend %horizontal-list;
-}
+  justify-content: space-between;
+  width: 100%;
 
-$image-width: 170px;
-$images-total-width: $image-width * 5;
-$images-count: 5;
+  @media (max-width: $users-breakpoint) {
+    justify-content: space-around;
+  }
+}
 
 .user {
   @extend %horizontal-list-item;
-  margin-right: calc((#{$page-width} - (#{$images-total-width}))/ (#{$images-count} - 1));
+  width: 170px;
 
   &:hover {
     opacity: 0.6;
   }
+
+  @media (max-width: $users-breakpoint) {
+    margin: 0 15px 15px;
+  }
 }
 
 .user-image {
-  width: $image-width;
+  width: 170px;
 }
 
 .cta-panel {
@@ -204,6 +256,13 @@ $images-count: 5;
   color: #FFFFFF;
 }
 
+.cta-panel-wrapper {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
 .cta-panel-title {
   font-size: 24px;
   font-weight: bold;
@@ -212,22 +271,21 @@ $images-count: 5;
 
 .cta-panel-explanation {
   font-size: 24px;
-  margin-bottom: 0;
+  margin-bottom: 10px;
 }
 
-$cta-panel-button-height: 60px;
 $cta-panel-button-border-size: 2px;
 
 .cta-panel-button {
   @include horizontal-padding(30px);
 
   display: block;
-  height: $cta-panel-button-height;
-  line-height: $cta-panel-button-height - (2 * $cta-panel-button-border-size);
-  border-radius: $cta-panel-button-height;
+  padding: 10px;
+  border-radius: 100px;
   border: $cta-panel-button-border-size solid #FFFFFF;
   color: #FFFFFF;
   font-size: 24px;
+  text-align: center;
 
   &:hover {
     color: #FFFFFF;
diff --git a/app/assets/stylesheets/new_footer.scss b/app/assets/stylesheets/new_footer.scss
index ccfab7146..c88b853cd 100644
--- a/app/assets/stylesheets/new_footer.scss
+++ b/app/assets/stylesheets/new_footer.scss
@@ -10,23 +10,25 @@
 }
 
 .footer-inner-content {
-  width: $page-width;
-  margin: 0 auto;
+  @extend %page-width-container;
 }
 
 .footer-columns {
   @extend %horizontal-list;
+  justify-content: flex-start;
 }
 
-$footer-column-width: 320px;
-$footer-column-count: 3;
-
 .footer-column {
   @extend %horizontal-list-item;
-  width: $footer-column-width;
-  margin-right: calc((#{$page-width} - (#{$footer-column-width} * #{$footer-column-count})) / (#{$footer-column-count} - 1));
   font-size: 14px;
   vertical-align: top;
+  flex-grow: 1;
+  min-width: 320px;
+
+  @media (max-width: 1000px) {
+    width: 100%;
+    margin-bottom: 14px;
+  }
 }
 
 .footer-logos,
diff --git a/app/assets/stylesheets/new_header.scss b/app/assets/stylesheets/new_header.scss
index a76bbf9a1..aa542550e 100644
--- a/app/assets/stylesheets/new_header.scss
+++ b/app/assets/stylesheets/new_header.scss
@@ -1,6 +1,7 @@
 @import "constants";
 @import "colors";
 @import "mixins";
+@import "placeholders";
 
 // FIXME: Rename when the header is generalized
 .new-header {
@@ -13,8 +14,9 @@
 }
 
 .header-inner-content {
-  width: $page-width;
-  margin: 0 auto;
+  @extend %page-width-container;
+  display: flex;
+  justify-content: space-between;
 }
 
 .header-logo {
diff --git a/app/views/layouts/_new_header.haml b/app/views/layouts/_new_header.haml
index 82554fd60..de45e2ef1 100644
--- a/app/views/layouts/_new_header.haml
+++ b/app/views/layouts/_new_header.haml
@@ -1,7 +1,5 @@
 .new-header{ class: current_page?(root_path) ? nil : 'new-header-with-border' }
   .header-inner-content
-    %img.header-logo.pull-left{ src: image_url("header/logo-tps.svg") }
+    %img.header-logo{ src: image_url("header/logo-tps.svg") }
 
-    = link_to "Connexion", new_user_session_path, :class => "header-login-button pull-right"
-
-    .clear-fix
+    = link_to "Connexion", new_user_session_path, class: "header-login-button"
diff --git a/app/views/layouts/new_application.html.haml b/app/views/layouts/new_application.html.haml
index ba6539661..e76072c71 100644
--- a/app/views/layouts/new_application.html.haml
+++ b/app/views/layouts/new_application.html.haml
@@ -3,6 +3,7 @@
     %meta{ "http-equiv" => "Content-Type", :content => "text/html; charset=UTF-8" }
     %meta{ "http-equiv" => "X-UA-Compatible", :content => "IE=edge" }
     %meta{ :name => "turbolinks-cache-control", :content => "no-cache" }
+    %meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
     = csrf_meta_tags
     = action_cable_meta_tag
 
diff --git a/app/views/root/landing.html.haml b/app/views/root/landing.html.haml
index 561246170..61c4ed7c4 100644
--- a/app/views/root/landing.html.haml
+++ b/app/views/root/landing.html.haml
@@ -1,23 +1,22 @@
 .landing
   .landing-panel.hero-panel
     .landing-panel-inner-content
-      .hero-text.pull-left
-        %p.hero-tagline
-          %em.hero-tagline-em Dématérialisez
-          %br
-          vos procédures administratives en quelques minutes
+      .hero-wrapper
+        .hero-text
+          %p.hero-tagline
+            %em.hero-tagline-em Dématérialisez
+            %br
+            vos procédures administratives en quelques minutes
 
-        = link_to "Demander une démo",
-          "mailto:#{t("dynamics.contact_email")}?subject=Demande de démo TPS",
-          :class => "hero-button"
+          = link_to "Demander une démo",
+            "mailto:#{t("dynamics.contact_email")}?subject=Demande de démo TPS",
+            :class => "hero-button"
 
-        %p.hero-phone-cta
-          ou nous appeler au 01 40 15 68 49
+          %p.hero-phone-cta
+            ou nous appeler au 01 40 15 68 49
 
-      .hero-illustration.pull-right
-        %img{ :src => image_url("landing/hero/dematerialiser.svg") }
-
-      .clearfix
+        .hero-illustration
+          %img{ :src => image_url("landing/hero/dematerialiser.svg") }
 
   .landing-panel.features-panel
     .landing-panel-inner-content
@@ -55,28 +54,26 @@
 
       %ul.quotes
         %li.quote
-          %img.quote-quotation-mark.pull-left{ :src => image_url("landing/testimonials/quotation-mark.svg") }
-          %p.quote-content.pull-right
-            TPS est un outil de dématérialisation adapté au dépôt de dossiers de demande d’inscription au registre des transporteurs routiers en Ile-de-France. Les échanges avec les usagers sont facilités, ce qui permet de réduire les délais d’instructions et de gagner en efficacité.
-          .clearfix
+          %img.quote-quotation-mark{ :src => image_url("landing/testimonials/quotation-mark.svg") }
+          .quote-content-wrapper
+            %p.quote-content
+              TPS est un outil de dématérialisation adapté au dépôt de dossiers de demande d’inscription au registre des transporteurs routiers en Ile-de-France. Les échanges avec les usagers sont facilités, ce qui permet de réduire les délais d’instructions et de gagner en efficacité.
 
-          %p.quote-author.pull-left
-            %span.quote-author-name Elodie Le Rhun
-            %br
-            Chef de bureau, DRIEA Ile-de-France
-          .clearfix
+            %p.quote-author
+              %span.quote-author-name Elodie Le Rhun
+              %br
+              Chef de bureau, DRIEA Ile-de-France
 
         %li.quote
-          %img.quote-quotation-mark.pull-left{ :src => image_url("landing/testimonials/quotation-mark.svg") }
-          %p.quote-content.pull-right
-            TPS c’est surtout l’assurance d’un dialogue en toute fluidité et en toute transparence entre les porteurs de projet et l’administration. Un service qui garantit une économie de temps et beaucoup moins de manipulations des dossiers.
-          .clearfix
+          %img.quote-quotation-mark{ :src => image_url("landing/testimonials/quotation-mark.svg") }
+          .quote-content-wrapper
+            %p.quote-content
+              TPS c’est surtout l’assurance d’un dialogue en toute fluidité et en toute transparence entre les porteurs de projet et l’administration. Un service qui garantit une économie de temps et beaucoup moins de manipulations des dossiers.
 
-          %p.quote-author.pull-left
-            %span.quote-author-name Nadja Briki
-            %br
-            Déléguée de la Préfète du Pas-de-Calais
-          .clearfix
+            %p.quote-author
+              %span.quote-author-name Nadja Briki
+              %br
+              Déléguée de la Préfète du Pas-de-Calais
 
   - cache "numbers-panel", :expires_in => 3.hours do
     .landing-panel.numbers-panel
@@ -128,14 +125,13 @@
 
   .landing-panel.cta-panel
     .landing-panel-inner-content
-      .pull-right
-        = link_to "Demander une démo",
-          "mailto:#{t('dynamics.contact_email')}?subject=Demande de démo TPS",
-          :class => "cta-panel-button"
-        %p.cta-panel-phone-cta
-          ou nous appeler au 01 40 15 68 49
-      .pull-left
-        %h1.cta-panel-title Commencez à dématerialiser vos procédures
-        %p.cta-panel-explanation Nous vous accompagnons dans la prise en main de l’outil
-      .clearfix
-
+      .cta-panel-wrapper
+        %div
+          %h1.cta-panel-title Commencez à dématerialiser vos procédures
+          %p.cta-panel-explanation Nous vous accompagnons dans la prise en main de l’outil
+        %div
+          = link_to "Demander une démo",
+            "mailto:#{t('dynamics.contact_email')}?subject=Demande de démo TPS",
+            :class => "cta-panel-button"
+          %p.cta-panel-phone-cta
+            ou nous appeler au 01 40 15 68 49

From 8af72f7b9a9a59eaa900903347c63704bc46fc0c Mon Sep 17 00:00:00 2001
From: Mathieu Magnin <mathieu.magnin@gmail.com>
Date: Wed, 17 May 2017 15:11:35 +0200
Subject: [PATCH 2/2] Isolate new design stylesheets

---
 .scss-lint.yml                                    |  2 +-
 app/assets/stylesheets/_constants.scss            |  4 ----
 app/assets/stylesheets/application.scss           |  7 -------
 app/assets/stylesheets/new_application.scss       | 10 ----------
 .../stylesheets/{ => new_design}/_colors.scss     |  0
 app/assets/stylesheets/new_design/_constants.scss |  3 +++
 .../stylesheets/{ => new_design}/_mixins.scss     |  0
 .../{ => new_design}/_placeholders.scss           |  0
 .../stylesheets/{ => new_design}/_typography.scss |  0
 app/assets/stylesheets/new_design/beta.scss       | 15 +++++++++++++++
 .../stylesheets/{ => new_design}/common.scss      |  0
 .../{ => new_design}/custom_reset.scss            |  0
 .../stylesheets/{ => new_design}/fonts.scss       |  0
 .../stylesheets/{ => new_design}/landing.scss     |  0
 .../stylesheets/{ => new_design}/new_alert.scss   |  0
 .../stylesheets/new_design/new_application.scss   |  6 ++++++
 .../stylesheets/{ => new_design}/new_footer.scss  |  0
 .../stylesheets/{ => new_design}/new_header.scss  |  0
 .../stylesheets/{ => new_design}/reset.scss       |  0
 .../stylesheets/{ => new_design}/utils.scss       |  0
 app/views/layouts/new_application.html.haml       |  2 +-
 config/initializers/assets.rb                     |  2 +-
 22 files changed, 27 insertions(+), 24 deletions(-)
 delete mode 100644 app/assets/stylesheets/new_application.scss
 rename app/assets/stylesheets/{ => new_design}/_colors.scss (100%)
 create mode 100644 app/assets/stylesheets/new_design/_constants.scss
 rename app/assets/stylesheets/{ => new_design}/_mixins.scss (100%)
 rename app/assets/stylesheets/{ => new_design}/_placeholders.scss (100%)
 rename app/assets/stylesheets/{ => new_design}/_typography.scss (100%)
 create mode 100644 app/assets/stylesheets/new_design/beta.scss
 rename app/assets/stylesheets/{ => new_design}/common.scss (100%)
 rename app/assets/stylesheets/{ => new_design}/custom_reset.scss (100%)
 rename app/assets/stylesheets/{ => new_design}/fonts.scss (100%)
 rename app/assets/stylesheets/{ => new_design}/landing.scss (100%)
 rename app/assets/stylesheets/{ => new_design}/new_alert.scss (100%)
 create mode 100644 app/assets/stylesheets/new_design/new_application.scss
 rename app/assets/stylesheets/{ => new_design}/new_footer.scss (100%)
 rename app/assets/stylesheets/{ => new_design}/new_header.scss (100%)
 rename app/assets/stylesheets/{ => new_design}/reset.scss (100%)
 rename app/assets/stylesheets/{ => new_design}/utils.scss (100%)

diff --git a/.scss-lint.yml b/.scss-lint.yml
index 7ee185bb3..835a46690 100644
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -1,4 +1,4 @@
-exclude: 'app/assets/stylesheets/reset.scss'
+exclude: 'app/assets/stylesheets/new_design/reset.scss'
 
 linters:
   BangFormat:
diff --git a/app/assets/stylesheets/_constants.scss b/app/assets/stylesheets/_constants.scss
index bfd996878..119b9eaea 100644
--- a/app/assets/stylesheets/_constants.scss
+++ b/app/assets/stylesheets/_constants.scss
@@ -3,7 +3,3 @@ $light-blue: #F2F6FA;
 
 // Bootstrap constants
 $font-size-base: 16px;
-
-$page-width: 1040px;
-
-$default-padding: 15px;
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 33338dbdb..5b64692b7 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -13,13 +13,8 @@
 // file per style scope.
 //
 // = require _card
-// = require _colors
-// = require _constants
 // = require _helpers
-// = require _mixins
-// = require _placeholders
 // = require _turbolinks
-// = require _typography
 // = require admin_procedures_modal
 // = require admin_type_de_champ
 // = require backoffice
@@ -31,9 +26,7 @@
 // = require dossier_show
 // = require dossiers
 // = require etapes
-// = require fonts
 // = require france_connect_particulier
-// = require landing
 // = require left_panel
 // = require login
 // = require main_container
diff --git a/app/assets/stylesheets/new_application.scss b/app/assets/stylesheets/new_application.scss
deleted file mode 100644
index db2e8c65c..000000000
--- a/app/assets/stylesheets/new_application.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// = require reset
-// = require custom_reset
-// = require common
-// = require utils
-// = require fonts
-// = require new_alert
-// = require new_header
-// = require new_footer
-// = require landing
-// = require navbar
diff --git a/app/assets/stylesheets/_colors.scss b/app/assets/stylesheets/new_design/_colors.scss
similarity index 100%
rename from app/assets/stylesheets/_colors.scss
rename to app/assets/stylesheets/new_design/_colors.scss
diff --git a/app/assets/stylesheets/new_design/_constants.scss b/app/assets/stylesheets/new_design/_constants.scss
new file mode 100644
index 000000000..897512e1d
--- /dev/null
+++ b/app/assets/stylesheets/new_design/_constants.scss
@@ -0,0 +1,3 @@
+$page-width: 1040px;
+
+$default-padding: 15px;
diff --git a/app/assets/stylesheets/_mixins.scss b/app/assets/stylesheets/new_design/_mixins.scss
similarity index 100%
rename from app/assets/stylesheets/_mixins.scss
rename to app/assets/stylesheets/new_design/_mixins.scss
diff --git a/app/assets/stylesheets/_placeholders.scss b/app/assets/stylesheets/new_design/_placeholders.scss
similarity index 100%
rename from app/assets/stylesheets/_placeholders.scss
rename to app/assets/stylesheets/new_design/_placeholders.scss
diff --git a/app/assets/stylesheets/_typography.scss b/app/assets/stylesheets/new_design/_typography.scss
similarity index 100%
rename from app/assets/stylesheets/_typography.scss
rename to app/assets/stylesheets/new_design/_typography.scss
diff --git a/app/assets/stylesheets/new_design/beta.scss b/app/assets/stylesheets/new_design/beta.scss
new file mode 100644
index 000000000..c8480d52d
--- /dev/null
+++ b/app/assets/stylesheets/new_design/beta.scss
@@ -0,0 +1,15 @@
+#beta {
+  text-align: center;
+  text-transform: uppercase;
+  position: fixed;
+  bottom: 26px;
+  right: -35px;
+  transform: rotate(-45deg);
+  width: 150px;
+  background-color: #008CBA;
+  color: #FFFFFF;
+  padding: 5px;
+  font-size: 15px;
+  font-weight: 700;
+  z-index: 10;
+}
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/new_design/common.scss
similarity index 100%
rename from app/assets/stylesheets/common.scss
rename to app/assets/stylesheets/new_design/common.scss
diff --git a/app/assets/stylesheets/custom_reset.scss b/app/assets/stylesheets/new_design/custom_reset.scss
similarity index 100%
rename from app/assets/stylesheets/custom_reset.scss
rename to app/assets/stylesheets/new_design/custom_reset.scss
diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/new_design/fonts.scss
similarity index 100%
rename from app/assets/stylesheets/fonts.scss
rename to app/assets/stylesheets/new_design/fonts.scss
diff --git a/app/assets/stylesheets/landing.scss b/app/assets/stylesheets/new_design/landing.scss
similarity index 100%
rename from app/assets/stylesheets/landing.scss
rename to app/assets/stylesheets/new_design/landing.scss
diff --git a/app/assets/stylesheets/new_alert.scss b/app/assets/stylesheets/new_design/new_alert.scss
similarity index 100%
rename from app/assets/stylesheets/new_alert.scss
rename to app/assets/stylesheets/new_design/new_alert.scss
diff --git a/app/assets/stylesheets/new_design/new_application.scss b/app/assets/stylesheets/new_design/new_application.scss
new file mode 100644
index 000000000..82fb5fc2a
--- /dev/null
+++ b/app/assets/stylesheets/new_design/new_application.scss
@@ -0,0 +1,6 @@
+// = require ./reset
+// = require ./custom_reset
+// = require ./common
+// = require ./utils
+// = require ./fonts
+// = require_tree .
diff --git a/app/assets/stylesheets/new_footer.scss b/app/assets/stylesheets/new_design/new_footer.scss
similarity index 100%
rename from app/assets/stylesheets/new_footer.scss
rename to app/assets/stylesheets/new_design/new_footer.scss
diff --git a/app/assets/stylesheets/new_header.scss b/app/assets/stylesheets/new_design/new_header.scss
similarity index 100%
rename from app/assets/stylesheets/new_header.scss
rename to app/assets/stylesheets/new_design/new_header.scss
diff --git a/app/assets/stylesheets/reset.scss b/app/assets/stylesheets/new_design/reset.scss
similarity index 100%
rename from app/assets/stylesheets/reset.scss
rename to app/assets/stylesheets/new_design/reset.scss
diff --git a/app/assets/stylesheets/utils.scss b/app/assets/stylesheets/new_design/utils.scss
similarity index 100%
rename from app/assets/stylesheets/utils.scss
rename to app/assets/stylesheets/new_design/utils.scss
diff --git a/app/views/layouts/new_application.html.haml b/app/views/layouts/new_application.html.haml
index e76072c71..7a90a8c78 100644
--- a/app/views/layouts/new_application.html.haml
+++ b/app/views/layouts/new_application.html.haml
@@ -14,7 +14,7 @@
     = favicon_link_tag(image_url("favicons/32x32.png"), type: "image/png", sizes: "32x32")
     = favicon_link_tag(image_url("favicons/96x96.png"), type: "image/png", sizes: "96x96")
 
-    = stylesheet_link_tag "new_application", :media => "all", "data-turbolinks-track" => true
+    = stylesheet_link_tag "new_design/new_application", :media => "all", "data-turbolinks-track" => true
     = stylesheet_link_tag "print", :media => "print", "data-turbolinks-track" => true
 
   %body
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index 882590de7..c20bc1259 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -8,4 +8,4 @@ Rails.application.config.assets.version = '1.0'
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
-Rails.application.config.assets.precompile += %w(print.css new_application.css)
+Rails.application.config.assets.precompile += %w(print.css new_design/new_application.css)