15 files changed, 101 insertions, 32 deletions
diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index 107e9102..4d6f3037 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -9,8 +9,7 @@
 <meta name="viewport" content="width=device-width">
 <link href="assets/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 <link href="assets/bower_components/jquery-file-upload/css/jquery.fileupload.css" rel="stylesheet" type="text/css">
-<link href="assets/css/opensans.css" rel="stylesheet" type="text/css">
-<link rel="stylesheet" href="assets/css/main.css">
+<link rel="stylesheet" href="assets/css/style.css">
 </head>
 
 <body>
@@ -56,7 +55,7 @@
 </div>
 
 <div class="off-canvas-wrap content" data-offcanvas>
-  <header id="main" >
+  <header class="message-panel-container" >
     <div id="user-alerts" class="message-panel"></div>
   </header>
 
diff --git a/web-ui/app/js/user_alerts/ui/user_alerts.js b/web-ui/app/js/user_alerts/ui/user_alerts.js
index b02762aa..e944a7a5 100644
--- a/web-ui/app/js/user_alerts/ui/user_alerts.js
+++ b/web-ui/app/js/user_alerts/ui/user_alerts.js
@@ -32,20 +32,26 @@ define(
         dismissTimeout: 3000
       });
 
-      this.render = function (message) {
+      this.render = function(message) {
         this.$node.html(templates.userAlerts.message(message));
         this.show();
         setTimeout(this.hide.bind(this), this.attr.dismissTimeout);
       };
 
 
-      this.displayMessage = function (ev, data) {
-        this.render({ message:  {content: data.message, class: (data.class || 'success')}});
+      this.displayMessage = function(ev, data) {
+        this.render({
+          message: {
+            content: data.message,
+            class: 'message-panel__growl--' + (data.class || 'success')
+          }
+        });
       };
 
-      this.after('initialize', function () {
+      this.after('initialize', function() {
         this.on(document, events.ui.userAlerts.displayMessage, this.displayMessage);
       });
     }
   }
 );
+
diff --git a/web-ui/app/scss/_alerts.scss b/web-ui/app/scss/_alerts.scss
deleted file mode 100644
index cfb31cbe..00000000
--- a/web-ui/app/scss/_alerts.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.message-panel {
-  width: 100%;
-  margin: 10px auto;
-  position: fixed;
-  z-index: 10000;
-  text-align: center;
-  span{
-    padding: 5px 60px;
-    &.success {
-        background: $warning;
-        color: darken($warning, 50%);
-        border: 1px solid darken($warning, 10%);
-        @include box-shadow(1px 1px 3px darken($warning, 60%));
-    }
-    &.error {
-        font-weight: bold;
-        color: white;
-        background: $error;
-        border: 1px solid darken($error, 10%);
-        @include box-shadow(1px 1px 3px darken($error, 60%));
-    }
-  }
-}
diff --git a/web-ui/app/scss/main.scss b/web-ui/app/scss/_main.scss
index b582a5d5..b582a5d5 100644
--- a/web-ui/app/scss/main.scss
+++ b/web-ui/app/scss/_main.scss
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 5bb84105..4583c55d 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -1,4 +1,4 @@
-@import 'colors';
+@import 'base/colors';
 
 // SHARED MIXINS
 @mixin btn-transition {
diff --git a/web-ui/app/scss/_others.scss b/web-ui/app/scss/_others.scss
new file mode 100644
index 00000000..e73ed33d
--- /dev/null
+++ b/web-ui/app/scss/_others.scss
@@ -0,0 +1,7 @@
+.no-padding {
+    padding: 0;
+}
+
+.text-right {
+    text-align: right;
+}
diff --git a/web-ui/app/scss/_colors.scss b/web-ui/app/scss/base/_colors.scss
index de5f76b3..de5f76b3 100644
--- a/web-ui/app/scss/_colors.scss
+++ b/web-ui/app/scss/base/_colors.scss
diff --git a/web-ui/app/scss/opensans.scss b/web-ui/app/scss/base/_fonts.scss
index ada6a025..ada6a025 100644
--- a/web-ui/app/scss/opensans.scss
+++ b/web-ui/app/scss/base/_fonts.scss
diff --git a/web-ui/app/scss/base/_scaffolding.scss b/web-ui/app/scss/base/_scaffolding.scss
new file mode 100644
index 00000000..b8b5fa3b
--- /dev/null
+++ b/web-ui/app/scss/base/_scaffolding.scss
@@ -0,0 +1,10 @@
+html {
+    height: 100% ;
+}
+
+body {
+    min-height: 100% ;
+    overflow: hidden;
+    background: $white;
+}
+
diff --git a/web-ui/app/scss/layout/_message-panel.scss b/web-ui/app/scss/layout/_message-panel.scss
new file mode 100644
index 00000000..e311a9bf
--- /dev/null
+++ b/web-ui/app/scss/layout/_message-panel.scss
@@ -0,0 +1,9 @@
+message-panel-container {
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    width: 100% ;
+    position: relative;
+    margin-bottom: 0;
+}
+
diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss
new file mode 100644
index 00000000..eeadd662
--- /dev/null
+++ b/web-ui/app/scss/style.scss
@@ -0,0 +1,35 @@
+// vendor stylesheets and resets
+@import "vendor/reset";
+@import "compass/css3";
+@import "vendor/foundation";
+
+// basic configuration
+@import "base/fonts";
+@import "base/colors";
+@import "base/scaffolding";
+
+// templates
+
+
+// mixins
+@import "mixins";
+
+
+// layout
+@import "layout/message-panel";
+
+// modules
+@import "views/message-panel";
+
+
+// misc stuff
+@import "others";
+
+// TODO
+@import "compose";
+@import "mascot";
+@import "read";
+@import "reply";
+@import "security";
+@import "styles";
+
diff --git a/web-ui/app/scss/foundation.scss b/web-ui/app/scss/vendor/_foundation.scss
index 7918cf26..7918cf26 100644
--- a/web-ui/app/scss/foundation.scss
+++ b/web-ui/app/scss/vendor/_foundation.scss
diff --git a/web-ui/app/scss/reset.scss b/web-ui/app/scss/vendor/_reset.scss
index 55f8d054..55f8d054 100644
--- a/web-ui/app/scss/reset.scss
+++ b/web-ui/app/scss/vendor/_reset.scss
diff --git a/web-ui/app/scss/views/_message-panel.scss b/web-ui/app/scss/views/_message-panel.scss
new file mode 100644
index 00000000..4a0a7a6b
--- /dev/null
+++ b/web-ui/app/scss/views/_message-panel.scss
@@ -0,0 +1,26 @@
+.message-panel {
+  width: 100%;
+  margin: 10px auto;
+  position: fixed;
+  z-index: 10000;
+  text-align: center;
+
+  &__growl {
+    padding: 5px 60px;
+
+    &--success {
+      background: $warning;
+      color: darken($warning, 50%);
+      border: 1px solid darken($warning, 10%);
+      @include box-shadow(1px 1px 3px darken($warning, 60%));
+    }
+
+    &--error {
+      font-weight: bold;
+      color: white;
+      background: $error;
+      border: 1px solid darken($error, 10%);
+      @include box-shadow(1px 1px 3px darken($error, 60%));
+    }
+  }
+}
diff --git a/web-ui/app/templates/user_alerts/message.hbs b/web-ui/app/templates/user_alerts/message.hbs
index 3a0055eb..abba1f91 100644
--- a/web-ui/app/templates/user_alerts/message.hbs
+++ b/web-ui/app/templates/user_alerts/message.hbs
@@ -1 +1 @@
-<span class="{{ message.class }}">{{ message.content }}</span>
+<span class="message-panel__growl {{ message.class }}">{{ message.content }}</span>