Set up SASS and change base font

Makefile

@@ -1,9 +1,12 @@
 NPM = npm
 BROWSERIFY = ./node_modules/.bin/browserify
+NODE_SASS = ./node_modules/.bin/node-sass
 UGLIFYJS = ./node_modules/.bin/uglifyjs
 EXORCIST = ./node_modules/.bin/exorcist
 CLEANCSS = ./node_modules/.bin/cleancss
-CSS_FILES = font.css toastr.css main.css overlay.css videolayout_default.css font-awesome.css jquery-impromptu.css modaldialog.css notice.css popup_menu.css recording.css login_menu.css popover.css jitsi_popover.css contact_list.css chat.css welcome_page.css settingsmenu.css feedback.css jquery.contextMenu.css keyboard-shortcuts.css
+STYLES_MAIN = css/main.scss
+STYLES_BUNDLE = css/all.bundle.css
+STYLES_DESTINATION = css/all.css
 DEPLOY_DIR = libs
 BROWSERIFY_FLAGS = -d
 OUTPUT_DIR = .
@@ -45,7 +48,9 @@ deploy-lib-jitsi-meet:
 	$(LIBJITSIMEET_DIR)/connection_optimization/external_connect.js \
 	$(DEPLOY_DIR)
 deploy-css:
-	(cd css; cat $(CSS_FILES)) | $(CLEANCSS) > css/all.css
+	$(NODE_SASS) $(STYLES_MAIN) $(STYLES_BUNDLE) && \
+	$(CLEANCSS) $(STYLES_BUNDLE) > $(STYLES_DESTINATION) ; \
+	rm $(STYLES_BUNDLE)
 
 deploy-local:
 	([ ! -x deploy-local.sh ] || ./deploy-local.sh)

css/main.css → css/_base.scss

@@ -14,10 +14,7 @@ html, body{
 }
 
 html, body, input, textarea, keygen, select, button {
-    font-family:    'open_sanslight',
-                    'Helvetica Neue',
-                    Helvetica,
-                    sans-serif !important;
+    font-family: $baseFontFamily !important;
 }
 
 .right-panel {

css/_contact_list.scss

@@ -0,0 +1,62 @@
+#contactlist {
+    display: none;
+    background-color: black;
+    cursor: default;
+
+    > div.title {
+        text-align: left;
+        padding: 7px 10px;
+        margin: 2px;
+        color: #21B9FC;
+        font-size: 11pt;
+        border-bottom: 1px solid #676767;
+
+        > span {
+            margin-left: 5px;
+        }
+    }
+
+    > ul#contacts {
+        position: absolute;
+        top: 31px;
+        bottom: 0px;
+        width: 100%;
+        margin: 0px;
+        padding: 0px;
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+
+    .clickable {
+        cursor: pointer;
+    }
+}
+
+#contacts {
+
+    >li {
+        list-style-type: none;
+        text-align: left;
+        color: #FFF;
+        font-size: 10pt;
+        padding: 7px 10px;
+        margin: 2px;
+
+        > p {
+            display: inline-block;
+            vertical-align: middle;
+            margin: 0px;
+        }
+    }
+}
+
+
+.avatar {
+    padding: 0px;
+    margin-right: 10px;
+    vertical-align: middle;
+    font-size: 22pt;
+    border-radius: 20px;
+    max-height: 30px;
+    max-width: 30px;
+}

css/unsupported_browser.css → css/_unsupported_browser.scss

@@ -3,7 +3,7 @@ body {
     height:100%;
     background-color: white;
     color: #424242;
-    font-family: 'open_sanslight', 'Helvetica Neue', Helvetica, sans-serif;
+    font-family: $baseFontFamily;
     font-size: 28px;
     margin:0;
     padding:0;

css/_variables.scss

@@ -0,0 +1,5 @@
+/**
+*   Style variables
+*/
+
+$baseFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;

css/contact_list.css

@@ -1,58 +0,0 @@
-#contactlist {
-    display: none;
-    background-color: black;
-    cursor: default;
-}
-
-#contactlist>div.title {
-    text-align: left;
-    padding: 7px 10px;
-    margin: 2px;
-    color: #21B9FC;
-    font-size: 11pt;
-    border-bottom: 1px solid #676767;
-}
-
-#contactlist>div.title>span {
-    margin-left: 5px;
-}
-
-#contactlist>ul#contacts {
-    position: absolute;
-    top: 31px;
-    bottom: 0px;
-    width: 100%;
-    margin: 0px;
-    padding: 0px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-}
-
-#contacts>li {
-    list-style-type: none;
-    text-align: left;
-    color: #FFF;
-    font-size: 10pt;
-    padding: 7px 10px;
-    margin: 2px;
-}
-
-#contacts>li>p {
-    display: inline-block;
-    vertical-align: middle;
-    margin: 0px;
-}
-
-.avatar {
-    padding: 0px;
-    margin-right: 10px;
-    vertical-align: middle;
-    font-size: 22pt;
-    border-radius: 20px;
-    max-height: 30px;
-    max-width: 30px;
-}
-
-#contactlist .clickable {
-    cursor: pointer;
-}

css/main.scss

@@ -0,0 +1,36 @@
+/* Variables BEGIN */
+
+@import 'variables';
+
+/* Variables END */
+
+/* Fonts BEGIN */
+
+@import 'font';
+@import 'font-awesome';
+
+/* Fonts END */
+
+/* Modules BEGIN */
+
+@import 'toastr';
+@import 'base';
+@import 'overlay';
+@import 'videolayout_default';
+@import 'jquery-impromptu';
+@import 'modaldialog';
+@import 'notice';
+@import 'popup_menu';
+@import 'recording';
+@import 'login_menu';
+@import 'popover';
+@import 'jitsi_popover';
+@import 'contact_list';
+@import 'chat';
+@import 'welcome_page';
+@import 'settingsmenu';
+@import 'feedback';
+@import 'jquery.contextMenu';
+@import 'keyboard-shortcuts';
+
+/* Modules END */

package.json

@@ -35,16 +35,17 @@
     "jws": "*"
   },
   "devDependencies": {
+    "babel-polyfill": "*",
+    "babel-preset-es2015": "*",
+    "babelify": "*",
     "browserify": "11.1.x",
     "browserify-shim": "^3.8.10",
+    "clean-css": "*",
     "exorcist": "*",
     "jshint": "2.8.0",
+    "node-sass": "^3.8.0",
     "precommit-hook": "3.0.0",
-    "uglify-js": "2.4.24",
-    "clean-css": "*",
-    "babelify": "*",
-    "babel-preset-es2015": "*",
-    "babel-polyfill": "*"
+    "uglify-js": "2.4.24"
   },
   "license": "Apache-2.0",
   "scripts": {
@@ -57,13 +58,18 @@
   "browserify": {
     "transform": [
       "browserify-shim",
-      ["babelify", {
-        "ignore": "node_modules"
-      }]
+      [
+        "babelify",
+        {
+          "ignore": "node_modules"
+        }
+      ]
     ]
   },
   "babel": {
-    "presets": ["es2015"]
+    "presets": [
+      "es2015"
+    ]
   },
   "browser": {
     "jquery": "./node_modules/jquery/dist/jquery.js",
@@ -102,7 +108,7 @@
       "depends": "jquery:jQuery"
     },
     "jquery-contextmenu": {
-        "depends": "jquery:jQuery"
+      "depends": "jquery:jQuery"
     },
     "autosize": {
       "depends": "jquery:jQuery"