Build less using gulp

SamyPesse · SamyPesse · commit be7ae3eb34fb · 2015-04-22T17:45:06.000-05:00
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-![Betty](https://github.com/SamyPesse/betty/blob/master/assets/betty.png?raw=true)
+![Betty](https://github.com/SamyPesse/betty/blob/master/public/images/betty.png?raw=true)
 
 Betty (or Ben for the ones who prefer a male receiptionist) is your own cutomizable receptionist, to forward call and messages to your team anywhere in the world. It's particulary usefull if your organization is operating in the US but based in another countries.
 
@@ -32,7 +32,7 @@ A team member can also contact Betty to get access to th organization directory
 
 ### The Receptionists Team
 
-![Team](https://github.com/SamyPesse/betty/blob/master/assets/team.png?raw=true)
+![Team](https://github.com/SamyPesse/betty/blob/master/public/images/team.png?raw=true)
 
 Betty can be configured to use another profile (voice, language, sentencesm etc.). Change your receiptionist by changing the `PROFILE` environment variable (see below).
 
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,12 @@
+var gulp = require('gulp');
+var less = require('gulp-less');
+var path = require('path');
+
+gulp.task('less', function () {
+    return gulp.src('./public/less/main.less')
+    .pipe(less())
+    .pipe(gulp.dest('./public/css'));
+});
+
+
+gulp.task('default', ['less']);
diff --git a/package.json b/package.json
@@ -21,7 +21,9 @@
     },
     "devDependencies": {
         "mocha": "2.2.4",
-        "chai": "2.2.0"
+        "chai": "2.2.0",
+        "gulp": "3.8.11",
+        "gulp-less": "3.0.3"
     },
     "scripts": {
         "test": "mocha --reporter list"
diff --git a/public/betty.png b/public/betty.png
diff --git a/public/css/main.css b/public/css/main.css
@@ -0,0 +1,5 @@
+.container {
+  max-width: 800px;
+  width: 100%;
+  margin: 0px auto;
+}
diff --git a/public/images/team.png b/public/images/team.png
diff --git a/public/less/main.less b/public/less/main.less
@@ -0,0 +1,7 @@
+@import "./variables.less";
+
+.container {
+    max-width: @container-width;
+    width: 100%;
+    margin: 0px auto;
+}
diff --git a/public/less/variables.less b/public/less/variables.less
@@ -0,0 +1 @@
+@container-width: 800px;
diff --git a/views/layout.html b/views/layout.html
@@ -6,6 +6,8 @@
         <link rel="stylesheet" href="css/styles.css?v=1.0">
     </head>
     <body>
+        <div class="container">
         {% block body %}{% endblock %}
+        </div>
     </body>
 </html>
