css -> less

iteracticman · Nov 30, 2013 · 0f009e9 · 0f009e9
1 parent 9e253f6
commit 0f009e9
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 30 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -22,6 +22,10 @@ module.exports = function (grunt) {
         files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
         tasks: ['coffee:dist']
       },
+      less: {
+        files: ['<%= yeoman.app %>/styles/{,*/}*.less'],
+        tasks: ['less:dist']
+      },
       coffeeTest: {
         files: ['test/spec/{,*/}*.coffee'],
         tasks: ['coffee:test']
@@ -131,6 +135,20 @@ module.exports = function (grunt) {
         }]
       }
     },
+    less: {
+      options: {
+        paths: [ '<%= yeoman.app %>/styles', '<%= yeoman.app %>/bower_components/bootstrap/less' ]
+      },
+      dist: {
+        files: [{
+          expand: true,
+          cwd: '<%= yeoman.app %>/styles',
+          src: '{,*/}*.less',
+          dest: '.tmp/styles',
+          ext: '.css'
+        }]
+      }
+    },
     // not used since Uglify task does concat,
     // but still available if needed
     /*concat: {
@@ -226,7 +244,6 @@ module.exports = function (grunt) {
           src: [
             '*.{ico,png,txt}',
             '.htaccess',
-            //'bower_components/**/*',
             'images/{,*/}*.{gif,webp,mp4,ogv}',
             'styles/fonts/*'
           ]
@@ -249,14 +266,17 @@ module.exports = function (grunt) {
     concurrent: {
       server: [
         'coffee:dist',
+        'less:dist',
         'copy:styles'
       ],
       test: [
         'coffee',
+        'less',
         'copy:styles'
       ],
       dist: [
         'coffee',
+        'less',
         'copy:styles',
         'imagemin',
         'svgmin',
@@ -345,9 +365,6 @@ module.exports = function (grunt) {
     'rev',
     'usemin'
   ]);
-
-  grunt.registerTask('heroku:development', 'build');
-  grunt.registerTask('heroku:production', 'build');
 
   grunt.registerTask('default', [
     'jshint',

diff --git a/app/index.html b/app/index.html
@@ -15,8 +15,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
 
-  <!-- build:css(app) styles/main.css -->
-  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> 
+  <!-- build:css({.tmp,app}) styles/main.css -->
   <link rel="stylesheet" href="styles/main.css">
   <!-- endbuild -->
 </head>

diff --git a/app/styles/main.css → app/styles/main.less b/app/styles/main.css → app/styles/main.less
@@ -1,3 +1,5 @@
+@import "bootstrap.less";
+
 html, body {
   height: 100%;
 }
@@ -11,37 +13,41 @@ html, body {
   padding-bottom:100px; /* this needs to be bigger than footer height*/
 }
 footer {
-  background-color: rgb(248, 248, 248);
-  border-top: 1px solid rgb(231, 231, 231);
+  background-color: @navbar-default-bg;
+  border-top: 1px solid @navbar-default-border;
   position: relative;
   margin-top: -60px; /* negative value of footer height */
   height: 60px;
   clear:both;
   padding-top:10px;
   padding-bottom: 10px;
 }
+
 #iphone-screenshot-video {
   position: relative;
 	background-image: url('/images/vinolator_screenshot.png');
 	height: 501px;
 	width: 258px;
 	text-align: center;
 	display: inline-block;
-}
-#iphone-screenshot-video video{
-  position: relative;
-  top: 96px;
-}
-
-.dropdown-menu li div {
-  padding: 4px;  
-  border-bottom: 1px solid rgb(231, 231, 231);
-  border-top: 1px solid rgb(231, 231, 231);
+
+	video {
+    position: relative;
+    top: 96px;
+  }
 }
 
-.dropdown-menu li:first-child div {
-  padding-top: 0px;
-  border-top: 0px solid black;
+.dropdown-menu {
+  li div {
+    padding: 4px;  
+    border-bottom: 1px solid @navbar-default-border;
+    border-top: 1px solid @navbar-default-border;
+  }
+
+  li:first-child div {
+    padding-top: 0px;
+    border-top: 0px solid black;
+  }
 }
 
 @media(min-width: 768px) {
@@ -55,6 +61,7 @@ footer {
     top: 130px;
   }
 }
+
 @media (max-width: 767px) {
   .xs-center-sm-left {
     text-align: center;

diff --git a/dist/index.html b/dist/index.html
@@ -15,7 +15,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
 
-  <link rel="stylesheet" href="styles/29ca25c2.main.css">
+  <link rel="stylesheet" href="styles/d5f1218d.main.css">
 </head>
 <body ng-app="vinolatorWebApp">
   <!--[if lt IE 7]>

diff --git a/dist/styles/29ca25c2.main.css b/dist/styles/29ca25c2.main.css
diff --git a/dist/styles/d5f1218d.main.css b/dist/styles/d5f1218d.main.css
diff --git a/package.json b/package.json
@@ -38,7 +38,8 @@
     "karma-coffee-preprocessor": "~0.1.0",
     "karma-phantomjs-launcher": "~0.1.0",
     "karma": "~0.10.2",
-    "karma-ng-html2js-preprocessor": "~0.1.0"
+    "karma-ng-html2js-preprocessor": "~0.1.0",
+    "grunt-contrib-less": "~0.8.2"
   },
   "engines": {
     "node": "0.10.x",