added less to bower config and converted main.css to less

Author: Chris McLean

app/index.html

@@ -11,7 +11,7 @@
         <!-- build:css({.tmp,app}) styles/main.css -->
         <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.css">
         <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-        <link rel="stylesheet" href="styles/main.css">
+        <link rel="stylesheet/less" type="text/css" href="styles/main.less">
         <link rel="stylesheet" href="styles/boilerplate.css">
         <link rel="stylesheet" href="vendor/leaflet-dist/leaflet.css">
         <link rel="stylesheet" href="vendor/leaflet.markerclusterer/dist/MarkerCluster.css">
@@ -57,6 +57,7 @@ <h2>Crunchbase search and visualization built using Angular.js and D3.</h2>
         <script src="vendor/leaflet.markerclusterer/dist/leaflet.markercluster.js"></script>
         <script src="vendor/ngInfiniteScroll/ng-infinite-scroll.js"></script>
         <script src="vendor/crossfilter/crossfilter.js"></script>
+        <script src="vendor/less.js/dist/less-1.6.1.js"></script>
         <!-- endbuild -->
 
         <!-- build:js({.tmp,app}) scripts/scripts.js -->

app/styles/main.css app/styles/main.lessapp/styles/main.css renamed to app/styles/main.less

@@ -1,3 +1,10 @@
+@white: #ffffff;
+@bright-blue: #60beff;
+@pale-blue: #cdebff;
+@grey-blue: #4c6d84;
+@dark-grey: #3d3d3d;
+@transparent-blue: rgba(70, 84, 93, 0.5);
+
 @font-face {
     font-family: 'Guilder';
     src: url('../fonts/guilder_free-webfont.otf');
@@ -9,7 +16,7 @@
 /* Space out content a bit */
 body {
   padding-bottom: 20px;
-  background-color: #3d3d3d;
+  background-color: @dark-grey;
 }
 
 /* Everything but the jumbotron gets side spacing for mobile first views */
@@ -57,69 +64,64 @@ body {
   clear:both;
 }
 
-/* BEGIN DATA SET CONTAINER */
-
 .data-set-container{
-  border-top: 1px solid #60beff;
-  background-color: rgba(70, 84, 93, 0.5);
+  border-top: 1px solid @bright-blue;
+  background-color: @transparent-blue;
   padding: 20px;
   box-sizing: border-box;
-}
-
-.data-set-container h3{
-  font-family: 'Guilder';
-  font-size: 53px;
-  color: #ffffff;
-  vertical-align: bottom;
-}
-
-.data-set-container p{
-  margin-top: 50px;
-  color: #ffffff;
-}
 
-.data-set-container .textlist{
-  border: 1px solid #60beff;
-}
-
-.data-set-container .form-group{
-  margin-bottom: 0px;
-  margin-top: 0px;
-}
-
-.data-set-container .dataset {
-  height: 300px;
-  overflow: scroll;
-  background-color: rgba(70, 84, 93, 0.5);
-  color: #ceecff;
-}
-
-.data-set-container tbody tr td{
-  border-top: 1px solid #60beff;
-}
-
-.data-set-container .input-group{
-  display: block;
-}
-
-.data-set-container input{
-  border-radius: 0px;
-  border: none;
-  border-bottom: 1px solid #60beff;
-  width: 100%;
-  background-color: rgba(70, 84, 93, 0.5);
-  color: #ffffff;
-}
-
-.data-set-container ::-webkit-scrollbar {
-  display: none;
-}
-
-/* END DATA SET CONTAINER */
-
-
-.textlist.select-list .dataset {
-  height: 251px;
+  h3{
+    font-family: 'Guilder';
+    font-size: 53px;
+    color: #ffffff;
+    vertical-align: bottom;
+  }
+  
+  p{
+    margin-top: 50px;
+    color: @white;
+  }
+  
+  .textlist{
+    border: 1px solid @bright-blue;
+  }
+  
+  .form-group{
+    margin-bottom: 0px;
+    margin-top: 0px;
+  }
+
+  .textlist.select-list .dataset {
+    height: 251px;
+  }
+
+  .dataset {
+    height: 300px;
+    overflow: scroll;
+    background-color: @transparent-blue;
+    color: #ceecff;
+  }
+
+  tbody tr td{
+    border-top: 1px solid @bright-blue;
+  }
+
+  .input-group{
+    display: block;
+  }
+
+  input{
+    border-radius: 0px;
+    border: none;
+    border-bottom: 1px solid @bright-blue;
+    width: 100%;
+    background-color: @transparent-blue;
+    color: @white;
+  }
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .spacing-med {
@@ -131,8 +133,6 @@ body {
   clear: both;
 }
 
-
-
 .remove-selected {
   text-align: right;
 }

bower.json

@@ -15,7 +15,8 @@
     "leaflet.markerclusterer": "*",
     "crossfilter": "~1.3.7",
     "ngInfiniteScroll": "*",
-    "d3-cloud": "*"
+    "d3-cloud": "*",
+    "less.js": "~1.6.1"
   },
   "devDependencies": {
     "angular-mocks": "~1.2.0",