circle: use less to compile css

Also compile bootstrap

.gitignore

@@ -39,3 +39,6 @@ circle/bower_components
 
 
 # jsi18n files
 # jsi18n files
 jsi18n
 jsi18n
+
+# less
+*.css

circle/circle/settings/base.py

@@ -175,16 +175,17 @@ PIPELINE_CSS_COMPRESSOR = 'pipeline.compressors.yuglify.YuglifyCompressor'
 # PIPELINE_JS_COMPRESSOR = 'pipeline.compressors.yuglify.YuglifyCompressor'
 # PIPELINE_JS_COMPRESSOR = 'pipeline.compressors.yuglify.YuglifyCompressor'
 PIPELINE_JS_COMPRESSOR = None  # js compressors don't really like our deps
 PIPELINE_JS_COMPRESSOR = None  # js compressors don't really like our deps
 PIPELINE_DISABLE_WRAPPER = True
 PIPELINE_DISABLE_WRAPPER = True
+PIPELINE_LESS_ARGUMENTS = u'--include-path={}'.format(':'.join(STATICFILES_DIRS))
 PIPELINE_CSS = {
 PIPELINE_CSS = {
     "all": {"source_filenames": (
     "all": {"source_filenames": (
-        "bootstrap/dist/css/bootstrap.css",
-        "bootstrap/dist/css/bootstrap-theme.css",
         "fontawesome/css/font-awesome.css",
         "fontawesome/css/font-awesome.css",
         "jquery-simple-slider/css/simple-slider.css",
         "jquery-simple-slider/css/simple-slider.css",
         "bootstrap-tour/build/css/bootstrap-tour.css",
         "bootstrap-tour/build/css/bootstrap-tour.css",
-        "template.css",
-        "dashboard/dashboard.css",
-        "network/network.css",
+        "template.less",
+        "dashboard/dashboard.less",
+        "network/network.less",
+        "compile_bootstrap.less",
+        "bootstrap/dist/css/bootstrap-theme.css",
     ),
     ),
         "output_filename": "all.css",
         "output_filename": "all.css",
     }
     }

circle/dashboard/static/compile_bootstrap.less

+// Core variables and mixins
+@import "bootstrap/less/variables.less";
+
+// Custom variables
+@navbar-height: 45px;
+
+@import "bootstrap/less/mixins.less";
+
+// Reset and dependencies
+@import "bootstrap/less/normalize.less";
+@import "bootstrap/less/print.less";
+// we don't use these, also they make collectstatic fail ...
+// @import "bootstrap/less/glyphicons.less";
+
+// Core CSS
+@import "bootstrap/less/scaffolding.less";
+@import "bootstrap/less/type.less";
+@import "bootstrap/less/code.less";
+@import "bootstrap/less/grid.less";
+@import "bootstrap/less/tables.less";
+@import "bootstrap/less/forms.less";
+@import "bootstrap/less/buttons.less";
+
+// Components
+@import "bootstrap/less/component-animations.less";
+@import "bootstrap/less/dropdowns.less";
+@import "bootstrap/less/button-groups.less";
+@import "bootstrap/less/input-groups.less";
+@import "bootstrap/less/navs.less";
+@import "bootstrap/less/navbar.less";
+@import "bootstrap/less/breadcrumbs.less";
+@import "bootstrap/less/pagination.less";
+@import "bootstrap/less/pager.less";
+@import "bootstrap/less/labels.less";
+@import "bootstrap/less/badges.less";
+@import "bootstrap/less/jumbotron.less";
+@import "bootstrap/less/thumbnails.less";
+@import "bootstrap/less/alerts.less";
+@import "bootstrap/less/progress-bars.less";
+@import "bootstrap/less/media.less";
+@import "bootstrap/less/list-group.less";
+@import "bootstrap/less/panels.less";
+@import "bootstrap/less/responsive-embed.less";
+@import "bootstrap/less/wells.less";
+@import "bootstrap/less/close.less";
+
+// Components w/ JavaScript
+@import "bootstrap/less/modals.less";
+@import "bootstrap/less/tooltip.less";
+@import "bootstrap/less/popovers.less";
+@import "bootstrap/less/carousel.less";
+
+// Utility classes
+@import "bootstrap/less/utilities.less";
+@import "bootstrap/less/responsive-utilities.less";

circle/dashboard/static/template.css → circle/dashboard/static/template.less

@@ -23,46 +23,6 @@ html {
   padding-right: 15px;
   padding-right: 15px;
 }
 }
 
 
-/* values for 45px tall navbar */
-.navbar {
-  min-height: 45px;
-}
-
-.navbar-brand {
-  height: 45px;
-  padding: 12.5px 12.5px;
-}
-
-.navbar-toggle {
-  margin-top: 5.5px;
-  margin-bottom: 5.5px;
-}
-
-.navbar-form {
-  margin-top: 5.5px;
-  margin-bottom: 5.5px;
-}
-
-.navbar-btn {
-  margin-top: 5.5px;
-  margin-bottom: 5.5px;
-}
-
-.navbar-btn.btn-sm {
-  margin-top: 7.5px;
-  margin-bottom: 7.5px;
-}
-.navbar-btn.btn-xs {
-  margin-top: 11.5px;
-  margin-bottom: 11.5px;
-}
-.navbar-text {
-  margin-top: 12.5px;
-  margin-bottom: 12.5px;
-}
-
-/* --- */
-
 /* Responsive: Portrait tablets and up */
 /* Responsive: Portrait tablets and up */
 @media screen and (min-width: 768px) {
 @media screen and (min-width: 768px) {
   /* Let the jumbotron breathe */
   /* Let the jumbotron breathe */